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

# 部署说明文档

## 📦 生产环境部署

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

---

## 🚀 快速部署流程

### 1. 构建生产版本

```bash
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. 预览生产版本

```bash
# 本地预览生产版本（端口 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)

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

```typescript
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`):

```nginx
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**:
```bash
sudo nginx -t
sudo systemctl reload nginx
```

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

**安装 PM2**:
```bash
npm install -g pm2
```

**创建 PM2 配置文件** (`ecosystem.config.js`):
```javascript
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',
    },
  }],
};
```

**启动应用**:
```bash
cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
pm2 start ecosystem.config.js
pm2 save
pm2 startup
```

### 方案3: Docker 部署

**创建 Dockerfile**:
```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**:
```nginx
server {
    listen 4173;
    server_name localhost;

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

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

**构建和运行**:
```bash
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 目录

**解决**:
```bash
# 手动复制图片
cp -r public/images dist/

# 或重新构建
npm run build
```

### 问题2: 路由404错误

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

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

### 问题3: 端口被占用

**检查端口**:
```bash
lsof -ti:4173
```

**释放端口**:
```bash
kill $(lsof -ti:4173)
```

### 问题4: 构建失败

**检查日志**:
```bash
npm run build 2>&1 | tee build.log
```

**清理缓存**:
```bash
rm -rf node_modules dist
npm install
npm run build
```

---

## 📊 性能优化建议

### 1. 图片优化
```bash
# 安装图片优化工具
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. 代码更新后重新部署

```bash
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. 图片更新

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

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

---

## 📝 环境变量配置

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

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

在代码中使用：
```typescript
const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4155';
```

---

## 🎯 快速命令参考

```bash
# 开发
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个产业页面是否正常工作！