在 AWS EC2 上反应前端？

Question

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

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

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

---

我想做的事...

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

---

我在哪...

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

所以，我已经：

• 已安装的节点和 NPM
• 克隆我的回购
• 安装了前端依赖
• 使用npm run build创建了一个生产npm run build
• 使用npm start前端
• 看着我辉煌的网站填满了我的浏览器 :emotional:

---

我的问题...

即使它有效，我也不认为这是正确的，我有一个问题。

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

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

---

• 那么我做错了什么？

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

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

• 我如何提供文件？

• 我如何让它继续运行？

---

正如我所说，这看起来很微不足道，但我发现的示例还连接了一个数据库，拉入了一些东西，并连接了我现在不需要的其他东西，而文档没有涵盖它。

对所有问题表示歉意，但它可以避免在评论中反复出现。

谢谢大家:)

Answer 1

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

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

由于您没有运行节点应用程序 PM2 并没有真正意义。 如果您曾经运行过节点后端，则可以将 NGINX 设置为节点应用程序的 HTTP 代理。

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”页面中使用的步骤， 在这里

  • 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)"

• 永久安装

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