JS实现前端代码自动部署脚本_javascript工程化-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-11-14 21:25:09

原创

643人浏览过

答案：使用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 构建脚本。

立即学习“Java免费学习笔记（深入）”；

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 连接并传输文件。

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

安装依赖：

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();

登录后复制

运行方式：