技术分享 | 基于 Amazon Codepipeline 的静态网站自动部署

在现代前端开发中，静态网站（如 HTML、CSS 和 JavaScript 构建的页面）被广泛应用于企业官网、活动页面、文档站点等多种场景。随着项目迭代频率的提高，传统的手动上传部署方式逐渐暴露出效率低、易出错、难以追踪等问题。

针对这些痛点，本文将介绍如何基于 Amazon Codepipeline 构建一个自动化部署流程，实现将静态网站的更新自动发布到 Amazon S3 中，提升发布效率与质量控制能力。通过 Git 提交触发构建、自动同步内容到托管平台。

1.准备 S3 桶，开启静态网站托管，允许公开访问

2.使用 Codepipeline 创建新的流水线，并连接 Github

当我们使用 Github 作为代码源时，并完成授权，就会默认启用 webhook 作为触发器。对于静态网站，可以跳过构建阶段和测试阶段。

到部署阶段，使用 S3 作为部署提供商，并提供 S3 存储桶名称。

创建管道后，推送到 Github 中存储库指定分支中的任意更改都将触发自动部署。

3.成功部署的网站

成功部署后，静态网站将可以通过 S3 存储桶的 URL 访问。

4.测试更改触发自动部署

目前托管的静态网站是这样的：

我们使用 vs code 对此网页进行更改，并提交到存储库的指定分支中。

提交成功，回到 Github 查看 html 文件已经做了修改。

回到 Codepipeline 查看是否有触发自动部署，将新的 html 内容发布到 S3 桶中。

Codepipeline 已经自动执行部署。

刷新部署的网站查看是否已经变成更改后的内容。