我需要使用SSL和管理缓存在AWS S3上部署React App。什么是必需的步骤,我可能会遇到哪些问题?
为什么这样
它可以非常快,“无服务器”并且非常便宜。通过CloudFront全局端点(边缘位置),应用程序可以非常快速且高可靠性地运行。通过设置另一个源来源,CloudFront可以充当API的反向代理,从而消除跨区域(CORS)问题并加快遥远位置的API调用。可以将多个部署上载到单个S3存储桶。
基本概念
将Create React App部署到S3 / CloudFront时,需要记住许多概念:
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/*
路径模式,仅HTTPS查看器策略,所有HTTP方法(除非仅具有GET),ALL
用于 基于选定请求标头的缓存 ,启用压缩对象和查询字符串的 全部转发复制到S3
将构建系统复制到S3的简单方法是:
aws s3 sync . s3://MY-S3-BUCKET/ --quiet
这是相当有限的。它不会轻松管理浏览器缓存。旧文件可以删除(--delete
可选)或维护(默认);当然,对于较旧的版本,该工具与 应
维护的CRA文件无关,因此垃圾收集将变得很复杂。
用于将CRA部署到S3 / CloudFront的Python工具
我建立了一个python工具,它将:
precache-manifest
文件(下载和解析旧文件)即使您不使用它,它也可以帮助您部署系统。
在CloudFront中启用React Router
要在React
Router中启用不同的路径,请将CloudFront错误页面设置为/index.html
(这样所有失败的请求都将到达该页面):
403: Forbidden
并404: Not Found
指向 /index.html
HTTP响应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