agent/DEPLOYMENT.md

# 部署指南 - AI Agent 设计工作流

## 快速部署（推荐）

### 一键启动

#### Mac/Linux 用户
```bash
# 克隆项目（标准方式）
git clone http://123.60.55.248:3000/Duguay/agent.git
cd agent

# 运行快速启动脚本
./quick-start.sh
```

#### Windows 用户
```bash
# 克隆项目（标准方式）
git clone http://123.60.55.248:3000/Duguay/agent.git
cd agent

# 运行快速启动脚本
quick-start.bat
```

> 💡 **智能启动功能**：脚本会自动检测项目结构并适配，无需手动调整

项目将自动在 `http://127.0.0.1:5175/` 启动

---

## 手动部署步骤

### 1. 环境准备

#### 必需环境
- Node.js >= 14.0.0
- npm >= 6.0.0
- Git

#### 检查环境
```bash
node --version  # 应显示 v14.0.0 或更高
npm --version   # 应显示 6.0.0 或更高
git --version   # 确保 Git 已安装
```

### 2. 获取代码

```bash
# 标准克隆方式
git clone http://123.60.55.248:3000/Duguay/agent.git
cd agent
```

> 项目配备智能启动脚本，会自动适配目录结构

### 3. 安装依赖

```bash
# 安装项目依赖
npm install
```

### 4. 启动项目

```bash
# 启动开发服务器（自动打开浏览器）
npm run dev

# 或者只启动服务器（不自动打开）
npm run serve
```

### 5. 访问应用

在浏览器中访问：`http://127.0.0.1:5175/`

使用 `npm run dev` 会自动打开浏览器

---

## 其他部署方式

### 使用 Python HTTP Server

#### Python 3
```bash
python3 -m http.server 5175 --bind 127.0.0.1
```

#### Python 2
```bash
python -m SimpleHTTPServer 5175
```

访问：`http://127.0.0.1:5175/`

### 使用 Live Server (VS Code)

1. 在 VS Code 中安装 Live Server 扩展
2. 右键点击 `index.html`
3. 选择 "Open with Live Server"
4. 修改端口为 5175（可选）

### 使用 Docker（高级）

创建 `Dockerfile`：
```dockerfile
FROM node:14-alpine
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5175
CMD ["npm", "run", "serve"]
```

构建并运行：
```bash
docker build -t ai-agent-workflow .
docker run -p 5175:5175 ai-agent-workflow
```

---

## 配置说明

### 修改端口

编辑 `package.json`：
```json
{
  "scripts": {
    "dev": "npx http-server -p 你的端口 -a 127.0.0.1 -o",
    "serve": "npx http-server -p 你的端口 -a 127.0.0.1"
  }
}
```

### 修改绑定地址

如需允许外部访问，修改 `package.json`：
```json
{
  "scripts": {
    "dev": "npx http-server -p 5175 -a 0.0.0.0 -o",
    "serve": "npx http-server -p 5175 -a 0.0.0.0"
  }
}
```

⚠️ **安全提示**：绑定到 0.0.0.0 会允许外部访问，请确保在受信任的网络环境中使用。

---

## 故障排除

### 问题1：npm install 失败

**解决方案**：
```bash
# 清理缓存
npm cache clean --force

# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装
npm install
```

### 问题2：端口被占用

**错误信息**：
```
Error: listen EADDRINUSE: address already in use 127.0.0.1:5175
```

**解决方案**：

查找占用端口的进程：
```bash
# Mac/Linux
lsof -i :5175

# Windows
netstat -ano | findstr :5175
```

终止进程或更换端口。

### 问题3：图片无法加载

**原因**：直接打开 HTML 文件而非使用服务器

**解决方案**：确保使用 HTTP 服务器运行项目

### 问题4：页面显示异常

**检查步骤**：
1. 确认浏览器版本（推荐 Chrome 90+）
2. 检查控制台错误信息（F12）
3. 清除浏览器缓存（Ctrl+Shift+Delete）

---

## 生产环境部署

### 使用 Nginx

1. 安装 Nginx
2. 配置 nginx.conf：

```nginx
server {
    listen 5175;
    server_name 127.0.0.1;
    
    root /path/to/agent;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

3. 重启 Nginx：
```bash
nginx -s reload
```

### 使用 PM2（持久化运行）

1. 安装 PM2：
```bash
npm install -g pm2
```

2. 创建 `ecosystem.config.js`：
```javascript
module.exports = {
  apps: [{
    name: 'ai-agent-workflow',
    script: 'npx',
    args: 'http-server -p 5175 -a 127.0.0.1',
    cwd: '/path/to/agent'
  }]
}
```

3. 启动应用：
```bash
pm2 start ecosystem.config.js
pm2 save
pm2 startup
```

---

## 更新项目

```bash
# 拉取最新代码
git pull origin master

# 更新依赖
npm install

# 重启服务
npm run dev
```

---

## 联系支持

遇到问题？请访问：
- 项目仓库：http://123.60.55.248:3000/Duguay/agent
- 提交 Issue：http://123.60.55.248:3000/Duguay/agent/issues

---

最后更新：2024-08-24