如何使用GitHub Workflow将CI生成的artifact部署到AWS S3

你现有配置的核心问题是CD流程缺失了CI构建产物拉取步骤：

• workflow_run事件触发的工作流，运行环境默认只会拉取仓库对应分支的源码，不会自动携带上游CI流程生成的任何文件
• 当前CD流程直接执行S3同步时，读取的www目录是仓库源码内的原始文件，完全没有用到CI构建后上传的产物，和预期部署逻辑不符
• 额外风险：当前CD触发条件是CI工作流completed，无论CI运行成功、失败、取消都会触发部署，容易把异常状态的内容同步到生产存储桶

CI工作流无需调整 #

你现有CI配置已经正确完成依赖安装、项目构建、产物打包上传的全流程，保留原有配置即可：

name: ci

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: 12.8
        cache: 'npm'
    - name: npm dependencies
      run: npm install     
    - name: run
      run: npm run build --if-present
    - name: Archive production artifacts
      uses: actions/upload-artifact@v3
      with:
        name: dist-without-markdown
        path: |
          www

调整CD工作流 #

需要补充3个关键逻辑：

• 增加运行前置判断，仅当CI工作流运行成功时才执行部署
• 拉取源码后增加CI产物下载步骤，直接解压到仓库根目录覆盖原有www文件夹
• 将指向master分支的不稳定版actions/checkout@master替换为稳定的v3版本

修正后的CD配置如下：

name: cd

on:
  workflow_run:
    workflows: ["ci"]
    types:
      - completed

jobs:
  deploy:
    runs-on: ubuntu-latest
    # 仅CI运行成功时触发部署
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
    - uses: actions/checkout@v3
    # 下载CI阶段上传的构建产物，解压到仓库根目录自动覆盖www文件夹
    - name: Download CI build artifact
      uses: actions/download-artifact@v3
      with:
        name: dist-without-markdown
        path: ./
        github-token: ${{ secrets.GITHUB_TOKEN }}
        run-id: ${{ github.event.workflow_run.id }}
    - uses: jakejarvis/s3-sync-action@master
      with:
        args: --acl public-read --follow-symlinks --delete
      env:
        AWS_S3_BUCKET: udagram-frontend-sm
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        SOURCE_DIR: 'www'

配置生效后完整运行逻辑为：

1. main分支收到push、PR事件时触发CI工作流，完成依赖安装、项目构建，将构建后的www目录打包为artifact上传到GitHub
2. CI运行结束后如果状态为成功，自动触发CD工作流
3. CD运行时先拉取对应分支的仓库源码，再下载CI上传的构建产物，直接解压到仓库根目录，覆盖源码中原有的www文件夹
4. 最后将www目录下的所有构建产物同步到指定S3存储桶，完成静态网站部署

注意：确保你存储在GitHub Secrets中的AWS密钥对拥有对应S3桶的读写、配置权限，否则同步步骤会报错。

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