如何将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 使用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的api.domain.com


• app.domain.com for the app

• 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视图。

你必须在 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屋！