javascript - 如何在AWS上部署静态js应用程序？

Question

我在 AWS 上部署了其余服务。现在我想部署一个前端。这是一个 ReactJS 应用程序。 build 会生成一个包含 html 和 asset 的文件夹。

现在我想在 AWS 上托管这个应用程序，并让它与我的休息服务对话。 aws 是否为此提供了一些专用解决方案(同一域下的静态托管以避免跨源问题)或者我必须构建一些自定义的解决方案？例如将文件放在 s3 上或与我的其余服务捆绑在一起？

Answer 1

您可以使用 S3 和 CloudFront 部署和托管您的 React 应用程序:

1. 为您的应用创建 S3 存储桶(例如 myapp.example.com)。暂时不要向您的存储桶分配任何公共(public)读取访问权限。
2. 将 React ./build 目录的内容复制到 S3 存储桶。
3. 使用指向您的 S3 存储桶的 S3 源创建 CloudFront Web 分配。将备用域名 (CNAME) 设置为 myapp.example.com。
4. 在源设置下 > 将限制存储桶访问设置为是并创建新的源访问身份。 (不要让 CloudFront 授予您存储桶的读取权限。您将在接下来的步骤中手动执行此操作)
5. 在错误页面下，为 403 Forbidden 添加新的错误响应，并将自定义错误响应设置为是，响应页面路径为/index.html，HTTP响应代码为200 OK。
6. 使用您的 DNS 提供商，为 myapp.example.com 添加一条 CNAME 记录，该记录指向您的 CloudFront 分配的域名(例如，XXXXXXXXXXXXX.cloudfront。网)。 注意:这可以通过 Route 53 中的 ALIAS A 主机记录来完成。

7. 将以下存储桶策略添加到 S3 中的应用存储桶(其中 XXXXXXXXXXXXX 是您在上述步骤 4 中创建的源访问身份 ID)。该值可以在 CloudFront 主页的安全下找到左侧边栏):

   {
       "Version": "2008-10-17",
       "Id": "Policy1415003215468",
       "Statement": [
           {
               "Sid": "Stmt1415003056675",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXX"
               },
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::myapp.example.com/*"
           }
       ]
   }
   

   这将拒绝使用直接 S3 URL 访问您的应用程序。它将仅允许通过 CloudFront 进行访问。

8. 将 REST API 配置中的 Access-Control-Allow-Origin 设置为 http://myapp.example.com。

   启用并强制执行 SSL

9. 在 CloudFront 的分发设置中，选择您的自定义 SSL 证书。

10. 在行为下，将默认行为的查看器协议(protocol)策略设置为将 HTTP 重定向到 HTTPS。
11. 将 REST API 配置中的 Access-Control-Allow-Origin 更改为 https://myapp.example.com。