在AWS EC2上反应前端?

时间:2020-03-07 22:57:24

标签: node.js reactjs amazon-ec2

我简直不敢相信这是多么微不足道,但是我找不到任何示例,认为它不是更大的构建的一部分,只会增加进一步的复杂性。

我正在整理一个规模较小的网站,而在此期间,我还花时间来试用一些AWS服务。

我现在有一个没有后端的React前端,并且正在EC2实例上运行它。 在每个人都开始疯狂地告诉我它对我的需求来说是过大的之前,我知道我可以使用Amplify或S3 ,但是就像我说的那样,我正在尝试一些更复杂的项目进一步发展。


我想做什么...

在EC2上运行我的React前端,并使用某种程序包管理(例如Forever或PM2等)在我关闭终端时保持其运行。


我在哪里...

据我了解,我需要安装Node来为我的React前端服务(...但是我认为这不对吗?)。

所以,我已经:

  • 已安装的节点和NPM
  • 克隆了我的仓库
  • 安装了前端依赖项
  • 使用npm run build
  • 创建了生产版本
  • npm start引导前端
  • 看着我光荣的网站充满了我的浏览器:情感:

我的问题...

即使有效,我也不认为这是对的,而且我有问题。

1)我创建了一个build文件夹来提供静态文件,但仍然运行npm start,它是一个dev build <-???

2)当我尝试添加Forever或PM2时,它不再起作用,因为无法访问该站点


  • 那我做错了什么?

  • 我什至需要Node只运行前端吗?

  • React build文件夹应该放在哪里?

  • 我如何提供文件?

  • 如何保持其运行?


就像我说的那样,这看起来很琐碎,但是我发现的示例还连接了数据库,添加了东西,并连接了我现在不需要的其他东西,而文档也没有涵盖它

为所有问题表示歉意,但省去了在评论中反复出现的麻烦。

谢谢:)

2 个答案:

答案 0 :(得分:1)

我想您可以使用静态前端来使用节点,但我可能不会选择将节点用于静态网站。

另一种选择是在您的EC2实例上安装Web服务器,例如NGINXApache。快速的Google搜索将在这里为您提供大量帮助-类似于“ nginx static website”。

因为您没有运行节点应用程序,所以PM2根本没有意义。如果您有运行中的节点后端,则可以set up NGINX as an HTTP proxy for your node application

答案 1 :(得分:0)

好吧!经过一番摆弄之后,我设法做到了自己想要的。

基本上,我所做的是:

1)创建了一个Node文件来服务React的build文件夹中的静态文件

2)在EC2上永久安装了节点&

3)克隆了我的仓库

4)使用forever

运行我的Node服务器文件

这是...

  • 在React项目的根目录中创建一个Node服务器文件以服务于前端(我称为server.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(port, () => console.log(`Running on port ${port}`));
  • 使用以下安全组启动默认的Ubuntu EC2实例:

    • SSH-端口20
    • HTTP-端口80
    • HTTPS-端口443
    • 自定义-端口3000
  • SSH登录到实例

  • 安装节点。这些是我在AWS的页面here

    中使用的步骤
    • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
    • . ~/.nvm/nvm.sh
    • nvm install node
    • node -e "console.log('Running Node.js ' + process.version)"
  • 安装forever

    • npm install -g forever
  • 克隆存储库

    • git clone my-repo.git
  • 切换到新创建的目录

    • cd my-new-directory
  • 安装项目的依赖项

    • npm i
  • 创建React项目的生产版本

    • npm run build
  • 运行我们之前创建的Node服务器文件

    • forever start server.js

您的站点现在应该已启动并正在运行,Node可以从React的build文件夹=)开始生产准备就绪构建。