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等資源文件時能引用到正確的路徑。

格式爲：https://[你的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腳本。

1. name。這個工做流的名稱，沒什麼好說的。

name: CI
複製代碼

2. on。定義工做流觸發的時機，這裏表示master分支有push事件時，本工做流會觸發。

on:
  push:
    branches:
      - master
複製代碼

3. jobs。表示任務，能夠有多個任務，注意⚠，若是不特殊指定，️多個任務默認是同時執行的，咱們能夠經過設定needs來控制執行順序，以下面的shell腳本,表示當first job執行完後才執行second job。

jobs:
  first_job: 
  
  second_job:
    needs: first_job
複製代碼

而對於當前項目來講，拆分多個job感受有點不必，由於一共也就才那麼幾行shell腳本，咱們寫在一個job裏面就好。

4. runs-on，指定這個工做流會運行在哪一個虛擬機，可選windows、macos、ubuntu，除了辣雞windows，其餘兩個均可以，默認的是ubuntu。

runs-on: ubuntu-latest
複製代碼

5. 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地址，便可看到以下效果：