如何将React + NodeJS Express应用程序部署到AWS? [英] How to deploy a React + NodeJS Express application to AWS?
问题描述
我有一个React + Webpack / Babel + Node / Express应用程序,我想在AWS上部署它。
I have a React + Webpack/Babel + Node/Express application and I want to deploy it on AWS.
我是否必须单独部署React和Node / Express?或者它们可以一次部署在一起吗?
Would I have to deploy React and Node/Express separately? Or could they be deployed together at once?
推荐答案
1。如果您有两个不同的项目
,例如。 a反应单页应用和Node / Express API。
1. If you have two distinct projects
e.g. a React single-page app and a Node/Express API.
a。您可以单独部署
-
前端(React应用)< a href =https://aws.amazon.com/s3\"rel =noreferrer> S3 和 CloudFront (教程)
the frontend (the React app) on S3 and CloudFront (tutorial)
后端(Node API) / elasticbeanstalk /rel =noreferrer> Elastic Beanstalk (推荐)或 EC2
the backend (the Node API) on Elastic Beanstalk (recommended) or EC2
另一种选择是在 Elastic Beanstalk 或 EC2 。但是,您将错过托管S3和CloudFront的好处,即为您的用户提供更快的交付和更便宜的成本。在我看来,在Web应用程序的客户端和服务器端单独更新和部署时,它也更方便,更不容易出现意外错误。
Another option is to deploy both parts together at once on Elastic Beanstalk or EC2. However, you'll 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 more convenient and less prone to unexpected errors to update and deploy separately the client-side and the server-side of a web application.
湾为什么单独使用S3 + CloudFront而不是S3?
- 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 aHTML5 History
-based router) - the caching system
http2
andhttp to https
redirection
c。如何处理CORS?
您可以使用不同的子域名,例如
You can use different subdomains, e.g.
-
API的api.domain.com
-
app.domain.com
for the app
api.domain.com
for the APIapp.domain.com
for the app
然后启用CORS :
app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)
2。如果您有一个项目
,例如。一个Node应用程序,包括一些React视图。
你必须在 Elastic Beanstalk 或 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).
运行您的 Webpack构建部署React部分。您可以手动(在AWS上部署之前)或自动(在您的 CI / CD 系统)。
Run your Webpack build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system).
- 官方AWS S3 CLI - 使用高级
aws s3
命令管理S3存储桶和对象。 - 官方AWS Elastic Beanstalk CLI - 使用
eb
命令管理和部署后端。 - S3-deploy - 用于将文件部署到S3的CLI实用程序。
- Official AWS S3 CLI - Manage S3 buckets and objects using high-level
aws s3
commands. - Official AWS Elastic Beanstalk CLI - Manage and deploy your backend using
eb
commands. - S3-deploy - CLI utility for deploying files to S3.
我回答了相关问题仅限于AWS。
I answered a related question not restricted to AWS.
这篇关于如何将React + NodeJS Express应用程序部署到AWS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!