利用 GitHub Action 对项目进行自动部署-六虎

说一下项目布景，这是一个根据 Docusaurus 建立的个人博客平台：Yopth.github.io

⚛️ Docusaurs 是一个优秀的建立网站结构，根据 React 和 MDX，插件化、国际化、SEO 等做的都很不错，有需要建立网站的同学能够考虑。

该网站利用 GitHub Pages 布置，这个方法也是 Docusaurus 所支撑的，详见：Deploying to GitHub Pages。

利用 Docusaurus 的能力，咱们能够运转 yarn deploy 指令去把咱们的项目代码布置到 GitHub Pages 上去，可是每一次布置都需要手动，很麻烦。利用 GitHub Action 能够主动化布置作业流。

这是来自 GitHub 官网的介绍，GitHub Action 其实便是一套 CI/CD，接下来咱们来看下 GitHub 是如何界说这套 CI/CD 规则的。

CI/CD， Continuous Integration / Continuous Delivery, 继续集成 / 继续交付，即通过构建主动化的发布布置流程，将功能快速交付到用户手上。

GitHub Action 有 5 个重要的概念。

第一个是 workflow，即作业流，作业流界说了布置的流程，直观来看，一切作业流界说在项目中的 .github 下的 workflows 文件夹中，每一个作业流便是一个 .yaml 文件。

第二个是 Event，即事情。就像设置一个按钮一样，只有当用户点击这个按钮的时候，事情才会被触发。

事情也便是一个 Action 的起点，常见的事情比如有创立 Pull Request，打开一个新 isuue，推送代码到库房，还有调用 GitHub 的 API，当然，也能够手动触发事情。

第三是 Runner。一个作业流不会平白无故地运转，它肯定会有一个依托的环境，这个环境便是 Runner。公开库房每个月能够白嫖 2000 分钟，超出就要收费了。

第四是 Job，Job 便是 workflow 上细化出来的作业过程，相当于流水线上的工人。Job 能够是脚本代码，也能够是接下来要讲到的 Action。

多个 Job 会并行执行，当 Job 之间存在依靠的话，那么就会根据依靠串行执行，并且由于这些 Job 是在同一个 Runner 运转，那么发生的数据是能够同享的。

最终是 action，实际上也便是可复用的 workflow。很容易幻想得到，当咱们自己的有两个项目，界说的 workflow 都一样，那么重复写两次代码肯定没必要。

如何创立 workflow，以官网比如来说：

首先咱们在项目根目录创立 .github > workflows > deploy.yaml 这儿的文件层级目录。

接着修改 deploy.yaml 文件

name: learn-github-actions
on: [push]
jobs:
  check-bats-version:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '14'
      - run: npm install -g bats
      - run: bats -v

name：整个 workflow 的姓名，可选。

on: [push]：workflow 触发的事情，push 表示当推送代码到库房的时候触发。

jobs：界说一切的 job，这儿只有一个 job。

check-bats-version：job 的名称。

runs-on: ubuntu-latest：界说 runner 的环境。

steps：界说 job 的每一个过程。

uses: actions/checkout@v3：这儿便是一个复用的 action，它会把库房代码检出到 runner 中。

actions/setup-node@v3：这儿也是一个复用的 action，它的作用是安装一个指定版别的 node。

run: npm install -g bats：全局安装 bats 依靠 npm 包

bats -v：运转 bats 指令，输出版别。

当推送到 GitHub 库房上去之后，会主动触发 Action：

能够看到咱们界说的 workflow：

能够看到咱们的 yaml 文件：

点击进去能够检查 Action 运转的成果：

也能够检查 Job 的执行日志：

学习了 GitHub Action，那么接下来便是为 Yopth 网站创立一个 yaml 文件：

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: yarn
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Build website
        run: yarn build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.TOKEN }}
          publish_dir: ./build
          user_name: Penggeor
          user_email: wkpcoder@163.com