在 AWS EC2 上反应前端？

Question

我不敢相信这是多么微不足道，但我找不到任何例子表明它不是更大的构建的一部分，只会增加更多的复杂性。

我正在建立一个小型网站，同时我也在花时间尝试一些 AWS 服务。

我现在有一个没有后端的 React 前端，我在 EC2 实例上运行它。 在每个人开始疯狂告诉我这对我需要的东西来说太过分之前，我知道我可以使用 Amplify 或 S3，但就像我说的，我正在玩一些更复杂的项目，因为项目将进一步发展。

---

我想做什么...

在 EC2 上运行我的 React 前端，使用某种包管理（例如 Forever 或 PM2 等）以在我关闭终端时保持其运行。

---

我在哪里……

据我了解，我需要安装 Node 来为我的 React 前端服务（...但我认为这不对？）。

所以，我已经：

• 已安装的节点和 NPM
• 克隆了我的仓库
• 安装了前端依赖项
• 使用npm run build 创建了一个生产版本
• 使用npm start 启动前端
• 看着我光荣的网站填满了我的浏览器 :emotional:

---

我的问题...

即使它有效，但我认为它不正确，我有一个问题。

1) 我创建了构建文件夹来提供静态文件，但仍然运行 npm start，这是一个开发构建

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

---

• 那么我做错了什么？

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

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

• 如何提供文件？

• 如何保持运行？

---

正如我所说，这似乎很琐碎，但我发现的示例还包括连接数据库、拉取东西以及连接我现在不需要的其他东西，并且文档没有涵盖它.

对所有问题表示歉意，但它可以节省在 cmets 中来回走动。

谢谢大家:)

Answer 1

我想你可以使用静态前端，但我可能不会选择将 node 用于静态网站。

另一种选择是在您的 EC2 实例上安装 Web 服务器，例如 NGINX 或 Apache。一个快速的谷歌搜索会在这里给你很多帮助——比如“nginx static website”。

由于您没有运行节点应用程序，PM2 没有任何意义。如果你曾经运行过一个节点后端，你可以set up NGINX as an HTTP proxy for your node application。

Answer 2

好吧！经过一番摆弄，我设法做我想做的事。

基本上，我所做的是：

1) 创建一个 Node 文件来提供来自 React 的 build 文件夹的静态文件

2) 在 EC2 上安装 Node 和 Forever

3) 克隆了我的仓库

4) 使用forever 运行我的节点服务器文件

---

方法如下...

• 在 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 文件夹中的生产就绪构建提供服务 =)