shipit自动化部署指北

ohmua
1,060 阅读3分钟

介绍

shipit是一个强大的自动化部署工具。 Shipit很多地方非常类似 gulp，他们的核心都是任务系统。以shipit部署的项目支持回滚，配置简单，方便快捷~

特色

  • 使用javascript编写任务
  • 基于orchestrator开发的任务流程
  • 交互式ssh命令
  • 易扩展

shipit文档

这篇文章主要介绍我如何使用shipit-cli、shipit-deploy、配合nginx部署一个webpack项目到服务器。

安装

$ npm i -g shipit-cli
$ npm install --save-dev shipit-deploy

{
    ...
    "shipit-deploy": "^5.3.0"
}

项目配置

建议先与远程服务器建立ssh-copy-id信任关系，git操作也可以配置sshkey，避免发布时频繁输入密码。 在项目根目录新建shipitfile.js，基本配置如

const LOCALSPACE = `/work/tmp/project-dev`; // 本地构建临时目录
const WORKSPACE = `/project/tmp/webpack-test-dev`; // 部署目录
const PRODUCTION_DIR = `/project/webpack-test-dev`; // 服务器 测试环境运行目录

module.exports = function (shipit) {
  require('shipit-deploy')(shipit);

  shipit.initConfig({
    default: {
      workspace: LOCALSPACE, // 本地工作区
      dirToCopy: '/work/tmp/project-dev/h5_dist', // 配置需要的部署文件（默认整个项目）
      repositoryUrl: 'git@gitee.com:ohmua/webpack-env.git', // git仓库
      ignores: ['.git', 'node_modules'],
      keepReleases: 2, // 保留2个版本
      deleteOnRollback: false, // 当回滚到以前的版本时，是否要删除旧版本
      shallowClone: false // 浅克隆
    },
    development: {
      servers: '你的测试服务器地址', // xxx@xxxxx
      branch: 'dev',
      deployTo: WORKSPACE, // 部署在远程服务器的目录
    },
    production: {
      servers: '你的生产服务器地址',
      branch: 'master',
      deployTo: WORKSPACE,
    }
  });
 }

因为项目分了测试环境和生产环境，所以有不同的发布配置，这一点根据实际项目来。 package.json配置启动命令:

{
    ...
    "scripts": {
        "i": "yarn install --no-lockfile",
        "build:development": "webpack --mode production --config webpack.dev.js --env development",
        "build:production": "webpack --mode production --config webpack.pro.js --env production",
        "shipit:development": "shipit development deploy",
        "shipit:production": "shipit production deploy",
        "serve": "webpack-dev-server --env.development"
     },
}

修改完代码，提交到git，即可本地执行发布，发布成功控制台打印如下： 1.png 然后就可以看到在配置的服务器目录下找到我们部署上去的文件。

任务

基于webpakc的项目涉及到构建打包，我尝试了两种方式：

  1. 本地打包（可以避免本地开发环境和服务器环境相爱相杀），然后直接部署打包好的dist文件夹，配置nginx代理（本文不再赘述）。这时就需要使用到shipit的任务系统，可以查看文档shipit-deploy给我们提供了很多钩子函数。
module.exports = function (shipit) {
  shipit.initConfig(options)...
   
  // 注册任务 => 钩子函数调用
  //  本地打包任务
  shipit.blTask('install', async () => {
    shipit.log('run install');
    await shipit.local('npm run i', { cwd: LOCALSPACE }) // 本地执行命令
  })

  shipit.blTask('build', async () => {
    shipit.log('run build');
    const env = shipit.options.environment;
    await shipit.local(`npm run build:${env}`, { cwd: LOCALSPACE })
  })

  //  fetch完代码后打包项目
  shipit.on('fetched', () => {
    shipit.log('project build');
    shipit.start(['install', 'build']);
  });

  // 发布完成，远程执行构建
  shipit.on('published', function () {
    // 拷贝文件到nginx代理的目录，即可访问
    const command = `mkdir -p ${PRODUCTION_DIR} && cp -rf ${WORKSPACE}/current/h5_dist/. ${PRODUCTION_DIR}`;
    return shipit.remote(command); // 远程执行命令
  });
}
  1. 服务器端打包（本地只管开发，好活都给服务器干）
...
const LOCALSPACE = `/work/tmp/project`; // 本地构建临时目录
const WORKSPACE = `/project/tmp/webpack-test`; // 本地构建临时目录
const PRODUCTION_DIR = `/project/webpack-test`; // 服务器 预发布/生产目录
module.exports = function (shipit) {
  shipit.initConfig(options)...
  // 创建本地临时目录
  shipit.on('init', () => {
    return shipit.local(`mkdir -p ${WORKSPACE}`);
  });

  // 发布完成，执行构建
  shipit.on('published', function () {
    const env = shipit.options.environment;
    const options = {
      workspace: WORKSPACE,
      dir: PRODUCTION_DIR,
      env
    };
    const command = generateRemoteCmd(options);
    return shipit.remote(command);
  });
}
// cmd远程命令生成
function generateRemoteCmd(options) {
  const {
    workspace,
    dir,
    env
  } = options;
  return [
    `mkdir -p ${dir}`,
    `cp -rf ${workspace}/current/project/. ${dir}`,
    `cd ${dir}`,
    `npm run i && npm run build:${env}`
  ].join(' && ');
}

如果有命令报错，可以看看部署路径是否正确以及服务端是否正常安装依赖等 基本配置就酱紫，工作中根据实际项目配置。发布完成后就可以正常访问了（如果不能就来砍我顺便给我挂个专家号），接下来就可以愉快的写代码了~

avatar
文章
阅读
粉丝