使用fjpublish發佈前端項目（基礎篇）

時間 2019-11-07

標籤使用 fjpublish 發佈前端項目基礎简体版

原文原文鏈接

本系列文章共分爲基礎篇，安全篇，拓展篇。前端

前言

曾幾什麼時候，我相信部分Web Developer（包括我）使用的項目發佈方式比較傳統（使用xftp或者sublime text的插件sftp等），發佈方式簡單又粗暴，想發佈哪一個目錄就直接上傳覆蓋...vue

可是這種方式對於如今的前端項目有些弊端：node

若項目包含webpackgulp等構建工具，則每次發佈都須要等待構建完成後再手動上傳，效率低；webpack
若項目爲前端的服務端渲染項目，例如vue的服務端渲染，那麼項目上傳服務器後還得登陸服務器重啓進程；git
發佈時因爲選錯文件或者選錯發佈環境致使的上傳(＞﹏＜)悲劇，可沒有後悔藥吃。github

我知道你想告訴我還可使用git webhook等自動化工具，的確這是一種比較高級的用法，也很是可靠，可是搭建過程對於新手仍是比較麻煩的，並且前端仍是不太同於服務端，前端項目大多須要構建，那麼構建過程究竟放在服務端仍是本地，這是一個問題。web

我理想中的發佈器應該是易於搭建，經過配置文件就能選擇發佈到不一樣的環境，敲完一行發佈命令就能夠去泡杯茶，讓它本身完成整個發佈流程。shell

因而，fjpublish就誕生了。它是一個不一樣於git webhook的發佈思路，基於nodejs的能力自動化整個發佈流程，順便把git提交一下...npm

安裝

若是你已經安裝了nodejs (6.0+)，那麼只須要一個命令就能完成fjpublish的安裝json

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

動態圖

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

動態圖

<center>多目錄發佈</center>

若是把配置改一下，那麼發佈的項目結構將徹底不一樣，那麼聰明的你猜猜修改上文配置的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 '遠程後置命令'

動態圖

<center>遠程後置命令</center>

4.快速還原

有備份項目的功能那固然得有還原的辦法啦。

任務描述

還原版本預發佈環境至tag標記爲‘自定義tag的版本’的版本；

配置文件

// 項目根目錄下fjpublish.config.js
module.exports = {
    modules: [{
        name: '預發佈環境',
        env: 'pre_release',
        ssh: {
            //略
        },
        localPath: 'example',
        remotePath: '/www/zhangchao/pre_release',
    }],
}