自動化部署的一小步，前端搬磚的一大步

Tusi發表於2020-01-17
前端

在nodejs日漸普及的大背景下，前端工程化的發展可謂日新月異。構建打包這種日常任務指令碼化已經是常態了，webpack和gulp已經家喻戶曉自然不必多說，而持續整合/持續交付/持續部署也越來越得到各個前端Team的重視，業界也有了很多成熟的概念或者方案，如Hudson, Jenkins, Travis CI, Circle CI, DevOps, git hook。然而對於小白來講，如果直接上手這些內容，很容易混淆概念，陷入迷茫。如果為了用Jenkins而用Jenkins，那不是我的做事風格，我必須搞清楚這項技術能給我帶來什麼。所以我乾脆迴歸問題本質，從最簡單的工作流入手，先解決手動部署的效率問題。

前面說這麼多廢話純屬湊字數，對了，本文講的內容比較簡單，不適合工作流已經很完善的同學

自動構建

構建不是本文的重點，也不是一篇短文能夠講清楚的，這裡就一筆帶過了。

構建工具

使用主流的構建工具如webpack, gulp, rollup等。

構建目標

通過指令碼化的形式組織程式碼檢查，編譯，壓縮，混淆，資源處理，devServer等工作流事務。

手動部署

踩過的坑

本人曾經也嘗試過兩種手動部署的方法。

  • 搬磚模式，將構建完畢的資料夾通過xftp傳輸到伺服器/usr/share/nginx/html目錄下。
  • 將構建完畢的資料夾用git分支管理起來，推送到遠端倉庫，然後在linux伺服器上拉取這部分程式碼。

第一種方法顯然已經屬於刀耕火種模式了，不過我竟然用了很久。唉，沒辦法，業務纏身的我只能擠出時間來優化工作流。

第二種方法我自己私下也用過，後來一想，好像可以用git hook來改造優化下，也是實現自動部署的好方法。有興趣的同學可以試試git hook。

自動部署

寫指令碼

先寫個自動構建部署的指令碼，主要是包含了切git分支，拉取最新程式碼，構建打包，傳輸檔案到伺服器這些步驟。

scp 命令用於 Linux 之間複製檔案和目錄

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -r ./dist/. username@162.81.49.85:/usr/share/nginx/html/projectname/
複製程式碼

ps：ip已經被我胡亂改了一把，別試著攻擊我了。

然而我發現在使用部署指令碼的過程中，每次操作都要輸入密碼，很煩人。

ssh認證

雖然很討厭輸密碼，但是密碼是安全的保證，如果不輸入密碼，只能通過ssh安全訪問了。

首先是在自己工作電腦的~/.ssh目錄下建立金鑰對。

ssh-keygen -t rsa
複製程式碼

根據個人情況按需修改金鑰對的檔名，輸入密碼時回車即可，代表不需要使用密碼

生成ssh金鑰

接著要把公鑰傳輸到伺服器上

scp ~/.ssh/id_rsa.pub username@162.81.49.85:/home/username/.ssh/authorized_keys
複製程式碼

如果伺服器已經存在authorized_keys檔案，那麼可以直接在伺服器上修改authorized_keys檔案，在檔案末加入你自己的id_rsa.pub內容即可。

然後我們再修改部署指令碼，改用ssh認證方式向linux伺服器傳輸檔案。

#!/bin/bash
git checkout develop
npm run build:test
scp -i ~/.ssh/id_rsa -r ./dist/. username@162.81.49.85:/usr/share/nginx/html/projectname/
複製程式碼

scp的-i引數指定傳輸時使用的金鑰檔案，這樣就可以通過ssh安全訪問，而不用再每次輸入密碼了。-r引數則是recursive，代表遞迴複製整個目錄。

最後我們可以修改下package.json，通過npm scripts來執行sh

"scripts": {
  "deploy:test": "deploy-test.sh"
}
複製程式碼

配合vscode的npm scripts快捷方式，用起來就很舒服了。

npm scripts

注意，如果linux檔案許可權不夠也可能報錯的，別忘了給authorized_keys檔案賦予許可權，擁有者可讀可寫即可。

chmod 600 authorized_keys
複製程式碼

好了，按下那個deploy:test，靜靜等待一會吧。此時別忘了扭扭脖子，按按腰啊，程式設計師還是要注意身體，對自己好一點。

scp傳輸中

隨著bash視窗的自動關閉，部署工作也畫上了句號。

完工

last but not least

這裡還要考慮的一個問題是，部署過程中會不會造成使用者訪問問題？

答案是會影響使用者訪問。比如部署指令碼執行過程中，已經替換了index.html，正在部署靜態資源，此時使用者正好進入網站，新的index.html卻訪問不到新的靜態資源，網頁白屏報錯。

解決方法是先上靜態資源，再上頁面。因為靜態資源經webpack構建後都帶上了hash值，先上靜態資源不會影響原有的版本，所以我們還需要再優化下部署指令碼，分解下傳輸過程。

很頭疼的是scp命令竟然不能忽略檔案，這就有點麻煩了。

如果打包後的dist根目錄檔案不算很多，可以考慮手動列舉的方式來排列傳輸順序。舉個例子：

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -i ~/.ssh/id_rsa -r ./dist/static username@162.81.49.85:/usr/share/nginx/html/projectname/
scp -i ~/.ssh/id_rsa ./dist/favicon.ico username@162.81.49.85:/usr/share/nginx/html/projectname/favicon.ico
scp -i ~/.ssh/id_rsa ./dist/element-icons.ttf username@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.ttf
scp -i ~/.ssh/id_rsa ./dist/element-icons.woff username@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.woff
scp -i ~/.ssh/id_rsa ./dist/index.html username@162.81.49.85:/usr/share/nginx/html/projectname/index.html
複製程式碼

如果覺得這樣很傻，那麼可以考慮下rsync了，rsync是可以通過--exclude忽略檔案的，這樣的話理論上只需要寫兩條傳輸命令即可，也不用考慮後續構建可能會新增的內容。不過在windows和linux之間用rsync還是蠻複雜的，留給各位大佬自己探索啦。

更新補充

2020-01-20 簡化指令碼

謝謝網友_shanks的提醒，可以用.ssh/config簡化寫法。首先是要修改.ssh/config

# 配置開發環境
Host dev
HostName 162.81.49.85
User username
IdentityFile ~/.ssh/id_rsa
複製程式碼

接著修改部署指令碼deploy-test.sh

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -r ./dist/static dev:/usr/share/nginx/html/projectname/
scp ./dist/favicon.ico dev:/usr/share/nginx/html/projectname/
scp ./dist/element-icons.ttf dev:/usr/share/nginx/html/projectname/
scp ./dist/element-icons.woff dev:/usr/share/nginx/html/projectname/
scp ./dist/index.html dev:/usr/share/nginx/html/projectname/
複製程式碼

2020-02-04 深度實踐

前端自動化部署的深度實踐

我是Tusi，一個創業公司前端小leader，每天依然為寫不完的業務程式碼煩惱，在打磨產品道路上沉澱技術，探索成長路線。如果你與我一樣，正在思考自己的技術成長與價值，歡迎加我微信交流探討，微訊號ice_lloly。我會在公眾號大前端技術沙龍和小程式Tusi部落格同步部落格內容，快來撩我！

歡迎關注

相關文章