使用fjpublish釋出前端專案（基礎篇）

滿滿發表於2017-10-29
前端

本系列文章共分為基礎篇，安全篇，擴充篇。

前言

曾幾何時，我相信部分Web Developer（包括我）使用的專案釋出方式比較傳統（使用xftp或者sublime text的外掛sftp等），釋出方式簡單又粗暴，想釋出哪個目錄就直接上傳覆蓋...

但是這種方式對於現在的前端專案有些弊端：

  • 若專案包含webpack\gulp等構建工具，則每次釋出都需要等待構建完成後再手動上傳，效率低；

  • 若專案為前端的服務端渲染專案，例如vue的服務端渲染，那麼專案上傳伺服器後還得登入伺服器重啟程式；

  • 釋出時由於選錯檔案或者選錯釋出環境導致的上傳(＞﹏＜)悲劇，可沒有後悔藥吃。

我知道你想告訴我還可以使用git webhook等自動化工具，的確這是一種比較高階的用法，也非常可靠，但是搭建過程對於新手還是比較麻煩的，而且前端還是不太同於服務端，前端專案大多需要構建，那麼構建過程究竟放在服務端還是本地，這是一個問題。

我理想中的釋出器應該是易於搭建，通過配置檔案就能選擇釋出到不同的環境，敲完一行釋出命令就可以去泡杯茶，讓它自己完成整個釋出流程。

於是，fjpublish就誕生了。它是一個不同於git webhook的釋出思路，基於nodejs的能力自動化整個釋出流程，順便把git提交一下...

安裝

如果你已經安裝了nodejs (6.0+)，那麼只需要一個命令就能完成fjpublish的安裝

npm install fjpublish -g複製程式碼

全域性安裝就可以在任意路徑下使用fjpublish這個命令了。

注意: fjpublish依賴一份配置檔案，預設是fjpublish.config.js，如果不想在版本庫中提交伺服器安全資訊，請千萬記得把它加入忽略檔案中，如.gitignore

配置檔案結構

fjpublish命令列預設會讀取當前工作目錄下的fjpublish.config.js檔案，該檔案返回一個物件，舉例結構如下：

module.exports = {
    //modules開始
    modules: [{
        name: '測試環境', //標識要釋出的環境描述
        env: 'test', //釋出環境的唯一標識
        ssh: {
            host: '12.23.345.678', //遠端伺服器ip
            username: 'root', //登入伺服器的使用者名稱
            //rc版本的user選項和userName選項請在未來統一配置為username
            password: '12345678', //登入伺服器的密碼
        },
        buildCommand: 'build', //要進行構建的命令build => npm run build
        localPath: 'example', //專案中要釋出的目錄
        remotePath: '/www/example', //專案中要釋出到遠端伺服器的目錄
        tag: '123' //標註釋出的版本，可不設定
    }, { ... }],
    //modules結束
    nobuild: true,  //modules外的欄位可用於每一個module繼承,這裡僅用於舉例
    tag: 'v1', //modules外的欄位可用於每一個module繼承,這裡僅用於舉例
}複製程式碼

以上展示了一個簡單的配置，關於使用fjpublish和閱讀本文件，還需明白以下幾個概念：

  • modules陣列中每一個物件（也稱module）代表一個釋出環境，在本文件中module指在配置檔案中任意一個環境配置module

  • 在本文件中config指代module.exports輸出的所有欄位（包含modules在內）的物件。

  • config中modules欄位外的欄位在初始後將併入每一個module，優先順序為module > config，也可以理解為module繼承自config。

  • config中modules欄位外的欄位不僅僅為了繼承給module例項也可以是為了定義某些全域性的配置欄位。

聽起來好像一頭霧水，建議看完例子再重新理解以上內容

例子

讓我們閒話少說，先上幾個例子來了解fjpublish能做什麼。

1. 簡單例子

釋出一個專案檔案到遠端環境，並備份舊檔案。

任務描述

  • 以提示器的方式選擇釋出到測試環境

配置檔案

// 專案根目錄下fjpublish.config.js
module.exports = {
    modules: [{
        name: '測試環境',
        env: 'test',
        ssh: {
            host: '192.168.0.xxx',
            username: 'root',
            //rc版本的user選項和userName選項請在未來統一配置為username
            password: 'xxxxxx',
        },
        buildCommand: 'webpack',
        localPath: 'example',
        remotePath: '/www/manman/test',
    },{
        name: '預釋出環境',
        env: 'pre_release',
        //剩餘配置參考‘測試環境’
    },{
        name: '正式環境',
        env: 'pre_release',
        //剩餘配置參考‘測試環境’
    }]
}複製程式碼
// 專案根目錄下package.json
// 用於使用構建命令npm run webpack來呼叫webpack
...
"scripts": {
    "webpack": "webpack --config example/webpack/build/build.js"
},
...複製程式碼

