說一下項(xiàng)目背景，這是一個(gè)基于 Docusaurus 搭建的個(gè)人博客平臺(tái)：Yopth.github.io

?? Docusaurs 是一個(gè)優(yōu)秀的搭建網(wǎng)站框架，基于 React 和 MDX，插件化、國際化、SEO 等做的都很不錯(cuò)，有需要搭建網(wǎng)站的同學(xué)可以考慮。

該網(wǎng)站利用 GitHub Pages 部署，這個(gè)方式也是 Docusaurus 所支持的，詳見：Deploying to GitHub Pages。

利用 Docusaurus 的能力，我們可以運(yùn)行 yarn deploy 命令去把我們的項(xiàng)目代碼部署到 GitHub Pages 上去，但是每一次部署都需要手動(dòng)，很麻煩。利用 GitHub Action 可以自動(dòng)化部署工作流。

這是來自 GitHub 官網(wǎng)的介紹，GitHub Action 其實(shí)就是一套 CI/CD，接下來我們來看下 GitHub 是如何定義這套 CI/CD 規(guī)則的。

CI/CD， Continuous Integration / Continuous Delivery, 持續(xù)集成 / 持續(xù)交付，即通過構(gòu)建自動(dòng)化的發(fā)布部署流程，將功能快速交付到用戶手上。

GitHub Action 有 5 個(gè)重要的概念。

第一個(gè)是 workflow，即工作流，工作流定義了部署的流程，直觀來看，所有工作流定義在項(xiàng)目中的 .github 下的 workflows 文件夾中，每一個(gè)工作流就是一個(gè) .yaml 文件。

第二個(gè)是 Event，即事件。就像設(shè)置一個(gè)按鈕一樣，只有當(dāng)用戶點(diǎn)擊這個(gè)按鈕的時(shí)候，事件才會(huì)被觸發(fā)。

事件也就是一個(gè) Action 的起點(diǎn)，常見的事件比如有創(chuàng)建 Pull Request，打開一個(gè)新 isuue，推送代碼到倉庫，還有調(diào)用 GitHub 的 API，當(dāng)然，也可以手動(dòng)觸發(fā)事件。

第三是 Runner。一個(gè)工作流不會(huì)平白無故地運(yùn)行，它肯定會(huì)有一個(gè)依托的環(huán)境，這個(gè)環(huán)境就是 Runner。公開倉庫每個(gè)月可以白嫖 2000 分鐘，超出就要收費(fèi)了。

第四是 Job，Job 就是 workflow 上細(xì)化出來的工作步驟，相當(dāng)于流水線上的工人。Job 可以是腳本代碼，也可以是接下來要講到的 Action。

多個(gè) Job 會(huì)并行執(zhí)行，當(dāng) Job 之間存在依賴的話，那么就會(huì)根據(jù)依賴串行執(zhí)行，并且由于這些 Job 是在同一個(gè) Runner 運(yùn)行，那么產(chǎn)生的數(shù)據(jù)是可以共享的。

最后是 action，實(shí)際上也就是可復(fù)用的 workflow。很容易想象得到，當(dāng)我們自己的有兩個(gè)項(xiàng)目，定義的 workflow 都一樣，那么重復(fù)寫兩次代碼肯定沒必要。

如何創(chuàng)建 workflow，以官網(wǎng)例子來說：

首先我們?cè)陧?xiàng)目根目錄創(chuàng)建 .github > workflows > deploy.yaml 這里的文件層級(jí)目錄。

接著編輯 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

1. name：整個(gè) workflow 的名字，可選。

2. on: [push]：workflow 觸發(fā)的事件，push 表示當(dāng)推送代碼到倉庫的時(shí)候觸發(fā)。

3. jobs：定義所有的 job，這里只有一個(gè) job。

4. check-bats-version：job 的名稱。

5. runs-on: ubuntu-latest：定義 runner 的環(huán)境。

6. steps：定義 job 的每一個(gè)步驟。

7. uses: actions/checkout@v3：這里就是一個(gè)復(fù)用的 action，它會(huì)把倉庫代碼檢出到 runner 中。

8. actions/setup-node@v3：這里也是一個(gè)復(fù)用的 action，它的作用是安裝一個(gè)指定版本的 node。

9. run: npm install -g bats：全局安裝 bats 依賴 npm 包

10. bats -v：運(yùn)行 bats 命令，輸出版本。

當(dāng)推送到 GitHub 倉庫上去之后，會(huì)自動(dòng)觸發(fā) Action：

可以看到我們定義的 workflow：

可以看到我們的 yaml 文件：

點(diǎn)擊進(jìn)去可以查看 Action 運(yùn)行的結(jié)果：

也可以查看 Job 的執(zhí)行日志：

學(xué)習(xí)了 GitHub Action，那么接下來就是為 Yopth 網(wǎng)站創(chuàng)建一個(gè) 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

這里我們使用 Docusaurus 官方推薦的 Action 配置。這里有一個(gè) secrets.TOKEN，TOKEN 這種屬于私密常量，肯定是不能直接明文暴露在代碼中，我們可以在組織的設(shè)置中去創(chuàng)建這樣的私密常量：

通過配置這樣簡單的 yaml 文件，就實(shí)現(xiàn)一個(gè)簡易好用的 CI/CD，下次只需要推送代碼到 main 分支，即可觸發(fā) GitHub Pages 的重新部署。GitHub Action 確實(shí)可以操練起來 ??文章來源地址http://www.zghlxwxcb.cn/news/detail-423326.html

到了這里，關(guān)于利用 GitHub Action 對(duì)項(xiàng)目進(jìn)行自動(dòng)部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！