AWS持续集成教程二：使用Github Actions从Github自动部署React项目到S3

在进行开发的时候，CI/CD的好处就不必多说了。下面就介绍一下如何使用Github Actions自动部署React应用到AWS S3。

AWS持续集成教程-Github Actions

创建相应的AWS资源

创建S3 bucket

创建bucket

创建一个名字为“lcoding-react-s3-demo”的bucket，同时注意

• 取消”Block all public access”复选框。
• Versioning：Enable
• Server-side encryption: Enable

单击“Create Bucket”后创建S3 bucket。

激活bucket作为静态网站主机

然后进入这个bucket，并：

• 在Properties中，Enable “Static website hosting”，并将index document和Error document都设置为index.html（如果创建了404.html，则设为该文件）。

设定访问权限

选择Permissions => Bucket Policy并增加如下的Policy：

json

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::lcoding-react-s3-demo/*"
    }
  ]
}

创建React应用

创建React APP

使用如下命令创建一个React应用程序：

bash

npx create-react-app gh-actions-demo

定义Github Actions将要使用的部署流程

接下来添加文件.github/workflows/workflow.yml:

yaml

name: React to S3 CI

on:
  push:
    branches:
      - "master"

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
    
    steps:
      - uses: actions/checkout@v1
      - run: npm install
      - run: npm run build
      - run: npm test
      - uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
          SOURCE_DIR: 'build'  # 可选项: 默认为整个Repo

添加相应的Github Actions环境变量

进入到Repo的Settings => Secrets，并添加如下环境变量：

AWS持续集成教程-Github Actions

测试

这时，任何新提交到GH Repo的代码都会触发Github Actions自动构建并发布React APP到S3 bucket上。

针对不同的branch运行不同的部署流程

在同一个workflow.yml中

yaml

steps:
  - uses: actions/checkout@v1
  - run: npm install
  - run: npm run build
  - run: npm test

  - name: Deploy staging
    if: github.ref == 'refs/heads/develop'
    uses: jakejarvis/s3-sync-action@master
    with:
      args: --acl public-read --follow-symlinks --delete
    env:
      AWS_S3_BUCKET: ${{ secrets.STAGING_AWS_S3_BUCKET }}
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: ${{ secrets.AWS_REGION }}
      SOURCE_DIR: 'build'  # 可选项: 默认为整个Repo

  - name: Deploy production
    if: github.ref == 'refs/heads/master'
    uses: jakejarvis/s3-sync-action@master
    with:
      args: --acl public-read --follow-symlinks --delete
    env:
      AWS_S3_BUCKET: ${{ secrets.PRODUCTION_AWS_S3_BUCKET }}
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: ${{ secrets.AWS_REGION }}
      SOURCE_DIR: 'build'  # 可选项: 默认为整个Repo      

在不同的yml文件中

针对不同的branch，可以创建不同的yml:

• workflow-prod.yml
• workflow-staging.yml
• workflow-dev.yml