AWS技术问询：如何实现GitHub推送触发的静态网站AWS持续部署

我之前帮不少开发者搭过类似的自动部署流程，这里分享两个亲测稳定的方案，你可以根据自己的项目情况选：

方案一：GitHub Actions + S3（最轻量化） #

这是我个人最喜欢的方案，配置简单，不需要额外的AWS服务，完全靠GitHub的CI/CD能力搞定。

步骤分解： #

1. 准备AWS侧资源

   • 创建一个S3桶，开启静态网站托管功能（桶配置里找「静态网站托管」选项，设置索引文档和错误文档）。
   • 给桶设置合适的权限：如果是公开访问的静态站，要在桶策略里添加允许所有人读取的规则；如果用CloudFront做CDN，也可以把桶设置为私有，只允许CloudFront访问。
   • 创建一个IAM用户，给它分配仅操作目标S3桶的权限（别用管理员权限！），比如自定义一个权限策略，只允许s3:PutObject、s3:DeleteObject、s3:ListBucket这几个动作在你的目标桶上。保存好这个用户的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY。

2. 配置GitHub仓库密钥

   • 打开你的GitHub仓库，进入「Settings」→「Secrets and variables」→「Actions」。
   • 新建两个仓库密钥：AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY，值就是刚才IAM用户的密钥。

3. 编写GitHub Actions工作流

   • 在仓库根目录创建.github/workflows/deploy.yml文件，内容示例：

     name: Deploy to AWS S3
     on:
       push:
         branches: [ master ]  # 指定触发分支
     jobs:
       deploy:
         runs-on: ubuntu-latest
         steps:
           - name: Checkout code
             uses: actions/checkout@v4
           
           # 如果你的项目需要构建（比如React/Vue），添加下面的构建步骤
           - name: Install dependencies
             run: npm install
           - name: Build project
             run: npm run build
           
           - name: Configure AWS credentials
             uses: aws-actions/configure-aws-credentials@v4
             with:
               aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
               aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
               aws-region: us-east-1  # 替换成你的桶所在区域
           
           - name: Sync files to S3
             run: aws s3 sync ./dist s3://your-bucket-name --delete  # ./dist是构建产物目录，替换成你的实际路径；your-bucket-name替换成桶名
     

   • 提交这个文件到master分支，之后每次推送代码，GitHub就会自动执行这个工作流，把内容同步到S3。

方案二：AWS CodePipeline（AWS生态集成） #

如果你已经在使用AWS的其他服务，用CodePipeline会更贴合你的现有架构，不需要依赖GitHub的CI/CD。

步骤分解： #

1. 前置准备

   • 同样先创建好S3静态网站桶，配置好权限。
   • 创建一个IAM角色，给它分配CodePipeline所需的权限：包括访问GitHub的权限、操作S3的权限，以及如果需要构建的话，还要有访问CodeBuild的权限。

2. 创建CodePipeline管道

   • 登录AWS控制台，打开CodePipeline服务，点击「创建管道」。
   • 源阶段：选择GitHub作为源提供商，连接你的GitHub账号，选择目标仓库和master分支，启用Webhook（这样GitHub推送时会自动触发管道）。
   • 构建阶段：如果你的项目不需要构建（纯静态HTML/CSS/JS），可以直接跳过这一步；如果需要构建，选择CodeBuild，创建一个构建项目（比如配置Node环境执行npm run build）。
   • 部署阶段：选择S3作为部署提供商，选择目标桶，设置为「替换桶中的所有文件」。

3. 测试触发

   • 手动触发一次管道，确认能正常从GitHub拉取代码、（构建）、部署到S3。之后每次推送master分支，CodePipeline都会自动执行部署。

一些额外的优化建议 #

• 权限最小化：不管用哪种方案，都不要给IAM角色/用户超过必要的权限，比如只允许操作指定的S3桶，避免安全风险。
• CDN缓存失效：如果用CloudFront做加速，部署后记得触发缓存失效，否则用户可能看到旧内容。可以在GitHub Actions里添加调用CloudFront Invalid API的步骤，或者在CodePipeline里加一个Lambda函数来自动完成。
• 测试环境：如果需要，可以给develop分支也配置一套自动部署到测试桶的流程，避免直接影响生产环境。

内容的提问来源于stack exchange，提问作者DaveTheAl