阅读背景:

如何将React + NodeJS Express应用程序部署到AWS?

来源:互联网 

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

我有一个React + Webpack/Babel + Node/Express应用程序,我想把它部署到AWS上。

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

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

2 个解决方案

#1


38  

1. If you have two distinct projects

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

例如,一个响应单页应用程序和一个节点/Express API。

a. You can deploy both separately

a.您可以分别部署这两种

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

    S3和CloudFront上的前台(response app)(教程)

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

    在弹性Beanstalk(推荐的)或EC2上的后端(节点API)。

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.

另一种选择是在弹性Beanstalk或EC2上同时部署这两个部分。然而,您将错过在S3和CloudFront上托管的好处,即为用户提供更快的交付和更低的成本。在我看来,单独更新和部署web应用程序的客户端和服务器端也更方便,更不容易出现意外错误。

b. Why S3 + CloudFront instead of S3 alone?

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

  • all the benefits of using a CDN
  • 使用CDN的所有好处
  • your own domain name and a free SSL certificate in 1-click
  • 您自己的域名和一个免费的SSL证书在1点击
  • redirection on 4xx errors (necessary if your app uses a HTML5 History-based router)
  • 重定向4xx错误(如果你的应用程序使用HTML5历史的路由器)
  • the caching system
  • 缓存系统
  • http2 and http to https redirection
  • http2和http到https重定向

c. How to handle CORS?

c.如何处理CORS?

You can use different subdomains, e.g.

可以使用不同的子域。

  • api.domain.com for the API
  • api.domain.com的API
  • app.domain.com for the app
  • app.domain.com的应用

Then enable CORS in the API:

然后在API中启用CORS:

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.

例如,一个包含一些React视图的节点应用程序。

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

您必须在弹性Beanstalk或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).

注意:如果您有一个包含两个子项目的项目(即React应用程序的文件夹和Node API的另一个文件夹),如果两个子项目在分离时仍然有效,那么您可以分别部署子项目(请参阅答案的第一部分)。

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

在部署React部分之前运行Webpack构建。您可以手动(在AWS上部署之前)或自动地(在您的CI/CD系统中)进行此操作。

4. Advanced / Troubleshooting

  1. If you are building an offline-first Progressive Web App with a service worker, you will have to disable the cache for your service-worker.js on S3, i.e. cache-control max-age=0.
  2. 如果您正在与服务工作人员构建一个离线优先级的渐进Web应用程序,则必须禁用服务工作人员的缓存。S3上的js,即cache-control max-age=0。

5. Tools

  • Official AWS S3 CLI - Manage S3 buckets and objects using high-level aws s3 commands.
  • 使用高级AWS S3命令管理S3桶和对象。
  • Official AWS Elastic Beanstalk CLI - Manage and deploy your backend using eb commands.
  • 官方AWS弹性Beanstalk CLI -使用eb命令管理和部署后端。
  • S3-deploy - CLI utility for deploying files to S3.
  • S3-deploy - CLI实用程序,用于将文件部署到S3。

6. If not restricted to AWS

I answered a related question not restricted to AWS.

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

#2


6  

Basic Concepts

To deploy your app hassle free, you need to learn about three concepts: Microservices, containers, and process managers. I will discuss them with a bit more details and few links to get you started:

为了免费部署应用程序,您需要了解三个概念:微服务、容器和流程管理器。我将更详细地讨论它们,并提供一些链接让您开始:

Microservices

Microservices is an architecture that allows you to divide your app into smaller services. This has multiple benefits: 1- The services are easily testable. 2- The services are replaceable. 3- The services can scale separately.

微服务是一种架构,允许您将应用程序划分为更小的服务。这有多种好处:1——服务很容易测试。2-服务是可替换的。3-服务可以单独扩展。

Containerization

Almost every useful app has at least dozens of dependencies. You can install dependencies on the target machines, but most certainly you'll face few challenges. Programs like Docker allow you to create a container for your app and deploy that container on the cloud. (Regardless of the cloud provider) Learn more...

几乎所有有用的应用程序都至少有几十个依赖项。您可以在目标机器上安装依赖项,但最肯定的是,您将面临很少的挑战。Docker之类的程序允许您为应用程序创建一个容器,并将该容器部署到云上。(不管云提供商是谁)了解更多……

Process Managers

Process managers ensure that your app is running smoothly and all parts are healthy. If your app crashes, it can easily restart the app.

过程管理器确保您的应用程序运行顺利,并且所有部分都是健康的。如果你的应用程序崩溃了,它可以很容易地重新启动应用程序。

Deploying a serverless NodeJS / React Application

Note: This approach does not work if you are doing server-rendering with ReactJS. Go to the next option.

注意:如果您正在使用堆js执行服务器呈现,那么这种方法将不起作用。转到下一个选项。

You can simply build your app and deploy it to a static S3 website. This option, works if you use microservices architecture to separate your API from your react app.

您可以简单地构建应用程序并将其部署到静态S3网站。如果您使用微服务体系结构将API与react应用程序分离,则可以使用此选项。

Creating a static website in S3 is really simple:

在S3中创建一个静态网站非常简单:

  1. Create a bucket in S3 with the exact name of the website. Example: blog.stackoverflow.com.
  2. 在S3中创建一个包含网站名称的bucket。例如:blog.stackoverflow.com。
  3. Enable static hosting
  4. 使静态主机
  5. Create an A record in Route 53 and connect it to the bucket you created.
  6. 在53路径中创建一条记录,并将其连接到您创建的bucket。

For more information check AWS handy documentation.

有关更多信息,请参阅AWS便利的文档。

Deploying a NodeJS application into EC2

You can launch different EC2 instances for every microservice. (API, React app, etc.) You need to use a process manager such as PM2 to ensure your app is running smoothly.

您可以为每个微服务启动不同的EC2实例。(API、React app等)需要使用PM2等流程管理器来确保应用程序运行顺畅。

Bonus: Use Sentry for error-handling

Ideally, you should have unit tests to prevent shipping buggy code to the production. But the world is imperfect, and it is good to receive any potential bugs that happen on the client. Enter Sentry

理想情况下,您应该进行单元测试,以防止将错误代码交付到产品中。但是这个世界是不完美的,最好是接受客户身上发生的任何潜在的错误。进入哨兵


分享到: