在管理缓存的同时在CloudFront上的S3上部署React应用的步骤？

Question

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

Answer 1

为什么这样

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

基本概念

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

• CloudFront前端 -对于自定义域，SSL流量将通过CloudFront而不是S3（不允许使用自定义域的SSL）通过
• 一对多 -一个S3存储桶可以容纳许多部署（例如测试，生产）。我为每个部署设置了专用的CloudFront发行版，该发行版指向相同的存储桶但前缀不同（例如，部署/测试，部署/生产）
• 可以避免跨域API问题 -有一种方法可以将CloudFront用于S3中的静态文件和动态API，它们都在同一个域中（请参阅下文）
• 压缩 -应始终在CloudFront上启用压缩
• 浏览器缓存 -CRA构建将使用哈希键创建块文件。这些可以长时间缓存在浏览器中。但是没有哈希键的文件index.html应设置为不缓存。可以通过S3设置这些缓存属性。

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

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

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

要通过CloudFront启用API：

1. 将API服务器添加为源服务器，仅在AWS内添加HTTP
2. 添加新行为，/api/*路径模式，仅HTTPS查看器策略，所有HTTP方法（除非仅具有GET），ALL用于 基于选定请求标头的缓存 ，启用压缩对象和查询字符串的 全部转发
3. CloudFront不应缓存任何内容（除非您可以这样做）

复制到S3

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

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

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

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

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

1. 将任何新文件上传到S3，将Etag验证为MD5
2. 删除任何旧文件
3. （可选）维护早期构建中的旧precache-manifest文件（下载和解析旧文件）
4. 设置不同文件的HTTP缓存参数（即，具有哈希键的缓存文件，不包含常见文件的缓存）
5. 清除CloudFront分布（即无效请求）

即使您不使用它，它也可以帮助您部署系统。

在CloudFront中启用React Router

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

1. 转到AWS控制台中的CloudFront发行版
2. 单击适当的CloudFront发行版
3. 单击错误页面选项卡
4. 添加错误响应403: Forbidden并404: Not Found指向 /index.htmlHTTP响应200

测试HTTP标头

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

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

同样，您可以从CloudFront测试标头：

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

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

curl -H "Accept-Encoding: gzip" -I https://CLOUDFRONT-URL/index.html