# 🚀 部署指南

将 GLM-4 语音聊天部署到公网的完整指南。

---

## 部署方式对比

| 方式 | 难度 | 成本 | 适用场景 |
|------|------|------|---------|
| **Vercel**（推荐） | ⭐ | 免费 | 小型项目、快速原型 |
| **Netlify** | ⭐ | 免费 | 个人网站、博客 |
| **GitHub Pages** | ⭐⭐ | 免费 | 静态网站 |
| **阿里云 OSS** | ⭐⭐ | 按流量计费 | 中国用户首选 |
| **自建服务器** | ⭐⭐⭐ | 按月付费 | 企业级应用 |

---

## 方式 1: Vercel 部署（最简单）

### 前置条件

- GitHub 账号
- Vercel 账号（注册：[vercel.com](https://vercel.com)）

### 步骤

1. **上传到 GitHub**

```bash
# 在 GitHub 上创建新仓库，名为 glm-4-voice-chat

# 本地初始化
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USERNAME/glm-4-voice-chat.git
git push -u origin main
```

1. **关联 Vercel**

- 访问 [https://vercel.com/new](https://vercel.com/new)
- 选择你的 GitHub 仓库
- 点击 "Deploy"
- 等待 1-2 分钟

✅ **完成！** 你的应用已部署到 `https://glm-4-voice-chat.vercel.app`

1. **配置环境变量**（可选）

在 Vercel 项目设置中添加：

```
GLM_API_KEY=your-api-key-here
```

### 优点

- 免费
- 自动 HTTPS
- 分布式全球 CDN
- 每次 git push 自动部署

### 缺点

- 需要 GitHub 账号
- 构建时间可能较长

---

## 方式 2: Netlify 部署

### 步骤

1. **连接 GitHub**

- 访问 [https://app.netlify.com/signup](https://app.netlify.com/signup)
- 选择 "GitHub"
- 授权并选择仓库

1. **配置构建**

创建 `netlify.toml` 文件：

```toml
[build]
  command = "npm run build"
  publish = "dist"

[dev]
  command = "npm run dev"
  port = 3000

[context.production]
  environment = { NODE_ENV = "production" }
```

1. **部署**

Push 到 main 分支，Netlify 会自动部署。

---

## 方式 3: GitHub Pages 部署

### 步骤

1. **编辑 `vite.config.ts`**

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/glm-4-voice-chat/',  // 改为你的仓库名
})
```

1. **构建和部署**

```bash
npm run build

# 创建 gh-pages 分支并推送
git subtree push --prefix dist origin gh-pages
```

1. **在 GitHub 设置中启用 Pages**

- 仓库 → Settings → Pages
- 选择 "gh-pages" 分支
- 保存

✅ 你的应用会部署到 `https://YOUR_USERNAME.github.io/glm-4-voice-chat`

---

## 方式 4: 阿里云 OSS（中国优化）

### 适用于：中国用户，需要更好的访问速度

### 步骤

1. **创建 OSS Bucket**

```bash
# 安装阿里云 CLI
npm install -g @alicloud/cli

# 登录
aliyun configure

# 创建 bucket
aliyun oss mb oss://glm-voice-chat
```

1. **上传文件**

```bash
# 或使用 OSS 控制台手动上传 dist/ 目录
aliyun oss cp dist/ oss://glm-voice-chat/ --recursive
```

1. **配置自定义域名**

- OSS 控制台 → 绑定自定义域名
- 配置 HTTPS 证书

### 成本

- 存储：¥0.12/GB/月
- 流量：¥0.5/GB（国内）

---

## 方式 5: 自建服务器（Nginx）

### 前置条件

- 云服务器（ECS、VPS 等）
- SSH 访问权限
- 已安装 Nginx

### 步骤

1. **上传文件到服务器**

```bash
# 本地执行
scp -r dist/ user@your-server.com:/home/user/
```

1. **配置 Nginx**

编辑 `/etc/nginx/sites-available/default`：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    # 重定向到 HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    # SSL 证书配置
    ssl_certificate /etc/ssl/certs/your-cert.crt;
    ssl_certificate_key /etc/ssl/private/your-key.key;

    root /home/user/dist;
    index index.html;

    # 支持 SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 缓存静态文件
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 允许麦克风访问
    add_header Permissions-Policy "microphone=*" always;
}
```

1. **重启 Nginx**

```bash
sudo systemctl restart nginx
```

✅ 应用已上线：`https://your-domain.com`

### SSL 证书获取

免费方案：使用 Let's Encrypt

```bash
sudo apt install certbot
sudo certbot certonly --standalone -d your-domain.com
```

### 成本

