前端项目nodejs自动部署脚本

简介: 一个脚本辅助部署前端项目

公司有些项目环境没有接入 jenkins 所以部署起来比较麻烦,所以写个脚本节约部署时间。

背景

前端项目分开发、测试、生产环境,开发及测试已接入 jenkins 自动部署,生产环境依然还是手动。每次都需要进行本地打包, 手动压缩上传到服务器目录,ssh 登录服务器后备份旧文件, 手动删除文件再将包解压到指定目录,操作流程比较繁琐,需要提前了解服务器部署目录,不太友好,所以就写了个脚本简化部署操作。

依赖安装

部署包含压缩文件、ssh 登录、文件上传等几个步骤,所以需要安装如下依赖:

  • archiver,压缩文件使用。
  • node-ssh,ssh 操作。
  • silly-datetime,时间处理。

关键代码

在项目根目录新建 deploy.js 脚本,作用是上传压缩包至服务器、备份旧文件,解压代码压缩包。

const fs = require('fs');
const path = require('path');
const archiver = require('archiver');
const { NodeSSH } = require('node-ssh');
const sd = require('silly-datetime');

let args = process.argv.splice(2),
  isRollback = args.includes('rollback');

// 当前时间
let curTime = sd.format(new Date(), 'YYYYMMDDHH');
// 当前时间格式化
console.log((isRollback ? '回滚' : '部署') + '时间:' + curTime);

// 设置本地 dist 文件路径
const distPath = path.resolve(__dirname, 'dist');

const ssh = new NodeSSH();

// 远程服务器配置信息
const config = require('./config');

// 本地文件上传至远程服务器
function uploadFile() {
  ssh
    .connect({
      host: config.host,
      username: config.username,
      password: config.password,
      port: 22,
    })
    .then(() => {
      console.log('SSH login success');
      ssh
        .putFile(
          `${__dirname}/dist${curTime}.zip`,
          `${config.pathUrl}/dist${curTime}.zip`
        )
        .then(() => {
          console.log('The zip file is upload successful');
          remoteFileUpdate();
        })
        .catch((err) => {
          console.log('the file upload fail:', err);
          process.exit(0);
        });
    })
    .catch((err) => {
      console.log('SSH conneting fail:', err);
      process.exit(0);
    });
}

// 远端文件更新
const remoteFileUpdate = () => {
  let cmd = isRollback
    ? `rm dist && mv dist.bak${curTime} dist`
    : `mv dist dist.bak${curTime} && unzip dist${curTime}.zip`;
  ssh
    .execCommand(cmd, {
      cwd: config.pathUrl,
    })
    .then((result) => {
      console.log(`The update message is: ${result.stdout}`);
      if (!result.stderr) {
        console.log('Gratefule! update success!');
        process.exit(0);
      } else {
        console.log('Something wrong:', result);
        process.exit(0);
      }
    });
};

// 本地文件压缩
const zipDirector = () => {
  const output = fs.createWriteStream(`${__dirname}/dist${curTime}.zip`);
  const archive = archiver('zip', {
    zlib: { level: 9 },
  }).on('error', (err) => {
    throw err;
  });
  output.on('close', (err) => {
    if (err) {
      console.log('something error width the zip process:', err);
      return;
    }
    uploadFile();
    console.log(`${archive.pointer()} total bytes`);
    console.log(
      'archiver has been finalized and the output file descriptor has closed.'
    );
  });
  output.on('end', () => {
    console.log('Data has been drained');
  });
  archive.pipe(output);
  archive.directory(distPath, '/dist');
  archive.finalize();
};

// 回滚代码
if (isRollback) {
  remoteFileUpdate();
} else {
  // 更新代码
  zipDirector();
}

服务器上的备份,解压等操作是通过执行 shell 命令做的,你也可以自己预先写好相关脚本去执行。

使用方法

在根目录新建一个 config.js 用于存放服务器 IP、用户名、密码、部署目录等信息,然后就可以在 package.json 中追加命令去调用上面的 node 脚本。

"scripts": {
    "deploy": "node deploy.js",
    "rollback": "node deploy.js rollback"
}

执行命令执行相应操作:

  • npm run deploy,部署 + 备份。
  • npm run rollback,回滚代码。

参考资料

相关文章
|
14天前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
31 1
|
2月前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
35 0
|
1天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
10 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
JavaScript 前端开发 Java
SpringBoot + Vue 前端后分离项目精进版本
这篇文章详细介绍了一个基于SpringBoot + Vue的前后端分离项目的搭建过程,包括前端Vue项目的初始化、依赖安装、页面创建和路由配置,以及后端SpringBoot项目的依赖添加、配置文件修改、代码实现和跨域问题的解决,最后展示了项目运行效果。
SpringBoot + Vue 前端后分离项目精进版本
|
2月前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
110 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
2月前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
2月前
|
JavaScript IDE 前端开发
前端开发工具配置 nodejs & git & IDE
前端开发工具配置 nodejs & git & IDE
|
2月前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!
29 0
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
|
2月前
|
资源调度 前端开发 JavaScript
前端 nodejs 命令行自动调用编译 inno setup 的.iss文件
前端 nodejs 命令行自动调用编译 inno setup 的.iss文件
|
2月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
61 0