在管理缓存的同时在CloudFront上的S3上部署React应用程序的步骤？ [英] Steps to deploy a React app on S3 with CloudFront while managing caching?

问题描述

我需要使用SSL和管理缓存在AWS S3上部署React App。必需的步骤是什么，我可能会遇到什么问题？

I need to deploy a React App on AWS S3 using SSL and managing caching. What are the required steps, and what are some of the problems I might encounter?

推荐答案

为什么这样做？ / strong>

Why do this?

它可以非常快，无服务器并且非常便宜。通过CloudFront全局端点（边缘位置），应用程序可以非常快速且高可靠性地运行。通过设置另一个源来源，CloudFront可以充当API的反向代理，从而消除跨区域（CORS）问题并加快遥远位置的API调用。可以将多个部署上传到单个S3存储桶中。

It can be incredibly fast, "serverless" and very inexpensive. Through the CloudFront global endpoints (edge locations), an application can run very quickly with high reliability. By setting another source origin, CloudFront can act as a reverse proxy to an API, eliminating cross-region (CORS) issues and accelerating API calls in distant locations. Multiple deployments can be uploaded to a single S3 bucket.

基本概念

将Create React App部署到S3 / CloudFront时，需要记住许多概念：

There are a number of concepts to keep in mind when deploying a Create React App to S3/CloudFront:

• CloudFront前端-对于自定义域，SSL流量将通过CloudFront而不是S3（这不允许自定义域使用SSL）


• 一对多 -单个S3存储桶可以容纳许多部署（例如测试，生产）。我为每个部署设置了专用的CloudFront发行版，该发行版指向相同的存储桶但前缀不同（例如，部署/测试，部署/生产）


• 跨域API问题可能是避免-有一种方法可以将CloudFront用于S3中的静态文件和动态API，它们都在同一域中（见下文）


• Compression -压缩应始终在CloudFront上启用


• 浏览器缓存-CRA构建将使用哈希键创建块文件。这些可以长时间保存在浏览器中。但是应将没有哈希键的文件（如 index.html ）设置为不缓存。可以通过S3设置这些缓存属性。

• CloudFront front end - for a custom domain, SSL traffic will go through CloudFront and not S3 (which does not permit SSL with a custom domain)
• One to many - a single S3 bucket can hold many deployments (e.g. testing, production). I set up each deployment with a dedicated CloudFront distribution pointing to the same bucket but a different prefix (e.g. deployments/testing, deployments/production)
• Cross-domain API issues can be avoided - there is a way to use CloudFront for both static files in S3 and a dynamic API, all in the same domain (see below)
• Compression - compression should always be enabled on CloudFront
• Browser caching - CRA build will create chunk files with hash keys. These can be cached in the browser for long periods. But files without hash keys like index.html should be set for no-caching. These caching attributes can set through S3.

跨域API问题（CORS）-如何避免

每个CloudFront发行版可以有多个来源。一个来源应设置为S3，而另一来源可以设置为API服务器或负载平衡器。如果API服务器在AWS系统中，则CloudFront可以安全地使用非SSL（端口80）作为代理服务器进行通信。

Each CloudFront distribution can have multiple origins. One origin should be set to S3, while the other can be set to an API server or load balancer. If the API server is within the AWS system, CloudFront can safely use non-SSL (port 80) to communicate as a proxy server.

要使用端口80，必须将API服务器配置为响应非安全流量（如果流量仅为端口80，则不需要SSL证书）。 Apache VirtualHost将使用CloudFront实例的主机名 not API服务器主机名（例如 my.react-app.com 而不是 my.api.com ），因为未修改HTTP请求主机值。

To use port 80, the API server must be configured to respond to the non-secure traffic (if traffic is only port 80, no SSL certificate is required). The Apache VirtualHost will use the hostname of CloudFront instance not the API server hostname (e.g. my.react-app.com not my.api.com) because the HTTP request Host value is not modified.

