如何在 AWS 上部署静态 JS 应用程序?

Question

我在 AWS 上部署了休息服务。 现在我想部署一个前端。 这是一个ReactJS应用程序。 构建生成一个包含HTML和资产的文件夹。

现在，我想在 AWS 上托管此应用程序，并让它与我的 REST 服务通信。 AWS 是否为此提供了一些专用的解决方案(在同一域下进行静态托管以避免跨源问题)，或者我必须构建一些自定义内容？ 比如将文件放在 S3 上或与我的 REST 服务捆绑在一起？

Answer 1

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

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

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. 在">行为"下，将默认行为的查看器协议策略设置为Redirect HTTP to HTTPS。
11. 将 REST API 配置中的Access-Control-Allow-Origin更改为https://myapp.example.com。

Answer 2

您可以使用 AWS CloudFront 和 S3 部署 react 应用程序。目前，没有直接的方法可以设置 CloudFront 来处理 React 路由(如果重新加载页面以提供索引页面)。为此，作为解决方法，您可以使用 CloudFront 中的错误路由来处理此问题。

有关设置 CloudFront 分配和 S3 存储桶的更多详细信息，请参阅在 AWS 中部署 Angular/React 应用程序的文章。您还可以使用文章中的 CloudFormation启动堆栈按钮来预置整个设置。

要设置包括 Restful API 在内的全栈应用程序，请参阅使用 AWS 的全栈无服务器 Web 应用程序。