当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript自动部署脚本怎么写

JavaScript自动部署脚本怎么写

2025-11-24 20:10:06 0浏览收藏

想要提升前端项目部署效率，告别手动操作？本文为你揭秘如何利用 JavaScript 和 Node.js 编写自动化部署脚本，实现一键构建、上传和重启服务。文章详细介绍了通过 `child_process` 模块执行 `npm run build` 命令构建项目，并利用 `ssh2` 库建立 SSH 连接，将打包后的 `dist` 目录文件高效上传至远程服务器。最后，通过远程执行 `pm2 restart` 命令，轻松重启应用服务。此外，还提供了结合配置文件支持多环境部署的方案，有效减少人为错误，显著提升开发效率。掌握前端自动化部署，让你的项目发布流程更加流畅、高效！

答案：使用Node.js编写前端自动化部署脚本可实现一键构建、上传和重启服务。首先通过child_process执行npm run build构建项目，再利用ssh2库建立SSH连接，将dist目录文件上传至远程服务器，最后远程执行pm2 restart命令重启应用。结合配置文件可支持多环境部署，提升效率并减少人为错误。

JS实现前端代码自动部署脚本_javascript工程化

前端项目自动化部署能极大提升开发效率，减少人为操作出错的可能。使用 JavaScript（特别是 Node.js）编写自动部署脚本，是一种轻量、灵活且易于集成的方式。下面介绍如何用 JS 实现一个简单但实用的前端代码自动部署流程。

1. 自动化部署的核心流程

一个典型的前端自动部署脚本通常包含以下步骤：

构建项目：运行 webpack、Vite 或其他打包工具生成生产环境资源
连接远程服务器：通过 SSH 登录目标服务器
上传文件：将构建产物（如 dist 目录）传输到服务器
远程执行命令：解压、移动文件、重启服务等

这个过程可以通过 Node.js 脚本统一控制，实现“一键部署”。

2. 使用 child_process 执行本地构建

Node.js 的 child_process 模块可以调用 shell 命令，适合执行 npm 构建脚本。

const { execSync } = require('child_process');

function buildProject() {
  console.log('? 开始构建项目...');
  try {
    execSync('npm run build', { stdio: 'inherit' });
    console.log('✅ 构建完成');
  } catch (error) {
    console.error('❌ 构建失败', error);
    process.exit(1);
  }
}

stdio 设置为 inherit 可以实时输出构建日志，便于排查问题。

3. 使用 ssh2 上传文件到服务器

借助 ssh2 这个第三方库，可以在 Node.js 中建立 SSH 连接并传输文件。

安装依赖：

npm install ssh2

示例代码：

const Client = require('ssh2').Client;

function deployToServer() {
  const conn = new Client();

  conn.on('ready', () => {
    console.log('? 已连接到服务器');

    // 使用 sftp 上传文件
    conn.sftp((err, sftp) => {
      if (err) throw err;

      const localPath = './dist/';
      const remotePath = '/var/www/html/myapp/';

      // 这里可以递归上传目录（需自行实现或使用第三方工具）
      // 简单起见，假设只传几个关键文件
      sftp.fastPut(localPath + 'index.html', remotePath + 'index.html', (err) => {
        if (err) {
          console.error('❌ 文件上传失败', err);
        } else {
          console.log('✅ 文件上传成功');
        }
        conn.exec('pm2 restart myapp', (err, stream) => {
          if (err) throw err;
          stream.on('close', () => {
            console.log('? 服务已重启');
            conn.end();
          });
        });
      });
    });
  }).connect({
    host: 'your-server.com',
    port: 22,
    username: 'root',
    privateKey: require('fs').readFileSync('/path/to/private.key')
  });
}

4. 整合流程并添加配置管理

将构建和部署逻辑组合，并支持不同环境（如测试、生产）：

const environment = process.argv[2] || 'prod';
const config = {
  prod: {
    host: 'prod.example.com',
    path: '/var/www/prod/'
  },
  staging: {
    host: 'staging.example.com',
    path: '/var/www/staging/'
  }
};

function main() {
  buildProject();
  deployToServer(config[environment]);
}

main();

运行方式：