配置CI/CD自动工作流

fishThing
172 阅读2分钟

创建并配置github page站点

  1. 点击下拉框，选择新建仓库

  1. 输入仓库名字，仓库的命名为 .github.io。这里的user就是你github的用户名。如果你的用户名包含大写字母，注意，也必须将它小写。

  1. 选择创建readme并公开仓库
  2. 创建好仓库之后，打开站点仓库，点击setting
  3. 点击code and automation下面的Pages

  1. 按照下面的选择进行配置并点击save

  1. 至此，github page创建成功

配置github actions(这里以tickTack为例)

  1. 首先，点开tickTack

  1. 点击actions，如果未创建工作流会是呈现如下界面：

  1. 点击set up workflow,点击后会自动创建一个main.yml文件

  1. 将如下内容写入main.yml
name: Build and Deploy
on: # 监听 main 分支上的 push 事件
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false
          
      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install modules
        run: pnpm install
      
      - name: enter editor
        run: cd packages/editor && pnpm run build
        
      # - name: Install and Build # 下载依赖 打包项目
      #   run: pnpm run build

      - name: Set Actions Allow Unsecure Commands
        run: |
           echo "ACTIONS_ALLOW_UNSECURE_COMMANDS=true" >> $GITHUB_ENV

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@3.5.9 # 使用别人写好的 actions
        with:  # 自定义环境变量
          ACCESS_TOKEN: ${{ secrets.TICKTACK }} # VUE_ADMIN_TEMPLATE 是我的 secret 名称，需要替换成你的
          BRANCH: master
          FOLDER: packages/editor/dist
          REPOSITORY_NAME: wjywy/wjywy.github.io # 这是我的 github page 仓库
          TARGET_FOLDER: ticktack # 打包的文件将放到静态服务器 github-actions-demo 目录下

解释：

  • 第五行需要填你想部署项目的分支，我的分支是main，所以填的是main
  • 第15行到第22行则是下载项目依赖并打包的一个流程，可以根据自己项目进行调整
  • 第35行是你所想部署的站点的分支
  • 第36行是你打包后的文件的所在路径
  • 第37行是你的github page仓库
  • 第40行是部署到站点上面之后生成的目录
  • 第27行到29行必须加上，同时再下载pnpm install -w @action/core依赖
  • 第34行是一个secret名称，下面讲讲怎么生成

怎么生成secret

  1. 点击头像下面的setting

  1. 点击最下面的Developer settings

  1. 点击Personal access tokens并选择tokens(classic)

  1. 点击生成新的token

  1. 输入名称并勾选token

  1. 拉到最下面，点击生成token，并复制下来

  1. 点开你的github项目，并点击setting

  1. 点击secrets and variables并点击下面的actions

  1. 创建一个密钥，名称随便填，中间用下划线隔开，内容填入刚刚复制的token

  1. 这样secres就创建好了，上图的secret名称为TEST_A_B
  2. 替换后代码如下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存后，提交到 Github,这样，只要我们git push时，github actions就会自动执行了

查看log

  1. 点击actions

  1. 点击你想查看的详情并点击中间的小框

  1. 内容如下，会出现报错提示

avatar
文章
阅读
粉丝