近來手癢，又陷入了自我搗騰的無限循環。
其實事情是這樣的，最近阿裡雲
搞活動 （嗯，友情打廣告），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一張建構效果圖
文章首發：
定制你私有的前端建構部署（Github CI/CD）參考文章：
-
[Github Actions for web apps
](
https://lukeboyle.com/blog-posts/2019/08/github-actions-for-web-apps/) - creating-a-javascript-action
- github example