如何使用 ReactJS/NodeJS 一起部署到 Amazon Web Services (AWS)？

Posted 2023-03-07

【中文标题】如何使用 ReactJS/NodeJS 一起部署到 Amazon Web Services (AWS)？

【英文标题】：How make deployment onto Amazon Web Services (AWS) with ReactJS/NodeJS together?

【发布时间】：2017-05-07 08:09:45

【问题描述】：

我目前在一个项目下将 ReactJS + NodeJS/ExpressJS + Webpack 安装到 EC2、Amazon Web Services (AWS) 上，并希望在一个项目中一次将其部署在一起。

对于如何去做有什么建议？完成了研究，我只看到了关于部署一个特定的教程，无论是 ReactJS 还是 NodeJS。任何见解或线索将不胜感激。

将接受/支持答案。提前谢谢你

【问题讨论】：

使用 Docker 非常简单，EC2 支持它。

【参考方案1】：

您不会“部署” ReactJS，它只是一个静态文件或与应用程序中的任何其他 JS 库一样的文件。你也不需要部署 Webpack。 Webpack 应该在开发者机器上运行（或在 CI/CD 堆栈或构建系统中）。

至于 NodeJS 部分，只需使用 Elastic Beanstalk。

【讨论】：

在我接受答案/赞成之前，有几个问题。只要我只部署 NodeJS，就不需要任何配置或破解来让 ReactJS + Webpack 工作吗？您能否参考我所说的部署指南？提前谢谢你

这里有一个名为“将 Node.js 应用程序部署到 AWS Elastic Beanstalk”的官方指南：docs.aws.amazon.com/elasticbeanstalk/latest/dg/…

如何对 EC2 执行此操作？我是否只需要像这样部署 NodeJS 就可以了？

只是检查一下你是否看过我的最后评论。请告诉我。

我不同意 webpack 应该在开发机器上运行。这会污染源代码控制历史和存储。我在部署期间使用 git hook 运行所有构建。

【参考方案2】：

我来自更多的运营背景，我会说如果您的目标包括尽可能保持该站点正常运行，那么使用 Packer 生成 AMI 并使用 CloudFormation 构建 Application Load Balancer（较新，ELB 的便宜兄弟）在 AutoScalingGroup 前面，它使 EC2 实例保持正常运行。

【讨论】：

无意拒绝您的建议，但我刚刚听到有人说，我宁愿至少获得一些关于如何/从哪里开始的实际指导。最好有完整的指南。

那我再试一次。但首先我需要澄清一下您的设置目标 - 是用于生产且重要的是稳定和可用，还是用于稳定性不太重要而有利于快速更新的开发？

别担心！它用于生产，但仅用于类似的内部使用，所以我会说更多支持快速更新。但必须将它们部署在 EC2 中，最好全部在一个项目下。

好的。我怀疑使用 Packer 为每次更改刻录 AMI 会花费太长时间。我建议您考虑使用 Docker 构建 Docker 映像并配置您的 EC2 实例以拉下并运行新的 Docker 映像。让该 EC2 实例由 AutoScalingGroup 启动（它可以是恒定数量的实例）。对于 CloudFormation/ASG/UserData 部分（但不是 Docker），您可能会从 github.com/amosshapira/thermal

获得提示

Docker 有什么用？我目前有运行 Amazon Linux 的 EC2 实例，并通过 SFTP 将我的项目（包含 React/NodeJS/Express）转移到实例上。对于 EC2 的安全组，我为 3000 开放了一个端口（协议：tcp，源：0.0.0.0/0），这也是我的 Express 的定义方式。所以我在 EC2 实例中运行 Express，但看到它在终端内监听端口 3000。但是一旦我用:3000 访问公共DNS，它就会说The site can't be reached - ec2...us-west-1.compute.amazonaws.com 响应太迟了。可能是什么问题？

【参考方案3】：

