5分鐘教你快速掌握Github Action持續(xù)集成

關(guān)注并將「趣談前端」設(shè)為星標(biāo)

每天定時(shí)分享技術(shù)干貨/優(yōu)秀開源/技術(shù)思維

前言

前段時(shí)間發(fā)布了一個(gè)滑動(dòng)驗(yàn)證組件包 react-slider-vertify , 里面用到了 Github Action  作為自動(dòng)化打包發(fā)布工具, 我們只需要簡(jiǎn)單的配置就能輕松的在執(zhí)行  git push  的時(shí)候自動(dòng)打包項(xiàng)目并將其一鍵發(fā)布到 npm 中.

接下來我就帶大家一起了解一下 Github Action , 并從零教大家使用 Github Action 高效的管理和發(fā)布自己的開源項(xiàng)目.

Github Action 簡(jiǎn)介

Github Action 是 Github 推出的持續(xù)集成工具, 每次提交代碼到 Github 的倉(cāng)庫后，Github 都會(huì)自動(dòng)創(chuàng)建一個(gè)虛擬機(jī)（例如 Mac / Windows / Linux），來執(zhí)行一段或多段指令，例如：

npm install
npm run build

我們集成 Github Action 的做法，就是在我們倉(cāng)庫的根目錄下，創(chuàng)建一個(gè) .github 文件夾，里面放一個(gè) *.yaml文件, 這個(gè) Yaml 文件就是我們配置 Github Action 所用的文件。

有關(guān) yaml 更多的知識(shí)可以參考: https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes

Github Action 的使用限制

• 每個(gè) Workflow 中的 job 最多可以執(zhí)行 6 個(gè)小時(shí)
• 每個(gè) Workflow 最多可以執(zhí)行 72 小時(shí)
• 每個(gè) Workflow 中的 job 最多可以排隊(duì) 24 小時(shí)
• 在一個(gè)存儲(chǔ)庫所有 Action 中，一個(gè)小時(shí)最多可以執(zhí)行 1000 個(gè) API 請(qǐng)求
• 并發(fā)工作數(shù)：Linux：20，Mac：5

Workflow 是由一個(gè)或多個(gè) job 組成的可配置的自動(dòng)化過程。我們通過創(chuàng)建 YAML 文件來創(chuàng)建 Workflow 配置。

從零搭建 github 持續(xù)集成項(xiàng)目(npm包持續(xù)集成)

在了解了基本的知識(shí)之后, 我將通過一個(gè)實(shí)際的項(xiàng)目來帶大家快速上手 Github Action . 最終實(shí)現(xiàn)的目標(biāo): 當(dāng)我們將代碼推送到 github上后, 通過 Github Action  自動(dòng)打包項(xiàng)目, 并一鍵發(fā)布到 npm 上.

獲取 npm token

要想讓 Github Action 能有權(quán)利發(fā)布指定的 npm 包, 需要獲取 npm 的 通行證. 這個(gè)通行證就是 npm token, 所以我們需要登入 npm 官網(wǎng), 生成一個(gè) token :

設(shè)置 github secret

我們?cè)谀玫? npm token 后, 打開對(duì)應(yīng)項(xiàng)目的 github 倉(cāng)庫, 切換到 settings 面板, 找到 secrets 子菜單, 創(chuàng)建一個(gè)新的 secret, 將 npm token 復(fù)制到內(nèi)容區(qū), 并命名(這個(gè)名字會(huì)在yaml文件中用到).

創(chuàng)建 Github Action

我們切換到 actions 面板可以看到很多 workflows 模版, 我們選擇如下模版:

當(dāng)然如果屬性 yaml 配置的也可以自己創(chuàng)建一個(gè) workflow 供他人使用.

我們點(diǎn)擊安裝按鈕之后會(huì)跳轉(zhuǎn)到編輯界面, 我們可以直接點(diǎn)擊右上放的提交按鈕:

此時(shí)就創(chuàng)建了一個(gè) workflow .

配置 workflows

這里我列一下  react-slider-vertify  的 workflow.

name: Node.js Package

on:
 pull_request:
   branches:
     - main
 push:
   branches:
     - main

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
     - run: yarn
     - run: yarn build

 publish-npm:
   needs: build
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
         registry-url: https://registry.npmjs.com/
     - run: npm publish --access public
       env:
         NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

其中有幾個(gè)術(shù)語和大家介紹一下:

• name Workflow 的名稱，Github 在存儲(chǔ)庫的 Action 頁面上顯示 Workflow 的名稱
• on 觸發(fā) Workflow 執(zhí)行的 event 名稱, 比如 on: push(單個(gè)事件), on: [push, workflow_dispatch] - 多個(gè)事件
• jobs 一個(gè) Workflow 由一個(gè)或多個(gè) jobs 構(gòu)成，含義是一次持續(xù)集成的運(yùn)行，可以完成多個(gè)任務(wù)
• steps 每個(gè) job 由多個(gè) step 構(gòu)成，它會(huì)從上至下依次執(zhí)行
• env 環(huán)境變量, secrets.NPM_TOKEN就是我們之前定義的secret

提交測(cè)試

我們修改一下項(xiàng)目的代碼, 然后執(zhí)行:

git add .
git commit -m ':new: your first commit'
git push

提交成功之后我們打開項(xiàng)目的 github action 面板:

可以看到代碼線上構(gòu)建的流程和狀態(tài), 是不是和我們?cè)陂_發(fā)企業(yè)項(xiàng)目的自動(dòng)化流程很像呢?