node.js - AWS EC2 上的 React 前端？

Question

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

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

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

---

我想做的事...

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

---

我在哪里...

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

所以，我:

• 已安装的 Node 和 NPM
• 克隆了我的存储库
• 安装前端依赖项
• 使用 npm run build 创建了生产版本
• 使用 npm start 启动前端
• 看着我辉煌的网站充满我的浏览器:情感:

---

我的问题...

尽管它有效，但我认为它不对，而且我有一个问题。

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

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

---

• 那我做错了什么？

• 我是否只需要 Node 来运行前端？

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

• 如何提供文件？

• 如何保持其运行？

---

正如我所说，这看起来很微不足道，但我找到的示例也连接了数据库，拉入了东西，并连接了我现在不需要的其他东西，并且文档没有涵盖它.

对所有问题表示歉意，但这可以省去评论中的来回。

谢谢大家:)

Answer 1

嗯!经过一番摆弄后，我终于做到了我想做的事。

基本上，我所做的是:

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

2) 在 EC2 上安装 Node 并永久运行

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 连接到实例

• 安装 Node 。这些是我在 AWS 页面 here 中使用的步骤

  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  • 。 ~/.nvm/nvm.sh
  • nvm 安装 Node
  • node -e "console.log('运行 Node.js' + process.version)"

• 安装 forever

  • npm install -g 永远

• 克隆存储库

  • git 克隆 my-repo.git

• 切换到新创建的目录

  • cd my-new-directory

• 安装项目的依赖项

  • npm 我

• 创建 React 项目的生产版本

  • npm run build

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

  • 永远启动server.js

---

您的站点现在应该已启动并正在运行，Node 可以从 React 的 build 文件夹中提供生产就绪构建 =)