我不会将构建提交到源代码管理。我看到了很多，它可以让事情变得更容易，但你也可以忘记重建，因为你必须手动进行重建，它会给你的 repo 增加很多膨胀。

我认为构建应该作为部署过程的一部分运行。假设您使用的是 git，您可以在远程仓库中添加脚本 hooks/post-receive。当您推送到该远程时，脚本将运行。这是我构建 webpack 的地方。

您可能想查看 https://github.com/git-deploy/git-deploy 的上下文，但我手动执行此操作。

在我的项目中，我在部署机器上执行git --init --bare /var/git/myproject.git，然后在/var/git/hooks/post-receive 中添加脚本。钩子将代码签出到/var/www/myproject，运行构建，它填充/var/www/myproject/build。然后它删除旧的/var/www/myproject/public 并将build 重命名为public。完成了。

【讨论】：

如何一起部署 reactjs/nodejs 项目？

您可以自定义 post-receive 脚本来做任何您想做的事情，包括启动节点服务器。完全由你决定！

【参考方案4】：

我目前正在做一个与您描述的完全一样的大型项目。首先，有很多不同的方法可以做到这一点，所以你真正需要的是一些通用的入门指南，然后如果你愿意，我们可以在做出一些初步决定时更深入地研究细节。如果您已经在两个单独的步骤中部署和运行了应用程序，但只是希望将它们结合起来，我绝对可以提供帮助。我只需要知道您当前的构建/部署方式。如果您刚刚开始构建管道并需要从头开始设置流程，请继续阅读：

首先，您需要设置某种构建服务器来安装您的 npm 依赖项并运行您的 webpack 构建。您很可能需要一个单独的 webpack 配置，仅用于您的构建服务器，这将为您提供针对生产或 qa/staging 环境优化的构建。此配置应拆分出您不会一直更新的供应商文件，使用提取文本插件提取单独的 css 文件并对文件进行 uglify。如果你有一个同构的 React 应用程序，或者正在使用你的 node 版本不支持的 es6 功能，那么你还需要为你的服务器代码构建一个 webpack 构建。这与您在实际编写应用程序时希望在本地计算机上进行的热重载构建确实不同。如果您想要我们用于本地开发和 CI 构建的 webpack 配置文件，我将很乐意展示一些示例。你可能还需要一个 build.sh 或 makefile 来处理你的 webpack 构建创建的已编译的 .js 文件，但这取决于你的部署，我稍后会介绍。您可以在本地运行您的生产构建，因为您的配置恰到好处，并从这些文件中启动应用程序以测试它是否正常工作。此外，由于您可能希望能够自动化所有这些，因此您可能希望在构建应用程序之前运行测试和 linting，我们运行 eslint 和 mocha/jdom 来运行我们的酶/预期规格作为一部分我们的构建。一旦一切顺利，您很可能希望设置一个可以自动运行构建的构建服务器。我的团队正在为此使用 Jenkins，这需要更多的工作来设置，但它是免费的（除了我们运行它的 ec2 盒子）。还有大量基于订阅的构建/持续集成服务器，例如 Travis 和 CodeShip。有很多关于这些不同产品的优缺点以及如何设置它们的文章。最重要的是，您需要一个构建服务器，它可以从源代码管理中提取您的代码、安装 npm deps、lint、测试和构建您的应用程序。如果有任何失败，它应该会导致您的构建失败，如果您的构建成功，您将拥有某种存档，稍后您将部署到 ec2 实例。在我们的商店中，我们使用 build.sh 文件来压缩我们的构建存档（基本上是一个文件夹，其中包含我们的节点服务器文件以及我们的缩小客户端文件、css 文件以及运行应用程序所需的任何字体或图像）并将其上传到我们部署的 S3 存储桶。我们喜欢这种相当古老的方法，因为 tarball 永远不会改变，所以我们有超可靠的回滚。

