Agent-n8n/web_frontend/exhibition-demo/DEPLOYMENT.md

部署说明文档

📦 生产环境部署

端口说明

• 开发环境: http://localhost:5173 (npm run dev)
• 生产预览: http://localhost:4173 (npm run preview)
• 生产部署: 端口 4173

---

🚀 快速部署流程

1. 构建生产版本

cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo

# 安装依赖（如果还没安装）
npm install

# 构建生产版本
npm run build

构建结果:

• 生成 dist/ 目录
• 包含所有静态资源（HTML、CSS、JS、图片等）
• 图片从 public/images/ 复制到 dist/images/

2. 预览生产版本

# 本地预览生产版本（端口 4173）
npm run preview

访问: http://localhost:4173

3. 验证12个产业页面

在浏览器中测试所有产业页面：

http://localhost:4173/food
http://localhost:4173/wenlu
http://localhost:4173/manufacturing
http://localhost:4173/developer
http://localhost:4173/finance
http://localhost:4173/visual
http://localhost:4173/health
http://localhost:4173/transportation
http://localhost:4173/energy
http://localhost:4173/chemical
http://localhost:4173/environmental
http://localhost:4173/civil

---

📁 生产部署目录结构

构建后的 dist/ 目录结构：

dist/
├── index.html              # 主页面
├── assets/                 # JS/CSS 资源
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── ...
└── images/                 # 产业背景图片
    ├── 文旅.jpeg
    ├── 食品.png
    ├── 化工.png
    ├── 环保.png
    ├── 能源.png
    ├── 大健康.png
    ├── 交通物流.png
    ├── 土木水利.png
    ├── 智能制造.png
    ├── 智能开发.png
    ├── 视觉设计.png
    └── 财经商贸.png

---

🔧 部署配置

Vite 配置 (vite.config.ts)

确认配置文件包含以下设置：

export default defineConfig({
  // ... 其他配置

  // 生产构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    // 确保图片被复制到 dist 目录
    copyPublicDir: true,
  },

  // 预览服务器配置
  preview: {
    port: 4173,
    host: true,
  },
});

---

🌐 服务器部署方案

方案1: 使用 Nginx

Nginx 配置示例 (/etc/nginx/sites-available/exhibition-demo):

server {
    listen 4173;
    server_name localhost;

    root /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo/dist;
    index index.html;

    # 处理 SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location /images/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

启动 Nginx:

sudo nginx -t
sudo systemctl reload nginx

方案2: 使用 PM2 (Node.js 进程管理)

安装 PM2:

npm install -g pm2

创建 PM2 配置文件 (ecosystem.config.js):

module.exports = {
  apps: [{
    name: 'exhibition-demo',
    script: 'npx',
    args: 'vite preview --port 4173 --host',
    cwd: '/Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production',
    },
  }],
};

启动应用:

cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
pm2 start ecosystem.config.js
pm2 save
pm2 startup

方案3: Docker 部署

创建 Dockerfile:

FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 4173
CMD ["nginx", "-g", "daemon off;"]

nginx.conf:

server {
    listen 4173;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

构建和运行:

docker build -t exhibition-demo .
docker run -d -p 4173:4173 exhibition-demo

---

✅ 部署检查清单

构建前检查

• 所有代码修改已提交
• 依赖包已安装 (npm install)
• 图片文件在 public/images/ 目录
• 配置文件正确 (vite.config.ts)

构建后检查

• dist/ 目录已生成
• dist/images/ 包含所有12张产业图片
• dist/assets/ 包含 JS/CSS 文件
• dist/index.html 存在

部署后检查

• 服务器在端口 4173 运行
• 访问 http://localhost:4173 显示 Landing 页面
• 访问 http://localhost:4173/food 显示食品产业页面
• 所有12个产业页面可访问
• 背景图片正确显示
• Agent 执行功能正常
• 浏览器 Console 无错误

---

🐛 常见部署问题

问题1: 图片404错误

原因: 图片未复制到 dist 目录

解决:

# 手动复制图片
cp -r public/images dist/

# 或重新构建
npm run build

问题2: 路由404错误

原因: 服务器未配置 SPA 路由回退

解决: 配置服务器 try_files 规则（见上面 Nginx 配置）

问题3: 端口被占用

检查端口:

lsof -ti:4173

释放端口:

kill $(lsof -ti:4173)

问题4: 构建失败

检查日志:

npm run build 2>&1 | tee build.log

清理缓存:

rm -rf node_modules dist
npm install
npm run build

---

📊 性能优化建议

1. 图片优化

# 安装图片优化工具
npm install -D vite-plugin-imagemin

# 在 vite.config.ts 中配置
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.8, 0.9], speed: 4 },
      svgo: { plugins: [{ name: 'removeViewBox' }] },
    }),
  ],
});

2. 代码分割

Vite 已自动配置代码分割，无需额外配置。

3. 开启 Gzip

在 Nginx 中启用 gzip 压缩。

---

🔄 更新部署流程

1. 代码更新后重新部署

cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo

# 拉取最新代码
git pull

# 安装新依赖（如果有）
npm install

# 重新构建
npm run build

# 重启服务
pm2 restart exhibition-demo  # 如果使用 PM2
# 或
sudo systemctl reload nginx  # 如果使用 Nginx

2. 图片更新

# 更新图片后重新构建
npm run build

# 或手动复制新图片
cp public/images/新图片.png dist/images/

---

📝 环境变量配置

如果需要配置环境变量（如 API 地址），创建 .env.production:

# .env.production
VITE_API_BASE_URL=http://192.168.2.9:4155
VITE_APP_TITLE=多智能体协同生成系统

在代码中使用：

const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4155';

---

🎯 快速命令参考

# 开发
npm run dev          # 启动开发服务器 (5173)

# 构建
npm run build        # 构建生产版本

# 预览
npm run preview      # 预览生产版本 (4173)

# 清理
rm -rf dist node_modules
npm install
npm run build

---

部署完成后，访问: http://localhost:4173

测试所有12个产业页面是否正常工作！