在

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[1]來改造優化下，也是實作自動部署的好方法。有興趣的同學可以試試

git hook

。

自動部署

寫腳本

先寫個自動建構部署的腳本，主要是包含了切

git

分支，拉取最新代碼，建構打包，傳輸檔案到伺服器這些步驟。

scp 指令用于 Linux 之間複制檔案和目錄

#!/bin/bash
git checkout develop
git pull
npm run build:test
scp -r ./dist/. [email protected]:/usr/share/nginx/html/projectname/

複制

ps：

ip

已經被我胡亂改了一把，别試着攻擊我了。

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

ssh認證

雖然很讨厭輸密碼，但是密碼是安全的保證，如果不輸入密碼，隻能通過

ssh

安全通路了。

首先是在自己工作電腦的

~/.ssh

目錄下建立密鑰對。

ssh-keygen -t rsa

複制

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

自動化部署的一小步，前端搬磚的一大步自動建構手動部署自動部署last but not least

生成ssh密鑰

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

scp ~/.ssh/id_rsa.pub [email protected]:/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/. [email protected]:/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 ./test/static [email protected]:/usr/share/nginx/html/projectname/
scp -i ~/.ssh/id_rsa ./test/favicon.ico [email protected]:/usr/share/nginx/html/projectname/favicon.ico
scp -i ~/.ssh/id_rsa ./test/element-icons.ttf [email protected]:/usr/share/nginx/html/projectname/element-icons.ttf
scp -i ~/.ssh/id_rsa ./test/element-icons.woff [email protected]:/usr/share/nginx/html/projectname/element-icons.woff
scp -i ~/.ssh/id_rsa ./test/index.html [email protected]:/usr/share/nginx/html/projectname/index.html

複制

如果覺得這樣很傻X，那麼可以考慮下

rsync

了，

rsync

是可以通過

--exclude

忽略檔案的，這樣的話理論上隻需要寫兩條傳輸指令即可，也不用考慮後續建構可能會新增的内容。不過在

windows

和

linux

之間用

rsync

還是蠻複雜的，留給各位大佬自己探索啦。

參考資料

[1]

git hook: https://www.git-scm.com/book/zh/v2/自定義-Git-Git-鈎子

自動化部署的一小步，前端搬磚的一大步自動建構手動部署自動部署last but not least