您如何处理构建存档取决于您希望如何进行部署。我们有一个使用 puppet 的自定义部署系统，但是有很多产品可以做到这一点，比如弹性豆茎，这样设置起来会容易得多。您需要某种流程主管来实际运行您的节点应用程序，因此除非您有一个想要构建自定义管道的开发运营团队，否则使用 AWS 内置功能可能是最简单的入门方法。像往常一样，有很多方法可以做到这一点，但基本原则是你需要一些东西来下载你的构建档案并运行/监督你的节点进程。您可能还希望能够即时创建和配置 ec2 盒子（Puppet、chef 等），甚至使用容器（Docker），它允许您将完整的堆栈作为单个单元移动。如果您需要扩展应用程序，使用自动化创建和配置服务器至关重要，但它很复杂，对于较小的项目可能没有必要。这绝对是一个您可以简单开始并在以后增加复杂性的领域，只要您有良好的长期目标并确保采取必要的步骤为未来的复杂性做准备。

所有这些都可以让你在杂草中走得更远，所以最好在开始时找到最简单的东西来满足你的需求，然后根据实际情况的需要增加复杂性。如果您提供更多有关您从事的项目的规模和资金充足的背景信息，我将很乐意详细说明这些细节。如果这是一个学习技术的小项目，那么如果你正在尝试构建一个具有大量流量和/或复杂功能的应用程序，我会有非常不同的建议。

【讨论】：

嗨，本。非常感谢你的洞察力。有时间可以聊聊吗？

嗨，Jo Ko，我很乐意找个时间聊天。我实际上不确定是否有一种方法可以在不将我的电子邮件地址放在 SO 上的情况下交换信息。有什么想法吗？

【参考方案5】：

这可能会得到 100 个不同的答案，而且它们最终都可能是好主意。首先，您提到 react + nodejs - 请记住，它们解决不同的任务。 React 将成为前端并通过静态文件提供服务。 Nodejs 更侧重于服务器端，并且将成为提供数据的代码。他们可以轻松地一起工作。您可以使用 Express for the webserver (nodejs) 来提供 html/React 页面。

不幸的是，我看到你提到了 webpack，所以你将不得不通过 webpack、gulp、grunt 等来“构建”你的应用程序。这就是源代码控制和构建服务器很棒的地方——但是如果你是新手，它可能比你需要的更复杂。

如果您只有基本的 EC2 映像作为网络服务器并且只有 1-2 个，那么最大的障碍就是推高您的代码。 https://deploybot.com/ 之类的东西可以工作，因为它可以通过 ftp 等将你的 git repo 推送到多个主机。如果你想要更高级一点，你可以看看 Jenkins 之类的东西或其他一些东西。

Docker 是一个不错的选择，如果您要与多个开发人员、服务器环境、部署打交道 - 值得花时间。否则，请保持简单，只需在 EC2 实例上获取您的代码；）。

【讨论】：

我目前有运行 Amazon Linux 的 EC2 实例，并通过 SFTP 将我的项目（包含 React/NodeJS/Express）转移到实例上。对于 EC2 的安全组，我为 3000 开放了一个端口（协议：tcp，源：0.0.0.0/0），这也是我的 Express 的定义方式。所以我在 EC2 实例中运行 Express，但看到它在终端内监听端口 3000。但是，一旦我使用：3000 访问公共 DNS，它就会显示无法访问该站点 - ec2...us-west-1.compute.amazonaws.com 响应时间太晚了。可能是什么问题？

尝试在您的 express 应用中添加类似这样的内容：app.get('/status', (req, res) => res.status(200).send('Service running'));，然后转到您的公共 dns url:3000/status。这至少应该告诉您这是代码问题还是服务器问题。替换 app 您用于 express 应用程序的任何变量。

我应该在控制台上看到问题，对吗？但是我什么也没看到，页面又超时了，说响应太晚了。我目前也有app.get('/', function(req, res) res.sendFile(path.resolve('...')));。应该在之前还是之后去？之后试了一下。