釋出命令

fjpublish env -s複製程式碼

動態圖

簡單例子

更多內容

  • 可以使用命令fjpublish env <env> --diff開啟差異化釋出，每次釋出只上傳有改動的檔案，極大的縮短上傳時間。

  • 對於不需要構建的專案，不需要準備package.json，並在配置檔案中設定nobuild選項；

    nobuild: true複製程式碼

  • 對於某次釋出臨時不需要構建的，請在命令中使用--nobuild選項

    fjpublish env <env> --nobuild複製程式碼

2. 多目錄釋出

有些時候我們的專案需要釋出的資料夾不止一個，或者需要忽略某些檔案，那麼就需要調整發布方式。

任務描述

  • 使用module的localPathEntries來發布多個目錄；

  • 使用module的localPathIgnore忽略所有txt結尾的檔案。

專案檔案結構

配置檔案

// 專案根目錄下fjpublish.config.js
module.exports = {
    modules: [{
        name: '測試環境',
        env: 'test',
        ssh: {
            host: '192.168.0.xxx',
            username: 'root',
            //rc版本的user選項和userName選項請在未來統一配置為username
            password: 'xxxxx',
        },
        buildCommand: 'webpack',
        localPathEntries: ['example', 'lib'],
        localPathIgnore: '**/*.txt',
        remotePath: '/www/manman/multiple',
    }],
}複製程式碼

釋出命令

fjpublish env test複製程式碼

動態圖

多目錄釋出

更多

  • 如果把配置改一下，那麼釋出的專案結構將完全不同，那麼聰明的你猜猜修改上文配置的localPath和localPathEntries會發生什麼吧；

    ...
localPath: 'example/webpack', //當localPathEntries存在時localPath可不填，不填意味著專案根目錄
localPathEntries: ['build', 'dist'],
...複製程式碼

  • 若專案為多目錄釋出，則遠端目錄的備份規則也將變為以這些子目錄為備份源。

3. 遠端後置命令

對於需要重啟服務的專案，fjpublish也是支援的。

任務描述

  • 使用module的配置項postCommands在專案釋出後重啟pm2程式；

  • 忽略當次構建過程並提交一次git；

  • 使用module的配置項ssh2shell設定每個遠端命令超時時間為20秒。

配置檔案

// 專案根目錄下fjpublish.config.js
module.exports = {
    modules: [{
        name: '測試環境',
        env: 'test',
        ssh: {
            host: '192.168.0.xxx',
            username: 'root',
            //rc版本的user選項和userName選項請在未來統一配置為username
            password: 'xxxxxx',
        },
        ssh2shell: {
            idleTimeOut: 20000
        },
        postCommands: ['pm2 reload xxx'],
        buildCommand: 'build',
        localPath: 'example',
        remotePath: '/www/manman/test',
    }]
}複製程式碼

釋出命令

fjpublish env test --nobuild --commit '遠端後置命令'複製程式碼

動態圖

遠端後置命令

4.快速還原

有備份專案的功能那當然得有還原的辦法啦。

任務描述

  • 還原版本預釋出環境至tag標記為‘自定義tag的版本’的版本；

配置檔案

// 專案根目錄下fjpublish.config.js
module.exports = {
    modules: [{
        name: '預釋出環境',
        env: 'pre_release',
        ssh: {
            //略
        },
        localPath: 'example',
        remotePath: '/www/zhangchao/pre_release',
    }],
}複製程式碼

還原命令

fjpublish recover pre_release複製程式碼

動態圖

快速還原

更多

  • 可以使用命令fjpublish recover pre_release -p, --previous 快速還原至上個版本而不需要選擇；

  • 可以使用選項recoverTemplate自定義版本列表模板；

  • 快速還原一樣也會執行postCommands配置的後置命令。

結語

以上的例子描述了fjpublish中最基本的功能，fjpublish也有強大擴充能力，感興趣的童鞋可以直接移步官方文件瞭解更多，別忘了在github上給我點個star哦。

下一期我們將談論如何使用fjpublish進行安全釋出，拜拜∩__∩y。
下一期地址：使用fjpublish釋出前端專案（安全篇）

fjpublish官方交流群：608809145

相關文章