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

【问题标题】：Automate deployment of static website files to S3 after the build构建后自动将静态网站文件部署到 S3
【发布时间】：2019-02-06 13:21:46
【问题描述】：

我有一个部署在 S3 上并可公开访问的 react 应用程序 (SPA)。每次构建后，我必须手动将 index.html 和其他 静态资产 上传到 S3。有什么方法可以自动化这个过程吗？

我对CD（持续部署）到S3进行了详尽的搜索，这里有一个SO question 大致相同。

我正在汇总我详尽研究的所有信息。我写了以下答案，其中包含实现此目的的各种方法。

【问题讨论】：

标签： amazon-web-services reactjs amazon-s3 automation

【解决方案1】：

有很多方法可以实现 S3 部署的自动化。以下是我收集的内容：

1. AWS SNS 和 Lambda：

这个过程很有用，如果你想在github push上触发任何AWS服务。那么，这里是过程：

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

这种方法的缺点是克隆大型存储库需要时间，并且 Lambda 每秒计费。因此，对于大型 repo 而言，这可能会变得昂贵。

2。特拉维斯：

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

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

缺点是，我找不到将目录与 repo 隔离并单独上传该特定目录的方法。

3. AWS cli：

这是将文件上传到 S3 的最便宜和最好的方式。我使用了这种方法。我从这个medium post 得到了这个信息。

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

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

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

这个答案是基于我的观点。如果有任何不正确或我遗漏了什么，请随时发表评论，我会将其添加到答案中。

【讨论】：

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

【解决方案2】：

我喜欢 @lakshman's answer，但它不适用于私有/本地 bitbucket 存储库以及我们在商业世界中遇到的其他一些场景。

对 bitbucket 友好（以及更多）的类似想法是将代码克隆到 CodeCommit 中，然后触发包含 CodeBuild 步骤的 CodePipeline。

CodeBuild 可以推送到 S3。作为奖励，CodeBuild 可以运行测试并根据需要包含其他构建步骤（迁移等）。 Bitbucket 具有允许 CodeCommit 克隆 Bitbucket 存储库的镜像挂钩。我认为this 是镜像挂钩链接，但请仔细检查自己，因为有多个 Bitbucket 插件/扩展，包括名称中的字符串镜像。

This SO question 讨论了不同的 Bitbucket 钩子，还讨论了克隆 GitLab 和 JGit。同样，一旦代码在 CodeCommit 中，CodePipeline 就可以从那里获取它。

除了使用 Bitbucket 挂钩，您还可以使用 Bitbucket pipeline。

【讨论】：