使用 Github Action 实现应用的 CI/CD

前言

刚工作那会，想要发布项目，基本流程都是：本地构建打包 ---> 上传到服务器 ----> 重启服务,

殊不知，这其实浪费了大量开发者的时间在部署项目上，并且很容易出错。

到后来，自己写了个脚本，实现了 自动打包上传到服务器, 还是不够优雅。

Github Action

GitHub Actions 是一个持续集成和持续交付 (CI/CD) 平台，可用于自动执行构建、测试和部署管道。

也就是说，通过github actions 我们只要推送代码到部署分支，即可触发部署，自动发布等这些操作。

相关概念就不赘述了，直接实战～

部署一个前端项目到服务器

1. 在github, Settings--->Seveloper settings ---> Personal access tokens

生成一个专属部署的token, 勾选repo, workflow即可

复制好生成的token

2. 配置Action中secret的环境变量，

• 配置 token、username、useremail 等，可以在deploy.yml中使用这些环境变量

3. 在项目根目录新建.github/workflows/deploy.yml

可以根据自己项目的情况做出相应配置的调整

# 建立一个名为deploy的工作流
name: deploy

# 监听 master上的push事件
on:
  push:
    branches: [ master ]
    
# 开始任务
jobs:
  # 建立一个名为 build 的job
  build:
    # 在最新的乌班图环境进行工作
    runs-on: ubuntu-latest

    # 开始设置构建步骤
    steps:
    # 这是github官方的一个action，用于clone该仓库的源码到工作流中，
    - uses: actions/checkout@v2

    # 命名这个步骤为构建Build
    - name: Build
      // 运行 安装和打包任务
      run: npm install && npm run build

    # 命名这个任务为发布Deploy
    - name: Deploy
      # 因为构建之后，需要把代码上传到服务器上，所以需要连接到ssh，并且做一个拷贝操作
      uses: cross-the-world/scp-pipeline@master
      env:
        WELCOME: "ssh scp ssh pipelines"
        LASTSSH: "Doing something after copying"
      with:
        # 在项目settings-->Secrets---->Actions----->New repository secret
        host: ${{ secrets.HOST }}
        user: ${{ secrets.USERNAME }}
        pass: ${{ secrets.PASSWORD }}
        connect_timeout: 10s
        # 打包后的目录
        local: './build/*'
        # 服务器存放前端包的地址
        remote: /usr/share/nginx/html
        

接下来只需要在master上提交更改，即可自动触发部署操作

部署一个前端项目到github pages

1. 修改.github/workflows/deploy.yml

name: deploy

on:
  push:
    branches: [master] # master 分支有 push 时触发
    paths-ignore:   # 下列文件的变更不触发部署，可以自行添加
      - README.md

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:

      # 下载源码
      # 这一步就是检出你的仓库并下载里面的代码到runner中,actions/checkout@v2是官方自己造的轮子，直接拿来用就行
      - name: Checkout
        uses: actions/checkout@v2

      # 打包构建
      - name: Build
        uses: actions/setup-node@master
        with:
          node-version: '16.x'
      - run: npm install # 安装依赖
      - run: npm run build # 打包

      # 部署到 GitHub pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./build # 部署打包后的 build 目录
          github_token: ${{ secrets.DEPLOY_MY_WEBSITE }} # secret 名
          user_name: ${{ secrets.USER_NAME }}
          user_email: ${{ secrets.USER_EMAIL }}
          commit_message: 自动部署 # 部署时的 git 提交信息，自由填写

2. 在项目settings中修改部署分支即可

Reference

Github Action: https://docs.github.com/cn/actions/learn-github-actions

Github pages: https://docs.github.com/cn/pages/quickstart

github code link