在 AWS 上部署单页应用程序的简单自动化方式

我多次经历过使用 S3 和 Cloudfront 部署单页应用程序的繁琐过程，但是，有一种更简单的方法。另外，您将获得一个 CI/CD 管道。

仅将 S3 与 Cloudfront 一起使用的缺点

这是一个手动过程 使用常规 AWS 控制台。即使您知道如何编写 Cloudformation 模板，我推荐的解决方案也容易得多。此外，您需要了解很多配置知识才能开始使用，例如确保您的 S3 存储桶具有正确的权限。这是一次很棒的学习体验，但是如果您想在今天快速轻松地部署您的应用程序，请继续阅读。

您需要解决的一个常见问题是当用户直接转到根主页以外的路径时（example.com/about，而不是 example.com/）。 用户真正在做的是请求不在您的 S3 存储桶中的文件，您会收到 403 Forbidden / Access Denied 错误。

Common error if a route is requested other than the root.

由于它是一个单页应用程序，所有请求都需要重写为'/index.html'。 SPA 路由器从那里读取用户最初导航到的路径名并呈现适当的内容。我们通常使用 Nginx 之类的 Web 服务器重写或代理请求。由于我们没有使用 Web 服务器，因此可以通过多种方式将 S3 与 Cloudfront 结合使用，但使用 AWS Amplify，有一个更简单的单线解决方案。

还， 如果您想在不设置 AWS CodePipeline 的情况下更新应用程序，则必须手动将更新的文件上传到 S3 并创建 Cloudfront 失效以清除缓存。 这是手动的并且容易出错。

使用 AWS Amplify 托管进行部署

使用 Amplify，您将获得 CI/CD 管道、带有 CDN (S3 + Cloudfront) 的静态托管，以及将请求重写到根 index.html 文件的简单方法，因此 SPA 路由将按预期工作。

使用控制台转到 AWS Amplify，单击新建应用程序，然后从下拉列表中选择主机 Web 应用程序。

单击您的 Git 提供程序后，单击屏幕以允许 AWS Amplify 访问。

你现在可以 选择存储库和分支 .这将是 Amplify 将从中提取的分支。此外，当您将来向此分支提交或合并拉取请求时，Amplify 将部署更新。

接下来，由于 Amplify 将动态构建我们的项目，我们需要 配置构建设置 .它确实会尝试智能地自动填充设置，但是，请确保：

• 构建命令是正确的
• 工件 baseDirectory 是正确的（您的构建文件夹名称）

单击下一步，然后单击保存并部署。

等待 CI/CD 管道完成并在自动生成的 URL 上查看您的站点 .如果您需要使用 SSL 证书设置自定义域，请前往应用程序设置菜单中的域管理。

单击添加域，从那里开始非常简单直观。

现在，要确保所有 URL 路径都路由到 index.html， 导航到重写和重定向 在应用程序设置菜单中。

单击添加规则并输入以下内容 ：
源地址：</^[.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
目标地址：/index.html
类型：200（重写）

点击保存 它应该看起来像这样。

全部完成！您部署的单页应用程序应该按预期工作。

要查看定价，请查看此页面： https://aws.amazon.com/amplify/pricing

结论

利用 AWS Amplify 托管是在 AWS 上部署单页应用程序的最快方式。当您将来对应用程序进行更新时，它还将为您节省大量手动工作。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39882/48202921