GitHub Actions 手把手教你完成自动发布

前言

之前做了vue 的页面过场动画的demo，想做一个预览页面

这个时候就可以用到GitHub提供给我们的GitHub Pages来进行预览

但是完整的发布流程包括导出代码-安装依赖-运行测试-打包-发布这一系列步骤，看起来很繁琐
GitHub 同样为我们提供了 GitHub Actions 来实现 CI

基本概念

GitHub Actions 有一些自己的术语。

1. workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。
2. job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
3. step（步骤）：每个 job 由多个 step 构成，一步步完成。
4. action （动作）：每个 step 可以依次执行一个或多个命令（action）。

workflow文件

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的.github/workflows目录。

workflow 文件采用YAML格式，文件名可以任意取，但是后缀名统一为.yml，比如ci.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件，就会自动运行该文件。

workflow 文件的配置字段非常多，详见官方文档。

实战 —— vue_page_transition 自动化打包发布

1、准备好你需要进行自动化打包发布的项目工程
这里需要注意的几点（以 vue + vite 项目为例）：

• package.json中增加

"homepage": "https://${github username}.github.io/${repo name}",

• vite.config.js或vue.config.js中配置

// vite
base: process.env.NODE_ENV === "production" ? `/${repo name}/` : '/',
build: {
    outDir: "dist",
}
// vue
outputDir: 'dist',
publicPath: process.env.NODE_ENV === 'production' ? `/${repo name}/` : '/'

2、在根目录创建.github/workflows文件夹

3、生成workflow文件，例如：新建ci.yml

4、编写actions，这里我提供一个模板
其中发布的操作引用了别人写好的actions：JamesIves/github-pages-deploy-action
文档中展示了示例代码可以直接使用，还有部分个性化参数可以按需配置

# name 可以自定义
name: CI
# 指定触发workflow的条件
# 下面的意思就是在监听到main分支push操作的时候运行
on:
  push:
    branches: [ main ]

# jobs 表示要执行的一项或者多项任务
jobs:
  # 任务名，可自定义
  build-and-deploy:
    # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。
    runs-on: ubuntu-latest
    # steps表示执行步骤
    steps:
    # 检出代码，这里用了 actions/checkout@master 库来完成
    - name: Checkout
      uses: actions/checkout@master
   # 这里展示了如何执行多条命令
    - name: Install and Build
      run: |
        npm install
        npm run build
    # 这里引用了别人写好的发布库，具体参数信息可以查阅上面的链接
    - name: Deploy to GitHub Pages
      uses: JamesIves/[email protected]
      with: 
        branch: gh-pages
        folder: dist

5、此时将你的项目push到你的GitHub仓库中，它发现了workflow文件以后，就会自动运行，可以查看运行记录，如果失败会有具体的错误原因。

image.png

6、等待运行结束，我们发现原本的branch下多了gh-pages分支，这个时候表明actions执行完毕，成功将dist内容上传到该分支下了

image.png

7、配置GitHub Pages，在当前仓库下配置Settings->Pages->Source

image.png

8、到这里配置都已经结束，访问https://${github username}.github.io/${repo name}，看看你自己的网页吧！

项目实例：https://ztstory.github.io/vue_page_transition/#/

参考

阮一峰——GitHub Actions 入门教程