如何将ReactJS + NodeJS Express应用程序部署到AWS？ [英] How to deploy ReactJS + NodeJS Express application onto AWS?

问题描述

我有一个ReactJS + NodeJS / ExpressJS + Webpack / Babel应用程序，并希望将其部署到AWS上。

I have a ReactJS + NodeJS/ExpressJS + Webpack/Babel application, and would like to deploy it onto AWS.

我的问题是，我必须分别部署ReactJS和NodeJS / ExpressJS吗？还是可以一起部署在一起？

My question is, would I have to deploy ReactJS and NodeJS/ExpressJS separately? Or could it they be deployed together at once?

另外，我提到的任何一个很好的指南，看着，但似乎都是特定的，无论是NodeJS还是ReactJS。最近找到它 https://www.youtube.com/watch?v=WxhFq64FQzA ，但我相信它只涵盖了NodeJS / ExpressJS而不是ReactJS。

Also, any good guides specific to my stack mentioned? Looked around but all seemed to be specific to one particular, whether it be just NodeJS or ReactJS. Closest found it https://www.youtube.com/watch?v=WxhFq64FQzA, but I believe it only covers NodeJS/ExpressJS and not ReactJS.

目前，该应用程序是一个项目，包括所有的ReactJS + NodeJS / ExpressJS + Webpack / Babel。

Currently the application is under one project, including all of ReactJS + NodeJS/ExpressJS + Webpack/Babel.

推荐答案

1。如果您有两个不同的项目

一个反应单页应用和一个Node / Express API。

1. If you have two distinct projects

e.g. a React single-page app and a Node/Express API.

a。您可以在

• 前端（React应用） =https://aws.amazon.com/s3 =nofollow noreferrer> S3 和 CloudFront （教程）

• the frontend (the React app) on S3 and CloudFront (tutorial)

后端（Node API）在弹性豆串（推荐）或 EC2

the backend (the Node API) on Elastic Beanstalk (recommended) or EC2

否则，您可以在 Elastic Beanstalk 或 EC2 。在这样做时，您会错过S3和CloudFront上的主机优势，即更快地为您的用户提供和更便宜的费用。在我看来，它更容易，更快，更实用，更不容易出现错误，更新和单独部署Web应用程序的客户端和服务器端。

Otherwise, you can deploy both parts together at once on Elastic Beanstalk or EC2. In doing so, you miss out on the benefits of hosting on S3 and CloudFront, i.e. faster delivery for your users and cheaper costs. In my opinion, it's also easier, faster, more practical and less prone to bugs to update and deploy separately the client-side and the server-side of a web application.

的湾为什么选择S3 + CloudFront而不是S3？

• all 使用CDN的好处


• 您的自己的域名和免费的SSL证书，一键点击


• 4xx 重定向错误（如果您的应用程序使用 HTML5历史记录路由器），则需要


• 缓存系统


• http2 和 http到https 重定向

• all the benefits of using a CDN
• your own domain name and a free SSL certificate in 1-click
• redirection on 4xx errors (necessary if your app uses a HTML5 History-based router)
• the caching system
• http2 and http to https redirection

c。如何处理CORS？

您可以使用不同的子域，例如

You can use different subdomains, e.g.

• api.domain.com 为API


• app.domain.com 应用程序

• api.domain.com for the API
• app.domain.com for the app

然后启用CORS ：

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2 。如果您有一个项目

例如。一个Node应用程序包括一些React视图。

您必须在弹性豆梗或 EC2 。

注意：如果您有一个项目，包括两个子项目（即React应用程序的文件夹，另一个用于Node API），并且两个子项目仍然工作分开后，您可以分开部署子项目（参见答案的第一部分）。

Note: If you have a single project including two sub-projects (i.e. a folder for the React app and another one for the Node API), and if both sub-projects still work when they are separated, then you can deploy the sub-projects separately (see first part of the answer).

运行您的。您可以手动（在部署在AWS之前）或自动执行（在 CI / CD 系统）。

Run your Webpack/Babel production build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system).

我刚刚回答了相关问题不限于AWS。

I just answered a related question not restricted to AWS.

这篇关于如何将ReactJS + NodeJS Express应用程序部署到AWS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！