首页 JavaScriptJS知识点正文

fjpublish: 前端项目独立发布神器

景先 JS知识点 2017-11-02 977 0

前言

    最近这两年互联网项目逐渐前后分离,这导致前后端项目独立发布。


    曾几何时,我相信部分Web Developer使用的项目发布方式还活在刀耕火种的年代(ftp或者ide的一些插件),发布方式简单又粗暴,想发布哪个目录就直接上传覆盖...


    但是这种方式对于现在的前端项目有些弊端,例如:


    若项目包含webpackgulp等构建工具,则每次发布都需要等待构建完成后再手动上传,效率低;

    若项目为前端的服务端渲染项目,例如vue的服务端渲染,那么项目上传服务器后还得登录服务器重启进程;

    发布时由于选错文件或者选错发布环境导致的上传(>﹏<)悲剧,可没有后悔药吃。


    为此各个公司都写了自己的发布脚本,今天给大家推荐一个开放的发布脚本fjpublish

    

    

fjpublish能做什么

    通过配置文件配置每个要发布的环境,并通过简单的命令行命令选择发布的环境;

    自动化发布流程涵盖了git->构建->打包压缩->上传服务器->执行远程命令备份并替换旧文件;    

    一次命令可发布一个或多个环境,可选择并行或串行发布;

    若为同时发布多个不同环境,fupublish能自动根据配置文件判断出哪些文件已构建,哪些文件已打包,哪些环境已上传等,自动忽略重复流程;

    自由组合发布的目录层级,可发布多个目录和忽略不需要发布的文件;

    通过中间件机制组成发布器,中间件之间独立无耦合,可灵活拆卸或新增中间件,完成简单的二次开发新的命令;

    可通过配置文件配置或者发布命令配置完成忽略某些当次发布不需要的流程,例如: 配置nobuild则不进行构建;

    可使用编程式的发布方式,不需要使用命令行也可以直接调用核心构建函数进行发布;

    可配置钩子函数灵活的控制在某个中间件前或后做些事情;

    可配置远程前置或后置linux处理命令,例如: 配置postCommands来在执行文件替换后重启pm2进程等;


安装

npm i fjpublish -g
//或者
yarn global add fjpulish


使用

把下面文件放在项目根目录,命名为fjpublish.config.js

module.exports = {
  //modules开始   里面可以配置多个环境,比如测试环境,预发布环境,和正式环境,当然,也可以配置一个
  modules: [{     // 以下内容为假数据,到时候改成真实服务器地址,
      name: '测试环境', // 设置发布环境的名称易于辨识,就是起个名字
      env: 'test',    // 发布环境的唯一标识符
      ssh: {          // 服务器的ssh配置,不知道的自己问运维大哥
          host: '0.0.0.0',
          port: 22,
          user: 'root',
          userName: 'root',
          password: 'password',
      },
      buildCommand: 'build',  //这个意思是运行的时候可以自动构建,这个必须放你构建时候的代码,我这里构建用的是npm run build,所以写build      localPath: 'dist',      // 要发布的文件夹的根目录,建议用相对路径,如果当前不存在,build后产生的文件夹,也要写这个不存在的文件夹名
      remotePath: '/data/d5-meal', // 要发布到远程服务器的路径,必须是一个二级及以上的绝对目录路径,
      tag: '123'                // 不解释
  },{  // 以下内容为假数据,到时候改成真实服务器地址
    name: '预发布环境',
    env: 'pre_release',
    ssh: {
        host: '00.0.0.0',
        port: 22,
        user: 'root',
        userName: 'root',
        password: 'password',
    },
    buildCommand: 'build',    localPath: 'dist',
    remotePath: '/data/d5-meal',
    tag: 'v1.0'},{  // 以下内容为假数据,到时候改成真实服务器地址
  name: '正式环境',
  env: 'publish',
  ssh: {
      host: '00.0.0.0',
      port: 22,
      user: 'root',
      userName: 'root',
      password: 'password',
  },
  buildCommand: 'build',  localPath: 'dist',
  remotePath: '/data/d5-meal',
  tag: 'v1.0'}],
  //modules结束
 // nobuild: true,     //  如果写了,就不默认运行上线命令的时候运行npm run build
  tag: 'v1.0',           
  afterHooks: {  // 控制台打印一些信息,可有可无吧
    when: 'prompt',
    fn({ name, ssh: { host }, localPath = '.', localPathEntries = [], remotePath, nobackup = false, nobuild = false, merge = false }, env, next) {
        console.log(`Config: ...
                    name: %s
                    env: %s
                    host: %s
                    ======                    local path: %s                    local entries: %s
                    remote path: %s
                    ======
                    nobuild: %s
                    nobackup: %s
                    merge: %s
                    `, name, env, host, localPath, localPathEntries, remotePath, nobuild, nobackup, merge);
                            next();
                    },
          }
}


发布

fjpublish env -s/-m


-s 以单选提示器的方式选择发布环境。vue用过 -m 以多选提示器的方式选择发布环境, 单选和多选只需要配置其中之一即可。记得按回车选定


-d 开启差异化(diff)发布,发布项目时只上传有改动或新增的文件,这样做能大大提升项目上传的速度。自动开启merge,和服务器文件对比,但是不能禁用历史记录功能。想想也好理解


--nobackup 发布时是否备份旧文件。默认进行备份,备份方式为例如abc文件将被备份为abc.{时间戳}。 若选择不备份,fjpublish为了安全起见是进行软删除, 即使用mv命名移动至shellTrashPath设置的目录,默认为'/tmp/fjpublishTrashDir',例如备份/www/test/abc,则将其移动至/tmp/fjpublishTrashDir/www.test.abc.{时间戳} 。


还原

是可以还原的,有需要的看官网或者插件作者博客吧。

如何使用mac登录服务器,

ssh root@0.0.0.0   //root 替换为服务器管理员的username,后面的IP换成服务器地址
// 然后输入密码就上去了
// 服务器上删除文件  rm -rf 文件名   (千万别用,大杀器)


结论

使用这个以后,以Vue-cli为例,只需要在上线的时候运行

fjpublish env -s

然后选择上线的环境,就好自动帮你build一份上传到服务器,对,就是这样的,npm run build这个命令你都不需要输入,下次有空说说服务器上的nginx怎么配。


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论