真?一行代碼完成從前端代碼build到部署線上

csRyan 發布于2019-08-23 10:55 / 2754人閱讀

在經歷了6,7個項目同時開工，頻繁發布測試，不得不學會一點偷懶的小技巧來提高效率了，所以這篇文章要講的就是如何更加優化發布流程。

工作以來，經歷了build后，然后用FileZilla上傳服務器完成部署。再到前端打包后，在build倉庫執行git push,后端在自動部署。后端的自動部署的確簡化了很多操作，不過對于前端來說，每次發布還需要去build倉庫執行push操作，特別是發布頻繁的時候，難免會減低效率，這種重復操作還是讓腳本來執行比較合適。所以接下來就是圍繞如何只需要執行npm run build 就完成項目發布。

（本文所講的都是基于windows系統和node環境，各個系統的腳本語言可能有所誤差，基本思路不變）

本文分為兩部分，第一部分主要講的是前端的打包發布的優化過程，第二部分簡單介紹一下后端的自動部署原理。

一：前端發布優化

首先要明確的是目前大部分前端項目的build過程都是基于node環境，所以優化流程的主要思路就是利用node和操作系統交互，調用系統腳本完成文件copy和git操作。在這我們要明白在執行npm run build 的時候發生了什么，npm run build 只是一個語法糖，

在package.json里面可以看到其實是用node 執行了build/build.js文件，下面我們就來改寫build文件，為了方便對比，我在這貼一下改寫前后的build文件，改寫前：
改寫后：

我們其實不用全部讀懂build.js里面做了什么，我們只需要知道再build成功后在何處執行我們的腳本就可以了，可以很清楚的看到webpack打包后的回調函數，找到位置后，我們需要引入children_process，關于這個模塊這里說明兩點:

1.children_process這個模塊提供了衍生子進程的功能，熟悉shell操作童鞋可以利用這個模塊做一些有意思的事情，我們這兒主要利用children_process.exec(commad,options，callback), 主要功能就是創建一個shell，然后在shell里執行命令。執行完成后，將stdout、stderr作為參數傳入回調方法。想要詳細了解到童鞋可以去node文檔看一看

2.就是關于process.argv , 這個提供了獲取命令行參數的方法，這個參數就是在執行node命令時后面接的參數，比如執行 node build.js a b c , 那么process.argv[1]就是build.js ，process.argv[2]就是a，以內類推。

知道了這兩點后，我們就可以設計我們的自定義命令了，因為優化的目的就是簡化操作，所以在build的時候我們接上我們的自定義參數，這關系到后面我們的腳本編寫，我設計的命令是 npm run build （push）(commit) (branch) ,這里括號包裹是為了方便表達這是一個自定義變量，實際是沒有括號的，三個參數的意思如下：

1.push表示是否打包完直接push到遠程；

2.commit 表示push到遠程執行git commit -m ‘(提交信息)"，的這里的提交的信息；

3，branch表示git push origin (branch)的那條分支，意味著是發布到正式服務器還是測試服務器

自定義完參數后我們在回調里面利用exec()執行我們的腳本

這時候我們編寫我們的腳本了，我們新建一個autopush.bat的文件，放在我們的根目錄就可以了，腳本內容很簡單，大概就是執行了復制粘貼刪除和git操作，腳本如下

cd D:uild	est /* 進入build的倉庫*/
git checkout %2  /* 切換build倉庫的分支*/
rd /s/q D:uild	eststatic /* 刪除build倉庫的static文件夾*/
xcopy D:source	estdist D:uild	est /E/I/Y /*從源碼倉庫的打包后dist的文件夾拷貝并覆蓋掉build倉庫的文件*/
git add .git commit -m %1 /*提交代碼*/
git push origin %2 /*push到遠程，后端執行自動部署*/
cd D:myFolder31abc_admin

這里說明三點：

1.先執行刪除build倉庫的static，在拷貝并覆蓋，是因為改動后每次打包后的js文件名都會變動，不刪除的話，不會覆蓋重名文件，所以會導致js文件累積；

2.window腳本參數是通過%1獲得的，例如%1就是獲取第一個參數，%2就是獲取第二個參數，這樣就可以獲取我們在build.js中執行腳本的時候傳入的關于commit和branch的參數了。

3.關于刪除和拷貝中參數的意思，

rd /s/q

  /S 表示刪除該目錄下所有遍歷的子目錄和文件
  /Q 刪除目錄時不提示確認，直接刪除

xcopy 后面的/E/I/Y

  /E 復制所有子目錄，包括空目錄。
 /I 如果“Source”是一個目錄或包含通配符，而“Destination”不存在，“xcopy”會假定“destination”指定目錄名并創建一個新目錄。然后，“xcopy”會將所有指定文件復制到新目錄中。默認情況下，“xcopy”將提示您指定“Destination”是文件還是目錄
  /y 禁止提示確認要覆蓋已存在的目標文件。

通過以上操作我們就可以，通過npm run build push fix master 一行命令完成打包到push的操作了，這個時候后端要是設置了自動部署的話，那么，就直接上線了。

二：后端自動部署

關于自動部署的文章，網上已經一大把了，在這兒為了配合這篇文章就簡單介紹了自動部署的原理，自動部署的關鍵就在于webhook ，主流的代碼托管平臺都有這個功能，包括coding ， github等，在倉庫里可以設置，以github為例，大概在這個位置

這里可以填寫一個自己服務器的接口地址和一個seret用于驗證，填寫完了倉庫會監聽push操作，一旦有push操作，webhook就會發出一個post請求到你設置的接口，然后在服務器端執行腳本進行git pull操作，把最新的代碼拉下來，就完成了部署。

GPU云服務器云服務器前端代碼部署到阿里云服務器上代碼部署到服務器碼云代碼部署到服務器將代碼部署到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96816.html

vue-cli3 配置開發-測試環境

摘要：實現輸入一行命令，執行兩條指令，分別打包線上生產環境和線上測試環境的代碼。這樣配置好之后，只要執行，它會自動先執行正式環境構建打包，完成之后再自動執行測試環境的構建打包，是方便接著再配置自動壓縮，這里就需要使用到一個的插件。需求首先介紹一下本項目的背景，是基于 vue-cli3.1.1 的單頁應用，目前測試環境和生產環境都在線上，并且都在同一個域名下，其中生產環境部署在根目錄下，測...

Scott 2019-08-26 13:48 評論0 收藏0
馬蜂窩容器化平臺前端賦能實踐

摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。容器對前端開發真的有用嗎？答案是肯定的。最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

wall2flower 2019-07-01 14:02 評論0 收藏0
馬蜂窩容器化平臺前端賦能實踐

摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。容器對前端開發真的有用嗎？答案是肯定的。最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

余學文 2019-06-28 17:25 評論0 收藏0
馬蜂窩容器化平臺前端賦能實踐

摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。容器對前端開發真的有用嗎？答案是肯定的。最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

desdik 2019-08-23 18:14 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0