npm腳手架實現線上資源更新（支持多環境一鍵部署）

frontend-prod-docker-cli

前端輕量化部署腳手架，支持測試、線上等多環境部署，支持環境配置擴展，實現一條命令便可完成整個部署流程，同時支持將資源更新到 docker 中並重啓 docker;支持多套環境一鍵部署。

初衷

前端或服務端開發傳統的打包方式爲，當開發完畢以後執行打包命令: 前端通常爲 npm run build java 依賴 mavan 打包命令爲 mvn package -Dmaven.test.skip=true go 服務打包命令爲 go build demo.go 等

以後打開 ssh 工具鏈接服務器，經過 ftp 或者 ssh 工具將打包以後的應用程序包上傳到服務器某位置，而後重啓或 reload；若是是 docker 打包，還須要 docker cp ... ...將文件 copy 到容器內，執行 docker restart ... ,docker commit container... ,docker push 等一系列命令。每次版本更新還都要執行上面的一系列操做，好麻煩。。。

這種固定流程化的工做爲何不能使用一個腳手架直接實現呢？ 其實業界已經有不少的成熟方案，包括 gitlab + git hook + jenkins 等方案；可是相對小團隊或者沒有條件搭建這樣一套比較重環境的團隊,作這個事情又須要作太多的維護和搭建工做，在下受到 vue-cli 和不少前端腳手架的啓發，開發了這個簡陋的小工具，能夠實現上述工做的部分流程化，採用一次配置，一行命令更新的方式，簡化開發者的手工操做，歡迎你們使用和 issue，喜歡的話小手給個 star 激勵一下，謝謝！

當前 cli 功能

1.前端 spa 單頁應用打包，服務器直接更新部署；支持 docker 更新；

2.node 服務端打包發佈，服務器直接更新部署；支持 docker 更新；

3.多環境一塊兒更新；fe-deploy all

前提條件

本腳手架使用的前提條件： 1.本地安裝 node v10.0.0 以上； 2.能經過 ssh 連上您的服務器; 3.如只是前端和 node 端打包，無需其餘環境；若是是 java 打包須要安裝 jdk，jre，mavan；若是是 go 基礎環境打包，須要安裝和 go 基礎環境。

** 注意：本腳手架目前只支持開發者更新服務時使用 **

安裝

1.須要預先安裝 node 版本爲 10.0.0 以上 (可至nodejs官網 https://nodejs.org/en/ 下載安裝； 如本地開發須要使用多個版本的nodejs，可參考本人文章nvm安裝，本地多版本node安裝與一鍵切換：https://juejin.im/post/5de06d88f265da05af2c3a4c);
2.全局安裝 frontend-prod-docker-cli

npm i frontend-prod-docker-cli -g
 複製代碼

查看版本

fe-deploy -V
複製代碼

使用

1.初始化部署模板

會自動從倉庫拉取默認配置文件，在當前目錄下生成 frontend-prod-docker-cli 文件夾，文件夾內的 prod.config.js 即爲對應配置文件，開發者按照說明自行填寫

在當前項目目錄下執行如下命令：

fe-deploy init
複製代碼

可看到在當前項目目錄下生成了配置文件以下：

2.配置部署環境

部署配置文件位於當前項目下 frontend-prod-docker-cli 文件夾下的prod.config.js, 可包含多個環境配置，支持選擇單個環境部署，也可多環境一鍵部署

具體配置信息請參考配置文件註釋； 下面的 prod106 名可自由配置，本身起名（能夠起爲本身服務器 ip 末尾，命名不可出現特殊字符，不能夠數字和特殊字符開頭）

module.exports = {
 projectName: 'xxxx系統', // 項目名稱  script: 'npm run build', // 打包腳本（註釋掉即不執行該命令，直接上傳）   // 根據須要進行配置，如prod106等（key命名不可出現特殊字符，不能夠數字和特殊字符開頭）  // 上傳服務器並採用docker方式部署重啓配置案例  prod106: {  name: 'prod106環境',  host: '192.168.78.106', // 服務器地址,其中xxx爲手動輸入ip末尾  port: 22, // ssh port，通常默認22  username: 'root', // 登陸服務器用戶名  password: '', // 填寫登陸服務器密碼  distPath: 'dist', // 當前工程中須要上傳服務器的文件夾（前不加斜槓標識相對當前工程目錄，如加斜槓就須要寫出本地完整絕對路徑)  webDir: '/root/temp/messageRouteApp', // 打包文件上傳服務器地址(會將上一行配置的distPath文件夾上傳到該位置)  dockerName: 'messageroute', // docker名稱  dockerWebDir: '/usr/app' // 容器中文件存放位置  // lastCmd: 'pm2 restart app' // 全部動做執行完以後在服務器上執行的自定義命令（可不配置）  },  // 再還有多餘的環境按照相似prod106格式繼續填寫便可 } 複製代碼

3.環境部署

配置好prod.config.js，運行

fe-deploy           // 能夠看到本身的部署命令和配置文件內容
fe-deploy 106 // 直接執行106環境部署（fe-deploy xxx (xxx 爲 prod.config.js 中配置環境的鍵值，如上面的「106」)）  複製代碼

多環境部署

能夠將配置文件配置好的多個環境，手動勾選，一次部署，命令爲：

fe-deploy  all      // 在全部配置環境中選擇多個環境一鍵部署多環境
複製代碼

Ng31bR.png

本系統初期參考https://github.com/dadaiwei/fe-deploy-cli，並借鑑vue-cli思路是實現，在此感謝！

歡迎你們支持，還會不斷更新支持更多功能，若有改進意見請多讀指教，歡迎 star 一會兒！

做者博客

可關注掘金主頁：https://juejin.im/post/5ee10b0ce51d4578853d3bee

github 地址：

https://github.com/Joseph244/frontend-prod-docker-cli

npm 地址：

https://www.npmjs.com/package/frontend-prod-docker-cli

本文使用 mdnice 排版