[开发工具]Github Actions 实现 CICD

背景：

要试验一下 OAuth2 的各个方式，所以购买了服务器，项目本地 build 之后再通过 scp 上传至服务器比较繁琐，索性摸索了一下 github acitons ，完成前端自动化部署（也可使用 Web Hook）

步骤

1. 阅读 github actions 官方文档
2. 初始化 umi 项目
3. 根目录建立 .github/workflow 文件夹，里面创建 yml 格式的文件，文件名可自定义

name: Deploy
# 监听 push 操做   main 分支
on:
  push:
    branches:
      - main

jobs: 
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main
      - name: use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: npm install and build
        run: |
          npm install
          npm run build
        env:
          CI: true
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.0.7
        env:
            # 本地.ssh文件下的私钥id_rsa，存在secrets的TOKEN中
            SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }} 
            # 复制操作的参数。"-avzr --delete"意味部署时清空服务器目标目录下的文件
            ARGS: "-avzr --delete" 
            # 源目录，相对于$GITHUB_WORKSPACE根目录的路径
            SOURCE: "dist/*" 
            # 服务器域名
            REMOTE_HOST: ${{ secrets.SERVER_HOST }} 
            # 腾讯云默认用户名为root
            REMOTE_USER:  ${{ secrets.SERVER_USERNAME }} 
            # 目标目录
            TARGET: "/www/wwwroot/website" 

该 yaml 文件大量使用了 uses 插件，也是 github actions 的核心了，有社区写好的插件 拿来吧你

我们可以看到 yml 文件中有三个变量
secrets.DEPLOY_KEY
secrets.SERVER_HOST
secrets.SERVER_USERNAME
为了安全隐私，所以这些放在 github screts 里面管理，配置如下

当我们 push 到 main 分支的时候，会触发 Actions

然后我们访问自己的网站即可看见 push 的目标代码