越写悦快乐之Vue项目如何使用GitHub Actions进行自动发布

GitHub Actions市场 - 图片来自App

今天的越写悦快乐之系列文章为大家带来Vue项目如何使用GitHub Actions进行自动发布。众所周知,GitHub已经成为全世界码农进行学习的朝圣之地,众多的开源项目在GitHub上进行分享和分发,让我们一起来探索GitHub的奥秘吧。

GitHub Actions是什么(What)

GitHub Actions 是 GitHub 的持续集成服务,于2018年10月推出。

大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。

如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

GitHub 做了一个官方市场,可以搜索到他人提交的 actions。另外,还有一个 awesome actions 的仓库,也可以找到不少 action。

GitHub Actions的应用场景(Where)

  • GitHub上的项目都可以使用

GitHub Actions的基本概念(What)

  • workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。

  • job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。

  • step(步骤):每个 job 由多个 step 构成,一步步完成。

  • action (动作):每个 step 可以依次执行一个或多个命令(action)。

workflow 文件

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

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

workflow 文件的配置字段非常多,详见官方文档。下面是一些基本字段。

(1)name

name字段是 workflow 的名称。如果省略该字段,默认为当前 workflow 的文件名。

name: GitHub Actions Demo

(2)on

on字段指定触发 workflow 的条件,通常是某些事件。

on: push

上面代码指定,push事件触发 workflow。

on字段也可以是事件的数组。

on: [push, pull_request]

上面代码指定,push事件或pull_request事件都可以触发 workflow。

完整的事件列表,请查看官方文档。除了代码库事件,GitHub Actions 也支持外部事件触发,或者定时运行。

(3)on..

指定触发事件时,可以限定分支或标签。

on:
 push:
   branches:    
     - master

上面代码指定,只有master分支发生push事件时,才会触发 workflow。

(4)jobs..name

workflow 文件的主体是jobs字段,表示要执行的一项或多项任务。

jobs字段里面,需要写出每一项任务的job_id,具体名称自定义。job_id里面的name字段是任务的说明。

jobs:
  my_first_job:
    name: My first job
  my_second_job:
    name: My second job

上面代码的jobs字段包含两项任务,job_id分别是my_first_jobmy_second_job

(5)jobs..needs

needs字段指定当前任务的依赖关系,即运行顺序。

jobs:
  job1:
  job2:
    needs: job1
  job3:
    needs: [job1, job2]

上面代码中,job1必须先于job2完成,而job3等待job1job2的完成才能运行。因此,这个 workflow 的运行顺序依次为:job1job2job3

(6)jobs..runs-on

runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。

  • ubuntu-latestubuntu-18.04ubuntu-16.04
  • windows-latestwindows-2019windows-2016
  • macOS-latestmacOS-10.14

下面代码指定虚拟机环境为ubuntu-18.04

runs-on: ubuntu-18.04

(7)jobs..steps

steps字段指定每个 Job 的运行步骤,可以包含一个或多个步骤。每个步骤都可以指定以下三个字段。

  • jobs..steps.name:步骤名称。
  • jobs..steps.run:该步骤运行的命令或者 action。
  • jobs..steps.env:该步骤所需的环境变量。

下面是一个完整的 workflow 文件的范例。

name: Greeting from Mona
on: push

jobs:
  my-job:
    name: My Job
    runs-on: ubuntu-latest
    steps:
    - name: Print a greeting
      env:
        MY_VAR: Hi there! My name is
        FIRST_NAME: Mona
        MIDDLE_NAME: The
        LAST_NAME: Octocat
      run: |
        echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

上面代码中,steps字段只包括一个步骤。该步骤先注入四个环境变量,然后执行一条 Bash 命令。

GitHub Actions的使用(How)

以我的Vue项目为例来说明GitHub Actions的基本使用。

  1. 我们在项目的顶部栏看到actions的一项;
Actions位置 - 图片来自App
  1. 创建workflow文件;

我们在项目仓库的目录下创建文件,存放的位置在.github/workflows/nodejs.yml

name: nodejs
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: '12'
    - run: npm install
    - run: npm run-script build
    - name: Deploy to GitHub Pages
      uses: JamesIves/[email protected]
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist
  1. 保存文件并推送到GitHub;

  2. 等待workflow运行结束,访问GitHub Pages,会看到结果。

运行结果 - 图片来自App

参考(Where)

  • GitHub Actions 入门教程

个人收获及总结(With)

今天的文章为大家介绍了如何利用GitHub Actions为自己的项目创建CI服务,可以让我们随时构建我们的项目,把项目的运行环境、测试和发布一体化,也能节省我们的时间,当然我们也可以使用Docker来创建测试镜像,测试运行我们的项目,让我们一起持续提升我们的技术,并做更有价值的事情。若是我的文章对你有所启发,那将是我莫大的荣幸。希望和您一起精进,成为更好的自己。

你可能感兴趣的:(越写悦快乐之Vue项目如何使用GitHub Actions进行自动发布)