在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/. [email protected]:/usr/share/nginx/html/projectname/
ps:ip
已經被我胡亂改了一把,別試着攻擊我了。
然而我發現在使用部署腳本的過程中,每次操作都要輸入密碼,很煩人。
ssh認證
雖然很討厭輸密碼,但是密碼是安全的保證,如果不輸入密碼,只能通過ssh
安全訪問了。
首先是在自己工作電腦的~/.ssh
目錄下創建密鑰對。
ssh-keygen -t rsa
根據個人情況按需修改密鑰對的文件名,輸入密碼時回車即可,代表不需要使用密碼
接着要把公鑰傳輸到服務器上
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
快捷方式,用起來就很舒服了。
注意,如果linux
文件權限不夠也可能報錯的,別忘了給authorized_keys
文件賦予權限,擁有者可讀可寫即可。
chmod 600 authorized_keys
好了,按下那個deploy:test
,靜靜等待一會吧。此時別忘了扭扭脖子,按按腰啊,程序員還是要注意身體,對自己好一點。
隨着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
還是蠻複雜的,留給各位大佬自己探索啦。
我是Tusi,一個創業公司前端小leader,每天依然爲寫不完的業務代碼煩惱,在打磨產品道路上沉澱技術,探索成長路線。如果你與我一樣,正在思考自己的技術成長與價值,歡迎加我微信交流探討,微信號ice_lloly。我會在公衆號猿出道和小程序Tusi博客同步博客內容,快來撩我!