定製你私有的前端構建部署（Github CI/CD）

近來手癢，又陷入了自我搗騰的無限循環。
其實事情是這樣的，最近阿里雲搞活動（嗯，友情打廣告），229買了個3年版低配服務器；前端時間寫用React + Github Graphql API自定義你的博客, 見識了Github Action的強大，所以就嘗試打造自己的前端構建部署工作流程；也許你看到過很多大廠的前端自動構建部署，但鮮有嘗試，今天就可以自己動手啦，擼起來吧。

從workflow看流程

定製後的Github Action workflow大概長這樣：

name: Deploy static source to my server

on: 
  push:
    branches:
      -master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: checkout
      uses: actions/checkout@v1
      
    - name: build
      run: npm install && npm run pub

    - name: deploy
      uses: closertb/deploy-static-action@master 
      with:
        name: 'doddle'
        token: ${{ secrets.Deploy_Token }}
        requestUrl: 'http://114.55.38.249:8080/operate/deploy'
        dist: 'dist'
        target: 'adminManage'

大概流程是這樣：

• 監聽master分支的push操作；
• checkout：新建構建分支
• build：依賴安裝，打包構建
• deploy：將上一步的構建產物，打包部署到你的服務器靜態資源文件中
• over

部署的實現思路

構建很簡單，就是打包，這種工具很多，什麼script-build， roadhog，或自定義webpack。這裏主要說部署；其實部署也很簡單，看圖：

嗯，部署也講完了。詳細實現過程看參見我自定義的action：deploy-static-action
關於上面的幾個構建參數：

• name：一個名字，自己隨便啦，根據自己需要
• token：這個比較重要，服務器的通關口令。這裏最好的方式是通過項目的secrets來設置
• dist：構建打包後的文件夾名，會根據這個文件夾名來獲取其中的構建產物， 默認是dist
• target：靜態資源的目標文件夾名， 默認是dist
• requestUrl：一個部署API

關於上傳服務器

deploy-static-action其實只做了部署中的構建產物收集，真正的部署其實是依賴requestUrl來實現的，所以要實現 http://114.55.38.249:8080/operate/deploy 這個服務也很重要，你可以重用我的deploy-static-action，但部署API不能，因爲這個API是給我的服務器私有定製的。不過我可以提供示例代碼參考：
參考代碼, deploy.js

一張構建效果圖

原文見：https://github.com/closertb/closertb.github.io/issues/37