Github Actions簡單部署一個vue/react項目
大體介紹
本文對github actions部署前端項目做一個簡單的總結，總體來說，我感覺用它想要部署一個前端項目，可以說非常簡單，簡單得令人震驚🤯。但是高度的封裝，會讓人沒有那種以前travis書寫shell的暢快體驗感。
不過這也是github actions的初衷所在：開發者不用自己寫很多腳本，而是直接拿別人寫好的action，經過自己的搭配組合，形成自己項目的腳本。 所以從其誕生來說，就是為了共享而生，如果你無法忍受你的腳本里出現什麼Bob、Nancy、Jack這樣的字眼，選擇自己手擼，那也就意味著你放棄了github actions的優勢。
所以，這是一種天生的拿來主義，你可以在市場marketplace里自由挑選，搭配組合。
給項目一個token☝️
首先我們需要給即將開啟github actions的項目一個token，這步操作的目的是給shell腳本的一些行為授權，正所謂沒有規矩不成方圓，試想一下，假設有很多人都能向一個項目推送程式碼，假設某個小子突然有一天推送了一個腳本，這個腳本的目的是為了刪除項目，然後項目真的被刪除了，其他人都沒得玩了。
所以這裡必須要有一個授權的過程：只有該github所有者的做了某一步只能他自己完成的操作，給項目頒發了一個具有某些許可權的令牌（許可權完全由所有者配置），該項目的腳本拿到這個令牌，才能做一些許可權內的事情。
首先進入github主頁–>Settings–>Developer settings–>Personal access tokens–>Generate new token生成token，注意這裡會讓你輸入密碼，這就是為什麼說這個授權的操作只能由github所有者本人來完成。
生成token時，你可以自由配置這個token所擁有的許可權，勾選☑️得越多，這個token許可權越高，像一個持續集成部署的token，我並不希望它擁有過多的許可權，所以只勾選了repo項目基礎許可權和workflow工作流許可權，足矣。
生成token後，複製它，然後切換到你希望開啟github actions的項目目錄中，依次點擊該項目的Settings–>Secrets–>New Secrets。
將剛剛複製的token粘貼進去，並取一個名字，保存。一般這種大家都很喜歡叫ACCESS_TOKEN。當然喜歡叫其他的名字也可以，但是後面的腳本也要跟著改。 `
配置項目路徑
關於如何創建一個react/vue項目，這裡不再贅述，因為這確實屬於非常基礎的操作了。我們打開項目的package.json,配置一下項目地址。這一步的操作是為了確定✅項目的根目錄，項目在載入js，css等資源文件時能引用到正確的路徑。
格式為：//[你的github用戶名].github.io/[你的項目名]。對照著圖中改一下即可。
為項目開啟actions
將上一步配置好的項目路徑推送到遠程，進入項目主頁，可以看到一個很醒目的Actions。
點擊Actions–>set up a workflow yourself，就會進入到一個yml文件的編輯頁面，這個腳本默認放在項目根目錄/.github/workflows/下面，然後書寫以下腳本：
name: CI
on:
push:
branches:
- master
jobs:
main:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react項目為npm run-script build，vue項目改為npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react項目的FOLDER為build，vue項目改為dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
首先我們形成一個基本的觀念，對於一個workflow來說，從大到小可以按以下劃分： workflow（最大） –> job –> step –> action（最小）
然後依次解釋一下這個shell腳本。
name。這個工作流的名稱，沒什麼好說的。
name: CI
on。定義工作流觸發的時機，這裡表示master分支有push事件時，本工作流會觸發。
on:
push:
branches:
- master
jobs。表示任務，可以有多個任務，注意⚠，如果不特殊指定，️多個任務默認是同時執行的，我們可以通過設定needs來控制執行順序，如下面的shell腳本,表示當first job執行完後才執行second job。
jobs:
first_job:
second_job:
needs: first_job
而對於當前項目來說，拆分多個job感覺有點沒必要，因為一共也就才那麼幾行shell腳本，我們寫在一個job裡面就好。
runs-on，指定這個工作流會運行在哪個虛擬機，可選windows、macos、ubuntu，除了辣雞windows，其他兩個都可以，默認的是ubuntu。
runs-on: ubuntu-latest
steps表示當前任務下的步驟，一個或多個都可以，從上到下依次執行。每個step可指定以下欄位：
name步驟名run步驟執行的命令env步驟所需環境uses步驟使用的actions,可以是一個或多個
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react項目為npm run-script build，vue項目改為npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react項目的FOLDER為build，vue項目改為dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
這裡首先第一步為Checkout，用到了一個checkout的action，其作用是拉取你的程式碼；
第二步為Install and Build,其作用就是安裝依賴、打包。
第三步為Deploy，用到了一個名叫JamesIves寫的action，我們傳入一些基本配置，比如許可權鑰匙🔑ACCESS_TOKEN，要推送的分支BRANCH，取打包好的靜態文件目錄FOLDER。
注意⚠️：shell腳本文件是嚴格縮進的，因為它需要根據空格個數來區分數據結構。如果你的腳本運行報錯了，首先檢查一下shell的縮進是否正確。
寫在最後
在master分支提交腳本後，等待工作流⌛️跑完（工作流流水線和日誌可點擊項目的Actions入口進入查看）。
打開之前在package.json文件書寫homepage地址，即可看到如下效果：
