reactjs - 在管理缓存的同时在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.com not my.api.com)，因为未修改HTTP请求主机值。

要在CloudFront中启用API:

将您的API服务器添加为源服务器，仅当在AWS

中时才使用HTTP

为查询字符串

添加新行为， /api/*路径模式，仅HTTPS查看器策略，所有HTTP方法(除非只有GET)，基于选定请求头的高速缓存的 ALL，启用压缩对象以及全部转发

CloudFront不应该缓存任何内容(除非您可以执行此操作)

复制到S3

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

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

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

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

我建立了 a python tool，它将:

将所有新文件上传到S3，从而将Etag验证为MD5

删除所有旧文件

(可选)维护早期版本中的旧文件(下载和解析较旧的precache-manifest文件)

设置不同文件的HTTP缓存参数(即，具有哈希键的缓存文件，普通文件不缓存)

清除CloudFront分布(即无效请求)

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

在CloudFront中启用React Router

要在React Router中启用不同的路径，请将 set the the CloudFront error page设为 /index.html(以便所有失败的请求都将到达该位置):

在AWS控制台中转到CloudFront发行版

单击适当的CloudFront发行版

单击错误页面选项卡

添加针对403: Forbidden和404: Not Found指向的错误响应
HTTP响应为/index.html的200

测试HTTP header

如果您的S3存储桶设置为静态网站托管，则可以查看此HTTP header (请注意，CloudFront不需要S3网站托管即可工作):
curl -I http://MY-S3-ENDPOINT/index.html
同样，您可以从CloudFront测试 header :
curl -I https://CLOUDFRONT-URL/index.html
要测试压缩，请将编码接受添加到请求HTTP header 中，例如
curl -H "Accept-Encoding: gzip" -I https://CLOUDFRONT-URL/index.html