自动化构建后将静态网站文件部署到S3

Question

我有一个使用React构建的应用程序(SPA)，已经部署在S3上并且可以公开访问。每次构建之后，我都要手动将index.html和其他静态资源上传到S3上。是否有自动化此过程的方法？

我进行了详尽的搜索，寻找关于将文件连续部署到S3的方式，这里有一个关于同样问题的SO问题。

我正在汇总我详尽调研中搜集到的所有信息，并编写以下答案，其中包含多种实现该目标的方法。

- Lakshman Diwaakar

Answer 1

有许多方法可以自动化 S3 部署。以下是我收集到的内容： 1. 使用 AWS SNS 和 Lambda: 如果你想在 Github 推送时触发任何 AWS 服务，则此过程非常有用。以下是该过程：

1. Github 推送会触发一条消息到 SNS。
2. 订阅了 SNS 主题的 Lambda 被调用。
3. 在 Lambda 中，我克隆 Github 存储库。
4. 使用 AWS 的 S3 SDK 将 构建或 dist 目录上传到您的 S3 存储桶中。以下是上述过程的高级架构：

这种方法的缺点是，克隆大型仓库需要时间，而 Lambdas 按秒计费。因此，对于大型仓库来说，这可能变得很昂贵。

2. Travis：

Travis 以其 CI（持续集成）库而闻名。一个 .travis.yml 对于集成过程至关重要。

如果你想在构建后进行一些测试，然后在成功后将文件上传到 S3。那么这个方法将是最好的方式。Travis 对于开源项目是免费的。

缺点是，我找不到一种方法来从仓库中隔离出一个目录并仅上传该特定目录。

3. AWS cli：

这是将文件上传到 S3 的最便宜和最佳方法。我使用了这种方法。我从这篇medium post文章中得到了这些信息。

通常，在 react 应用程序中，构建脚本是由 npm 或 yarn 编写为 package.json 中的脚本触发的。以下是将文件上传到 S3 的命令：

aws s3 sync build/ s3://<bucket-name>

我将此脚本添加为package.json中的构建脚本。这非常方便，因此自动化了将文件上传到S3的手动过程。

此答案基于我的观点。如果有任何不正确的地方或者我漏掉了什么，请随时评论，我会添加到答案中。

- Lakshman Diwaakar

---

同意使用AWS CLI方法。Lambda函数最多在300秒后超时...因此，对于涉及较大资产的网站也不是最佳选择。 - John

Answer 2

我喜欢@lakshman's answer，但它无法用于私有/本地的比特桶存储库以及商业世界中遇到的其他一些情况。

一个类似的想法是将代码克隆到CodeCommit中，然后触发包括CodeBuild步骤的CodePipeline。

CodeBuild可以推送到S3。作为奖励，CodeBuild可以运行测试并包括其他必要的构建步骤（迁移等）。Bitbucket具有镜像钩子，允许CodeCommit克隆Bitbucket存储库。我认为this是镜像钩子链接，但请自行确认，因为有多个带有“mirror”字符串的Bitbucket插件/扩展名。 这个SO问题讨论了不同的Bitbucket钩子，还讨论了克隆GitLab和JGit。同样，一旦代码在CodeCommit中，则CodePipeline可以接管。

您可以使用Bitbucket pipeline来代替使用Bitbucket钩子。

- John Vandivier

Answer 3

非常有帮助。我对上述内容进行了轻微修改，以使我的文件夹与文件夹的内容同步。后续调用只进行差异比较。

在根目录下，我输入了以下命令：

aws s3 sync ./ s3://bucket-name

- user3654139