amazon-web-services - 构建后自动将静态网站文件部署到 S3

Question

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

我对CD(持续部署)到S3进行了详尽的搜索，这里是SO question差不多。

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

Answer 1

有很多方法可以实现S3 部署的自动化。以下是我收集的东西:

<强>1。 AWS SNS 和 Lambda:

如果您想触发 github 上的任何 AWS 服务推送，此过程很有用。因此，过程如下:

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

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

<强>2。特拉维斯:

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

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

缺点是，我找不到一种方法将目录与存储库隔离并单独上传该特定目录。

<强>3。 AWS CLI:

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

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

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

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

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