2022.10.18 - 前端Vue项目部署文件上线

在terminal终端连接Linux服务器

mac通过scp特定端口上传文件到linux服务器

命令：

scp -r -P 10017 /Users/yehudalee/Desktop/多测/portal-ui/dist/* [email protected]:/home/dchy/apache-tomcat-8.5.82/webapps/dchy-ui

命令说明：

scp -r -P 【端口号】【文件目录在本地的地址】【/*】(可选，意为表示当前目录下的所有文件) 【用户名】@【Linux服务器ip地址】:【服务器上传的目标目录路径地址】

注意：确认之后通过输入服务器密码就可以上传了！

在终端连接Linux服务器进行操作

命令：

ssh -p 10017 [email protected]

命令说明：

ssh -p 【端口号】 【用户名】@【服务器地址】

常用Linux命令：

pwd —— 显示当前目录

cd —— 改变目录

ls —— 列出目录内容

dir和vdir —— 列出目录内容

Vue项目自动部署上线脚本

目录层级

PORTAL-UI
├─build
├─config
├─dist ++[读取项目打包文件]
├─node_modules
├─src
├─.gitignore
├─deploy.js ++ [部署文件脚本]
├─deployConfig.js ++ [部署文件配置脚本]
├─package-lock.json
├─package.json
└README.md

deploy.js

const path = require('path');
const fs = require('fs');
const chalk = require('chalk');
const ora = require('ora');
const NodeSSH = require('node-ssh').NodeSSH;
const shell = require('shelljs');
const compressing = require('compressing');
const CONFIG = require('./deployConfig');

const SSH = new NodeSSH();
let config = CONFIG.servers;

const needBuild = process.argv[2] === '-b';

//用于显示日志的几种方式
const defaultLog = (log) =>
  console.log(chalk.blue(`---------------- ${log} ----------------`));
const errorLog = (log) =>
  console.log(chalk.red(`---------------- ${log} ----------------`));
const successLog = (log) =>
  console.log(chalk.green(`---------------- ${log} ----------------`));

//编译项目
const compileDist = async () => {
  const loading = ora(defaultLog('开始打包！')).start();
  shell.cd(path.resolve(__dirname, './'));
  const res = await shell.exec(`npm run ${config[0].script}`); //执行shell 打包命令
  console.log(res);
  loading.clear();
  if (res.code === 0) {
    successLog('项目打包成功!');
  } else {
    errorLog('项目打包失败, 请重试!');
    process.exit(); //退出流程
  }
};

const zipDist = async () => {
  defaultLog('项目开始压缩');
  try {
    const distDir = path.resolve(__dirname, `./${config[0].publicPath}`);
    const distZipPath = path.resolve(
      __dirname,
      `./${config[0].publicPath}.zip`
    );
    console.log(distZipPath);
    await compressing.zip.compressDir(distDir, distZipPath);
    successLog('压缩成功!');
  } catch (error) {
    errorLog(error);
    errorLog('压缩失败, 退出程序!');
    process.exit(); //退出流程
  }
};

//创建ssh连接
const connectSSH = async () => {
  const loading = ora(defaultLog('正在连接服务器')).start();
  try {
    const conn = await SSH.connect({
      host: config[0].host,
      username: config[0].username,
      password: config[0].password,
      port: config[0].port || 22
    });
    successLog('SSH连接成功!');
    loading.clear();
    return conn;
  } catch (error) {
    errorLog(error);
    errorLog('SSH连接失败!');
    process.exit(); //退出流程
  }
};

// console.log(SSH.isConnected());
const distZipPath = path.resolve(__dirname, `./${config[0].publicPath}.zip`);
console.log(distZipPath);

const runCommand = async (command) => {
  await SSH.exec(command, [], { cwd: config[0].path });
};

const clearOldFile = async () => {
  //删除旧的文件夹
  await runCommand(`rm -rf ${config[0].serverProjectPath}`);
};

const uploadZipBySSH = async () => {
  const loading = ora(defaultLog('准备上传文件')).start();
  try {
    const distZipPath = path.resolve(
      __dirname,
      `./${config[0].publicPath}.zip`
    );
    await SSH.putFiles([
      {
        local: distZipPath,
        remote: config[0].path + `/${config[0].publicPath}.zip`
      }
    ]); //local 本地 ; remote 服务器 ;
    successLog('上传成功!');
    loading.text = '正在解压文件';
    await runCommand(`unzip ./${config[0].publicPath}.zip`); //解压
    if (config[0].publicPath !== config[0].serverProjectPath) {
      await runCommand(
        `mv ${config[0].publicPath} ${config[0].serverProjectPath}`
      );
    }
    //解压
    await runCommand(`rm -rf ./${config[0].publicPath}.zip `);

    successLog('解压成功!');
    SSH.dispose(); //断开连接
    loading.stop();
  } catch (error) {
    errorLog(error);
    errorLog('上传失败!');
    process.exit(); //退出流程
  }
  loading.clear();
};

const clearZipDist = async () => {
  const distZipPath = path.resolve(__dirname, `./${config[0].publicPath}.zip`);
  fs.unlink(distZipPath, () => {});
};

const runUploadTask = async () => {
  const conn = connectSSH();
  conn.then(async () => {
    //打包
    if (needBuild) {
      await compileDist();
    }
    //压缩
    await zipDist();
    //将打包上传的dist文件改名为uums-ui,并删除之前的uums-ui的文件。
    await clearOldFile();

    //连接服务器上传文件
    await uploadZipBySSH();

    //删除本地的打包zip
    await clearZipDist();
    successLog('部署成功!');
    process.exit();
  });
};
runUploadTask();

deployConfig

module.exports = Object.freeze({
  servers: [
    {
      publicPath: 'dist', // 项目打包之后的文件夹名称，一般都是dist文件夹，如果你的项目打包成别的文件夹名称，填写打包之后文件夹名称即可
      name: '测试环境', // 部署环境的名称
      username: 'root', // 部署服务器的账号
      host: 'proxy.esconsoft.com', //服务器ip
      port: '10017', //端口
      password: 'iIl1o0O',
      path: '/home/dchy/apache-tomcat-8.5.82/webapps',
      script: 'build', //打包命令
      serverProjectPath: 'dchy-ui' //服务器上的项目名称地址
    }
  ]
});

// scp -r -P 10017 /Users/yehudalee/Desktop/多测/portal-ui/dist [email protected]:/home/dchy/apache-tomcat-8.5.82/webapps/dchy-ui

Package.json

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "publish": "npm run build && node ./deploy.js" // 先打包之后再运行脚本
  },

参考资料

阮一峰：【npm scripts 使用指南】