一、前言
作為一名前端菜雞，服務器小白，剛開始在Linux服務器上部署網站時，前端代碼我一般都是打包後手動FTP傳上去，後端代碼直接在vscode中使用SSH連接服務器，直接同步代碼更改。
但小黑作為一個生命不息折騰不止的程序猿，肯定要探索更好玩更高效的方法，所以這次，咱就上手摺騰了下自動化部署方案
二、準備工作
1、持續集成服務（CI）方案選擇
實現代碼提交的自動化工作流，要依靠持續集成（CI）（或者加上持續交付(CD)）服務。現在主流的公用免費的持續集成服務有：
Travis CIJenkinsCircle CIAzure PipelineGitHub Actions
其中GitHub Actions是GitHub自家的持續集成及自動化工作流服務，簡單易用，也是小黑本次使用的服務。它使用起來非常簡單，只要在你的倉庫根目錄建立.github/workflows文件夾，將你的工作流配置(YAML文件)放到這個目錄下，就能啓用GitHub Actions服務。
小黑的網站是部署到騰訊雲服務器上的，所以配置過程中用到了服務器相關配置，如果是想把網站放到GitHub Pages上，那隻需要有個Github倉庫就可以開始折騰起來了，下文關於遠程服務器的配置可以忽略掉。
2、添加部署秘鑰
要把文件部署到遠程服務器，首先要解決登錄校驗的問題。
比較常見的就是密碼登錄、SSH密鑰登錄或者VNC登錄。小黑推薦使用SSH密鑰登錄，既方便有安全。
2.1、生成SSH密鑰對
相信需要遠程部署到服務器的小夥伴肯定早就把SSH密鑰對配置好了，所以我們可以直接對應的私鑰文件內容複製一下，等下在GitHub中進行配置就可以啦！這裏小黑就不再贅述啦
2.2、GitHub填寫自動化配置項
SSH密鑰對生成後，其實準備工作就已經完成的差不多了，最後一步就是將YAML文件中所需要的配置項，配置到Github上
首先打開對應的倉庫，點擊Setting > Secrets > New sceret,然後將我們複製的密鑰文件內容、服務器host和登錄用户名都添加到配置如下圖對應的配置中，這樣的話即使像小黑一樣把項目開源，隱私信息也不會泄露啦。
配置完上面這些，我們的準備工作就大功告成了，接下來就可以編寫工作流文件啦
三、配置過程
1、編寫工作流文件
在倉庫根目錄中創建.github/workflows文件夾，再創建一個YAML文件，文件名自定，我這裏起名叫deploy.yml，所以文件的完整路徑應該為.github/workflows/deploy.yml，配置的意義寫在註釋中啦，當然小黑也會簡略的介紹下重點配置項
1.1、文件基礎配置
首先就是YAML文件比較基礎的配置
on裏的內容比較重要，指定自動觸發工作流文件的事件，也可以將工作流設置為只在某些分支、路徑或標記上運行。比如小黑就是在當master分支上進行push時才會觸發,然後忽略掉README.md和LICENSE文件的變更
jobs裏就是接下來所要運行的所有工作流程，小黑就設置了build-production這一個job,根據需要也可以設置多個
還有就是runs-on，小黑第一次還以為是要填寫自己雲服務器的操作系統，就填了個centos,一跑就報錯，後來看了文檔才明白，這是配置用來運行job的GitHub託管的新虛擬機，和你所使用的操作系統及服務器系統無關，和小黑一樣配置為ubuntu-latest就行
strategy中的node-version可以不配置,為了和本地node版本統一，小黑配置了一下
steps裏就是所需要運行的每一個具體的步驟啦,下面就讓小黑一一道來
name: Blog CI/CD
on:
push:
branches:
- master # 只在master上push觸發部署
paths-ignore: # 下列文件的變更不觸發部署，可以自行添加
- README.md
- LICENSE
jobs:
build-production:
runs-on: ubuntu-latest # 使用ubuntu系統鏡像運行自動化腳本(温馨提示：和你所使用的操作系統及服務器系統無關，我本地用的windows10,雲服務器用的centos)
strategy: (可選)
matrix:
node-version: [12.x] # 配置所需node版本
steps: # 自動化步驟
……
1.2、下載代碼
這一步就是檢出你的倉庫並下載裏面的代碼到runner中,actions/checkout@v2是官方自己造的輪子，直接拿來用就行
- uses: actions/checkout@v2 # 第一步，檢出倉庫副本
1.3、配置node版本(可選)
這一步就是安裝node,輪子也是官方的，版本可以選填，使用npm進行打包(不需要打包的項目可以省略1.3——1.5了)
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }} #規定node.js版本(可不配置)
1.4、安裝依賴
這一步就不用解釋了吧
- name: Install dependencies # 第二步，安裝依賴
run: npm install
1.5、打包代碼
這裏小黑用了--if-present標誌來避免腳本未定義時出現非零退出的情況，親測在目前項目中寫不寫都行，不必糾結
- name: Build # 第三步，打包代碼
run: npm run build --if-present
在部署服務器時小黑踩到了很大的坑，就是明明打包完成了，但就是不結束任務，進入下一步
都帶薪如廁回來了竟然還沒有完成Build任務,這樣小黑都沒有煩躁也是多虧了和產品相愛相殺的磨練
換成yarn打包？失敗+1
修改node版本？失敗+2
……？？？？？？？失敗+N
是可忍叔不可忍,叔可忍他嬸子也不可忍了!
這是要逼小黑使出大殺招了！
面對疾風吧！
…%…（￥@*（￥@$(*$)
看我一頓操作猛如虎~
最後，在祭出三根寶貴的頭髮之後，終於讓小黑找到了問題所在
我變禿了，也變強了！ ——— 小黑
特麼的竟然是打包後Node.js進程沒有終止，平時直接手動Ctrl + C就順便關了，根本沒注意到這個問題！
暴風哭泣~
這時問題又來了，作為國服最菜前端，這webpack咱也只會個皮毛，觀察模式也並沒有開啓呀，百度谷歌一頓搜，文檔咱也看了又看，分析來分析去，也不曉得是哪個在佔用Node.js進程，索性快刀斬亂麻，一行process.exit(0);直接亂殺！
push一下試試，果然Build任務成功完成，我特麼真是個天才，獎勵自己美味飼料一斤！
1.6、推送部署到服務器
打包成功，接下來就是激動人心的部署到服務器環節了，我們這裏依然使用別人造好的輪子
DEPLOY_KEY、SERVER_IP、USERNAME就是我們剛開始在Github裏配置好SSH私鑰、主機名、登錄名，這裏就不再贅述
主要需要留意的就是FOLDER、和SERVER_DESTINATION，也就是我們的推送文件夾及目標文件夾，這裏一定要將路徑寫正確。
源碼地址：rsync-deploy
- name: Deploy to Server # 第四步，rsync推送文件
uses: AEnterprise/rsync-deploy@v1.0 # 使用別人包裝好的步驟鏡像
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰
ARGS: -avz --delete --exclude='*.pyc' # rsync參數，排除.pyc文件
SERVER_PORT: '22' # SSH端口
FOLDER: ./build/* # 要推送的文件夾，路徑相對於代碼倉庫的根目錄
SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服務器的host名（IP或者域名domain.com）
USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服務器登錄名
SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目標文件夾
我這裏是直接將build文件夾內文件替換到網站根目錄的，會存在非同名文件無法替換的情況，本來打算先刪除網站根目錄文件夾再替換的，但考慮到會有打包失敗或者部署失敗的可能性，刪除後網站會無法訪問，遂暫時不用此方法，後續有時間再繼續改進，寫在此處還是希望大佬們多多指點迷津~
1.7、重啓服務(視情況而定)
如果是僅僅是部署了前端代碼的話，那有可能就不用重啓服務了，如果要後端代碼的話，就要重新啓動服務了
可以在YAML配置文件裏另加一個後端部署的job，使用need控制下工作流，然後就在script裏依次寫下服務器上運行的命令行即可，小黑是用node寫的後台，僅供參考
- name: Restart server # 第五步，重啓服務
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }} # 下面三個配置與上一步類似
username: ${{ secrets.SSH_USERNAME }}
key: ${{ secrets.DEPLOY_KEY }}
# 重啓的腳本，根據自身情況做相應改動，一般要做的是migrate數據庫以及重啓服務器
script: |
cd /www/server/web-server/
pm2 reload app.js
1.8、完整配置文件
貼一下完整的配置文件，根據自己的項目情況修改下配置就行，不能用的話可以給小黑留言
name: Blog CI/CD
on:
push:
branches:
- master # 只在master上push觸發部署
paths-ignore: # 下列文件的變更不觸發部署，可以自行添加
- README.md
- LICENSE
jobs:
build-production:
runs-on: ubuntu-latest # 使用ubuntu系統鏡像運行自動化腳本(温馨提示：和你所使用的操作系統及服務器系統無關，我本地用的windows10,雲服務器用的centos)
strategy:
matrix:
node-version: [12.x] # 配置所需node版本
steps: # 自動化步驟
- uses: actions/checkout@v2 # 第一步，檢出倉庫副本
- name: Use Node.js ${{ matrix.node-version }} #規定node.js版本(可不配置)
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies # 第二步，安裝依賴
run: npm install
- name: Build # 第三步，打包代碼
run: npm run build --if-present
- name: Deploy to Server # 第四步，rsync推送文件
uses: AEnterprise/rsync-deploy@v1.0 # 使用別人包裝好的步驟鏡像
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰
ARGS: -avz --delete --exclude='*.pyc' # rsync參數，排除.pyc文件
SERVER_PORT: '22' # SSH端口
FOLDER: ./build/* # 要推送的文件夾，路徑相對於代碼倉庫的根目錄
SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服務器的host名（IP或者域名domain.com）
USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服務器登錄名
SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目標文件夾
# - name: Restart server # 第五步，重啓服務
# uses: appleboy/ssh-action@master
# with:
# host: ${{ secrets.SSH_HOST }} # 下面三個配置與上一步類似
# username: ${{ secrets.SSH_USERNAME }}
# key: ${{ secrets.DEPLOY_KEY }}
# # 重啓的腳本，根據自身情況做相應改動，一般要做的是migrate數據庫以及重啓服務器
# script: |
# cd /www/server/web-server/
# pm2 reload app.js
2、最終效果
小黑迫不及待的將配置文件修改後push到倉庫，這次工作流跑的行雲流水，啥錯都沒報，簡直完美！
在這個面板裏你可以看到具體每一步任務的耗時與輸出信息，報錯信息也可在這裏查詢哦
最後如果你是部署到騰訊雲、阿里雲等雲服務平台的話，一般會收到一條安全警告通知，比如小黑用的就是騰訊雲
存在來自ip:40.122.43.158的異常登錄，這ip是誰的，讓小黑查一下
Microsoft數據中心？應該就是github服務器的ip了，問題不大，這裏就先不管他了，後續咱們再找方法解決它
四、待優化部分
小黑最近工作太忙，只是先簡單實現了自動化部署功能，但是還沒來得及進行優化，先留個坑，後續再更
1、緩存依賴加快工作流
GitHub文檔-緩存的依賴關係
2、COS 優化部署
GitHub Actions + COS 優化部署
五、參考
由於小黑見識淺薄、水平有限，所寫內容肯定有很多不足之處，還請各位大佬不吝賜教，十分感激！
以下文檔、博客給了小黑極大的幫助，在此表示炒雞感謝！
1、GitHub Actions文檔2、How to deploy a create-react-app with github-actions
3、使用 GitHub Actions 實現博客自動化部署
