使用fjpublish发布前端项目（基础篇）

本系列文章共分为基础篇，安全篇，拓展篇。

前言

曾几何时，我相信部分Web Developer（包括我）使用的项目发布方式比较传统（使用xftp或者sublime text的插件sftp等），发布方式简单又粗暴，想发布哪个目录就直接上传覆盖...

但是这种方式对于现在的前端项目有些弊端：

若项目包含webpackgulp等构建工具，则每次发布都需要等待构建完成后再手动上传，效率低；
若项目为前端的服务端渲染项目，例如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

动态图

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',
    }],
}

还原命令

fjpublish recover pre_release

动态图

可以使用命令fjpublish recover pre_release -p, --previous 快速还原至上个版本而不需要选择；
可以使用选项recoverTemplate自定义版本列表模板；
快速还原一样也会执行postCommands配置的后置命令。

结语

以上的例子描述了fjpublish中最基本的功能，fjpublish也有强大拓展能力，感兴趣的童鞋可以直接移步官方文档了解更多，别忘了在github上给我点个star哦。

下一期我们将谈论如何使用fjpublish进行安全发布，拜拜∩__∩y。
下一期地址：使用fjpublish发布前端项目（安全篇）

fjpublish官方交流群：608809145

使用fjpublish发布前端项目（基础篇）

前言

安装

配置文件结构

例子

1. 简单例子

任务描述

配置文件

发布命令

动态图

更多内容

2. 多目录发布

任务描述

项目文件结构

配置文件

发布命令

动态图

更多

3. 远程后置命令

任务描述

配置文件

发布命令

动态图

4.快速还原

任务描述

配置文件

还原命令

动态图

更多

结语

满满

引用和评论

使用fjpublish发布前端项目（安全篇）

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具