🤖 前端项目自动部署指南

📋 自动部署概述

本文档提供了两种实现前端项目自动部署的方案：Shell 脚本和 Node.js 脚本。这两种方案都可以实现一键部署，提高部署效率，减少人为错误。

🚀 部署方案一：Shell 脚本

使用 Shell 脚本实现自动部署，适合简单的部署场景。

deploy.sh

#!/bin/bash

# 服务器信息
SERVER="root@10.0.36.82"
TARGET_DIR="/mnt/tudou/devpedia-hub"

# 删除服务器上的旧文件
echo "🗑️ 删除服务器旧文件..."
ssh $SERVER "rm -rf $TARGET_DIR/*" || { echo "❌ 删除失败"; exit 1; }

# 上传新文件
echo "📤 上传新文件..."
scp -r ./docs/.vitepress/dist/* $SERVER:$TARGET_DIR || { echo "❌ 上传失败"; exit 1; }

echo "✅ 部署完成！"

使用说明

1. 将脚本保存为 deploy.sh
2. 添加执行权限：chmod +x deploy.sh
3. 执行脚本：./deploy.sh

🚀 部署方案二：Node.js 脚本

使用 Node.js 实现自动部署，适合需要更复杂逻辑的部署场景。

deploy.mjs

// deploy.mjs
import {
  exec
} from 'child_process';
import path from 'path';
import {
  fileURLToPath
} from 'url';

// 获取当前文件的目录
const __filename = fileURLToPath(
  import.meta.url);
const __dirname = path.dirname(__filename);

// 服务器信息
const SERVER = "root@10.0.36.82";
const TARGET_DIR = "/mnt/tudou/devpedia-hub";
const SOURCE_DIR = path.join(".", "docs", ".vitepress", "dist", "*"); // 相对于脚本路径

// 执行命令并返回Promise
function execCommand(command, errorMessage) {
  return new Promise((resolve, reject) => {
    console.log(`执行命令: ${command}`);

    exec(command, (error, stdout, stderr) => {
      if (error) {
        console.error(`❌ ${errorMessage}: ${error.message}`);
        reject(error);
        return;
      }

      if (stderr && !stdout) {
        console.log(`警告: ${stderr}`);
      }

      resolve(stdout);
    });
  });
}

// 主部署函数
async function deploy() {
  try {
    // 删除服务器上的旧文件
    console.log("🗑️  删除服务器旧文件...");
    await execCommand(`ssh ${SERVER} "rm -rf ${TARGET_DIR}/*"`, "删除失败");

    // 上传新文件
    console.log("📤 上传新文件...");
    await execCommand(`scp -r ${SOURCE_DIR} ${SERVER}:${TARGET_DIR}`, "上传失败");

    console.log("✅ 部署完成！");
  } catch (error) {
    console.error("部署过程中出错:", error);
    process.exit(1);
  }
}

// 执行部署
deploy();

使用说明

1. 将脚本保存为 deploy.mjs
2. 确保已安装 Node.js
3. 执行脚本：node deploy.mjs

也可以在package.json中添加脚本：

{
  // ... existing code ...
  "scripts": {
    // ... existing code ..
    "docs:deploy": "node ./script/deploy.mjs"
    // ... existing code ...
  }
  // ... existing code ...
}

💡 部署注意事项

1. 确保服务器 SSH 密钥已配置
2. 检查服务器目录权限
3. 验证文件路径是否正确
4. 注意备份重要文件

🔧 配置说明

参数	说明
SERVER	服务器 SSH 连接信息
TARGET_DIR	服务器目标目录
SOURCE_DIR	本地源文件目录

⚠️ 常见问题

1. 如果出现权限错误，检查 SSH 密钥配置
2. 如果上传失败，检查网络连接
3. 如果文件路径错误，检查目录结构

🔗 相关资源

• SSH 密钥配置指南
• SCP 命令使用说明
• Node.js 文档