要通过CloudFront启用API：

To enable the API with CloudFront:

1. 将您的API服务器添加为源服务器，仅当在AWS内时才使用HTTP


2. 添加新行为， / api / * 路径模式，仅HTTPS查看器策略，所有HTTP方法（除非仅具有GET）， ALL >基于选定的请求标头进行缓存，启用压缩对象并为查询字符串全部转发


3. CloudFront不应缓存任何内容（除非您可以做到）

1. Add your API server as an origin, HTTP only if within AWS
2. Add a new behavior, /api/* path pattern, HTTPS only viewer policy, all HTTP methods (unless you have GET only), ALL for Cache Based on Selected Request Headers, Compress Objects enabled, and Forward All for the query strings
3. Nothing should be cached by CloudFront (unless you can do this)

复制到S3

将构建系统复制到S3的简单方法是：

A simple way to copy your build system to S3 would be:

aws s3 sync . s3://MY-S3-BUCKET/ --quiet

这非常有限。它不会轻松管理浏览器缓存。旧文件可以删除（-delete 选项）或维护（默认）；当然，对于较旧的版本，该工具与应维护的CRA文件无关，因此垃圾收集将非常复杂。

This is quite limited. It will not manage browser caching easily. Old files can be removed (--delete option) or maintained (default); of course this tool is agnostic to which CRA files should be maintained for older versions, so garbage collection will be complicated.

Python用于将CRA部署到S3 / CloudFront的工具

我构建了一个python工具，它将：

1. 将任何新文件上传到S3，从而验证Etag到MD5


2. 删除所有旧文件


3. 可以选择维护早期构建中的旧文件（下载并解析早期的 precache-manifest 文件）


4. 设置不同文件的HTTP缓存参数（例如，具有哈希键的缓存文件，普通文件不缓存）


5. 清除CloudFront分发（即无效请求）

1. upload any new files to S3, validating the Etag to MD5
2. delete any old files
3. optionally maintain old files that were part of earlier builds (downloading and parsing older precache-manifest files)
4. set the HTTP cache parameters for different files (i.e. cache files with hash keys, no cache for common files)
5. clear the CloudFront distribution (i.e. invalidation request)

即使您不使用它，也可能会有所帮助

Even if you don't use this, it may help you out with your deployment system.

在CloudFront中启用React Router

要在React Router中启用不同的路径，请将CloudFront错误页面设置为 /index.html （这样所有失败的请求都会在那里）：

To enable different paths in React Router, set the the CloudFront error page to be /index.html (so that all failed requests will go there):

1. 转到AWS控制台中的CloudFront发行版


2. 单击适当的CloudFront发行版


3. 单击错误页面选项卡


4. 为 403：禁止和<$添加错误响应c $ c> 404：未找到，指向
   /index.html ，HTTP响应为 200

1. Go to CloudFront distributions in the AWS console
2. Click on the appropriate CloudFront distribution
3. Click on Error Pages tab
4. Add error responses for 403: Forbidden and 404: Not Found pointing /index.html with HTTP response of 200

测试HTTP标头

如果您的S3存储桶设置为静态网站托管，则可以查看此HTTP标头（请注意，CloudFront不需要S3网站托管才能工作）：

You can view this HTTP header if your S3 bucket is set for static website hosting (note S3 website hosting is not required for CloudFront to work):

curl -I http：//MY-S3-ENDPOINT/index.html

类似您可以从CloudFront测试标头：

Likewise you can test the header from CloudFront:

curl -I https：//CLOUDFRONT-URL/index.html

要测试压缩，请在请求HTTP标头中添加编码接受，例如

To test compression, add encoding acceptance to the request HTTP header, e.g.

curl -H接受编码：gzip -I https：//CLOUDFRONT-URL/index.html

这篇关于在管理缓存的同时在CloudFront上的S3上部署React应用程序的步骤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！