- 服务器：¥20-100+/月（按配置）
- 域名：¥8-50/年
- SSL 证书：免费（Let's Encrypt）

---

## 方式 6: Docker 部署

### 创建 `Dockerfile`

```dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
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 80
CMD ["nginx", "-g", "daemon off;"]
```

### 构建和运行

```bash
# 构建镜像
docker build -t glm-voice-chat .

# 运行容器
docker run -p 80:80 glm-voice-chat

# 或推送到 Docker Hub
docker push your-username/glm-voice-chat
```

### 部署到 Docker Compose

```yaml
version: '3'
services:
  voice-chat:
    image: glm-voice-chat:latest
    ports:
      - "80:80"
    environment:
      - REACT_APP_API_URL=https://api.your-domain.com
```

---

## 环境变量配置

### Vite 中使用环境变量

创建 `.env.production`：

```env
VITE_API_URL=https://open.bigmodel.cn
VITE_API_KEY=your-key-here
VITE_TIMEOUT=30000
```

在代码中使用：

```typescript
const apiKey = import.meta.env.VITE_API_KEY;
```

### 保护敏感信息

**❌ 不要在代码中硬编码 API 密钥！**

方法 1: 使用后端代理

```typescript
// 前端
const response = await fetch('/api/voice', {
    method: 'POST',
    body: JSON.stringify(userData)
});

// 后端代理请求
app.post('/api/voice', async (req, res) => {
    const response = await fetch('https://open.bigmodel.cn/api/...', {
        headers: {
            'Authorization': `Bearer ${process.env.GLM_API_KEY}`
        }
    });
});
```

方法 2: 使用 CORS 代理服务

```bash
# 使用免费 CORS 代理
https://api.allorigins.win/raw?url=https://open.bigmodel.cn/...
```

---

## 性能优化

### 1. 开启 Gzip 压缩

**Nginx 配置：**

```nginx
gzip on;
gzip_types text/plain text/css text/javascript application/json;
gzip_min_length 1000;
gzip_vary on;
```

### 2. CDN 加速

使用 Cloudflare（免费）：

1. 访问 [cloudflare.com](https://cloudflare.com)
2. 添加你的域名
3. 修改 DNS 解析指向 Cloudflare

### 3. 资源优化

```bash
# 分析包体积
npm install -D vite-plugin-visualizer

# 看看哪些包太大
vite-plugin-visualizer
```

### 4. 缓存策略

```nginx
# 长期缓存静态文件
location ~* \.(js|css|jpg|png)$ {
    expires 1y;
}

# HTML 文件不缓存
location / {
    expires -1;
    add_header Cache-Control "no-cache, must-revalidate";
}
```

---

## 监控和日志

### Vercel 监控

- 访问 [vercel.com/dashboard](https://vercel.com/dashboard)
- 查看实时日志
- 监控性能指标

### 自建服务器日志

```bash
# 查看 Nginx 日志
tail -f /var/log/nginx/access.log
tail -f /var/log/nginx/error.log

# 或使用 PM2 管理应用
npm install -g pm2
pm2 start app.js --name "voice-chat"
pm2 logs
```

---

## 常见部署问题

### 问题 1: "麦克风无法使用"

**原因：** 部署的网站不是 HTTPS  
**解决：** 配置 SSL 证书

### 问题 2: "API 请求超时"

**原因：** Vercel 等平台有请求限制  
**解决：** 使用后端代理转发请求

### 问题 3: "大文件上传失败"

**原因：** 部分云平台有上传限制  
**解决：**

- 分块上传
- 使用 CDN

### 问题 4: "CORS 错误"

**原因：** 跨域请求被拒绝  
**解决：**

- 后端添加 CORS 头
- 使用 CORS 代理

```nginx
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
```

---

## 选择建议

### 🎯 快速上线（<1 小时）

→ **Vercel** 或 **Netlify**

### 💰 成本最低（免费）

→ **GitHub Pages** 或 **Vercel**

### 🚀 性能最优（国内用户）

→ **阿里云 OSS** + **CDN**

### 🔧 功能最灵活

→ **自建服务器（Nginx）**

### 🐳 容器化部署

→ **Docker** + **Docker Compose** 或 **Kubernetes**

---

## 💡 部署后的检查清单

- [ ] 网站可以正常访问
- [ ] HTTPS 证书有效
- [ ] 麦克风权限正常
- [ ] API 请求成功
- [ ] 静态文件加载快速
- [ ] 移动设备适配正常
- [ ] 性能监控已配置
- [ ] 错误日志已记录

---

**需要帮助？**

查看完整文档：[README.md](README.md)  
快速开始：[QUICKSTART.md](QUICKSTART.md)

祝部署顺利！🎉