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

问题描述

我有一个 React + Webpack/Babel + Node/Express 应用程序，我想将它部署在 AWS 上.

我是否必须分别部署 React 和 Node/Express?或者它们可以同时部署在一起吗?

解决方案

1.如果你有两个不同的项目

例如一个 React 单页应用和一个 Node/Express API.>

一个.可以分别部署

• S3 上的前端(React 应用)和CloudFront (教程)

• Elastic Beanstalk后端(Node API)>(推荐)或 EC2

另一种选择是在 Elastic Beanstalk 或 EC2.但是，您会错过在 S3 和 CloudFront 上托管的好处，即为您的用户提供更快的交付和更便宜的成本.在我看来，将 Web 应用程序的客户端和服务器端分开更新和部署也更方便，更不容易出现意外错误.

单独部署的另一个好处:对于前端和后端具有不同团队的组织，每个团队都可以更轻松地自行部署应用程序的一方，而无需依赖另一方团队.

b.为什么是 S3 + CloudFront 而不是单独的 S3?

• 所有使用 CDN 的好处
• 您自己的域名和一键免费 SSL 证书
• 对 4xx 错误的重定向(如果您的应用使用基于 HTML5 历史记录 的路由器，则需要)
• 缓存系统
• http2 和 http 到 https 重定向

c.如何处理 CORS?

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

• api.domain.com 用于 Node/Express API
• app.domain.com 用于 React 应用

然后在 API 中启用 CORS:

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

2.如果你只有一个项目

例如一个包含一些 React 视图的 Node 应用.

您必须在 Elastic Beanstalk 或 EC2.

注意:如果你有一个项目包含两个子项目(即一个文件夹是React app，另一个是Node API)，并且如果两个子项目分开后仍然可以工作，那么你可以部署单独的子项目(请参阅答案的第一部分).

3.在这两种情况下

在部署 React 部分之前运行您的 Webpack build.您可以手动(在 AWS 上部署之前)或自动(在您的 CI/CD 系统).如果您使用 create-react-app (CRA) 引导您的应用程序，只需运行 yarn build 或 npm run build 在项目的根目录并上传build"的内容文件夹到您的 S3 存储桶.

4.工具

• 官方 AWS S3 CLI - 管理使用高级 aws s3 命令的 S3 存储桶和对象.
• 官方 AWS Elastic Beanstalk CLI - 管理和使用 eb 命令部署您的后端.
• S3-deploy - 用于将文件部署到 S3 的 CLI 实用程序.

5.如果不限于 AWS

我回答了一个不限于 AWS 的相关问题.

I have a React + Webpack/Babel + Node/Express application and I want to deploy it on AWS.

Would I have to deploy React and Node/Express separately? Or could they be deployed together at once?

解决方案

1. If you have two distinct projects

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

a. You can deploy both separately

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

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

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.

Another benefit of deploying separately: For organizations with different teams for the frontend and backend, it's easier for each team to be able to deploy their side of the application on their own without depending on the other team.

b. Why S3 + CloudFront instead of S3 alone?

• 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. How to handle CORS?

You can use different subdomains, e.g.

• api.domain.com for the Node/Express API
• app.domain.com for the React app

Then enable CORS in the API:

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

2. If you have a single project

e.g. a Node app including some React views.

You have to deploy the whole app on Elastic Beanstalk or EC2.

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).

3. In both cases

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). If you bootstrapped your app with create-react-app (CRA), just run yarn build or npm run build at the root of the project and upload the content of the "build" folder to your S3 bucket.

4. Tools

• 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.

5. If not restricted to AWS

I answered a related question not restricted to AWS.

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