问题描述
我需要使用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 ，HTTP响应为 200 - Go to CloudFront distributions in the AWS console
- Click on the appropriate CloudFront distribution
- Click on Error Pages tab
- 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应用程序的步骤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！