94301c81a6
- 新增 OutlineWriterPanel 和 OutlineResultPanel 组件 - 重构服务器端数据库接口 (server/db.js) - 添加 LLM 服务模块 (server/llm.js) - 更新配置和设置面板 - 优化文档选择器和素材面板 - 更新部署文档和环境变量示例
225 lines
5.4 KiB
Markdown
225 lines
5.4 KiB
Markdown
# AI 写作工坊 - 生产环境部署指南
|
||
|
||
## 🏗️ 项目架构
|
||
|
||
本项目为 **前端 + Node/Express 服务端** 架构：前端使用 Vite 构建，数据存储在服务端 SQLite，LLM 调用通过服务端代理。
|
||
|
||
### 技术栈
|
||
- **前端框架**: Vue 3 + Composition API
|
||
- **构建工具**: Vite
|
||
- **状态管理**: Pinia
|
||
- **数据存储**: SQLite（服务端）
|
||
- **API 调用**: 服务端 LLM 代理
|
||
|
||
## 📦 构建生产版本
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 预览生产版本
|
||
npm run preview
|
||
```
|
||
|
||
构建产物位于 `dist/` 目录，前端可静态托管，但仍需单独部署服务端 API。
|
||
|
||
---
|
||
|
||
## 🚀 部署方案
|
||
|
||
### 方案一：Vercel（推荐）
|
||
|
||
最简单的部署方式，自动 CI/CD。
|
||
|
||
1. **连接仓库**
|
||
- 访问 [vercel.com](https://vercel.com)
|
||
- 导入 Git 仓库
|
||
|
||
2. **配置环境变量**
|
||
- 前端：仅需设置 API 基地址（指向自建服务端）
|
||
- 服务端：配置 LLM 的 API Key 与模型
|
||
|
||
3. **部署**
|
||
- 每次 push 到 main 分支自动部署
|
||
|
||
### 方案二：Netlify
|
||
|
||
与 Vercel 类似的静态站点托管。
|
||
|
||
1. 在 Netlify 导入仓库
|
||
2. 构建命令: `npm run build`
|
||
3. 发布目录: `dist`
|
||
4. 在 Site settings > Environment 设置前端环境变量（如 `VITE_API_BASE`）
|
||
|
||
### 方案三：自托管 Nginx
|
||
|
||
适合私有化部署。
|
||
|
||
1. **构建**
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
2. **Nginx 配置**
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
root /var/www/ai-writer/dist;
|
||
index index.html;
|
||
|
||
# SPA 路由支持
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# 静态资源缓存
|
||
location /assets {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
|
||
# Gzip 压缩
|
||
gzip on;
|
||
gzip_types text/plain text/css application/json application/javascript;
|
||
}
|
||
```
|
||
|
||
3. **部署脚本**
|
||
```bash
|
||
#!/bin/bash
|
||
cd /path/to/ai-writer
|
||
git pull origin main
|
||
npm install
|
||
npm run build
|
||
rsync -avz dist/ /var/www/ai-writer/dist/
|
||
```
|
||
|
||
### 方案四：Docker
|
||
|
||
适合容器化部署。
|
||
|
||
1. **Dockerfile（前端静态站点）**
|
||
```dockerfile
|
||
# 构建阶段
|
||
FROM node:20-alpine as builder
|
||
WORKDIR /app
|
||
COPY package*.json ./
|
||
RUN npm ci
|
||
COPY . .
|
||
ARG VITE_API_BASE
|
||
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;"]
|
||
```
|
||
|
||
2. **构建并运行**
|
||
```bash
|
||
docker build \\
|
||
--build-arg VITE_API_BASE=http://your-api-host:3001/api \\
|
||
-t ai-writer .
|
||
|
||
docker run -d -p 8080:80 ai-writer
|
||
\n+> ⚠️ 注意：服务端 API 需单独部署（Node/Express + SQLite），并配置 `.env` 中的 LLM 密钥。
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ 安全注意事项
|
||
|
||
### API Key 安全
|
||
|
||
当前版本默认通过服务端代理调用 LLM，API Key 不再暴露在前端。
|
||
|
||
### 环境变量最佳实践
|
||
|
||
```bash
|
||
# 服务端 .env
|
||
DEEPSEEK_API_URL=https://api.deepseek.com/chat/completions
|
||
DEEPSEEK_API_KEY=xxx
|
||
|
||
# 前端 .env.production
|
||
VITE_API_BASE=https://your-api-host/api
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 推荐部署架构
|
||
|
||
```
|
||
┌─────────────┐
|
||
│ 用户浏览器 │
|
||
└──────┬──────┘
|
||
│
|
||
┌──────▼──────┐
|
||
│ CDN / 边缘 │ (Vercel/Netlify/CloudFlare)
|
||
└──────┬──────┘
|
||
│
|
||
┌────────────┴────────────┐
|
||
│ │
|
||
┌──────▼──────┐ ┌──────▼──────┐
|
||
│ 静态资源 │ │ Node API │
|
||
│ (dist/) │ │ + SQLite │
|
||
└─────────────┘ └──────┬──────┘
|
||
│
|
||
┌──────▼──────┐
|
||
│ LLM API │
|
||
│ (DeepSeek) │
|
||
└─────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 持续部署 (GitHub Actions 示例)
|
||
|
||
```yaml
|
||
# .github/workflows/deploy.yml
|
||
name: Deploy
|
||
|
||
on:
|
||
push:
|
||
branches: [main]
|
||
|
||
jobs:
|
||
deploy:
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- uses: actions/checkout@v4
|
||
|
||
- name: Setup Node
|
||
uses: actions/setup-node@v4
|
||
with:
|
||
node-version: 20
|
||
|
||
- name: Install & Build
|
||
run: |
|
||
npm ci
|
||
npm run build
|
||
env:
|
||
VITE_API_BASE: ${{ secrets.VITE_API_BASE }}
|
||
|
||
- name: Deploy to Server
|
||
# 根据您的部署目标配置
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 总结
|
||
|
||
| 方案 | 复杂度 | 适用场景 | 成本 |
|
||
|-----|-------|---------|-----|
|
||
| Vercel | ⭐ | 快速上线、个人项目 | 免费 |
|
||
| Netlify | ⭐ | 同上 | 免费 |
|
||
| Nginx | ⭐⭐ | 私有化部署 | 服务器成本 |
|
||
| Docker | ⭐⭐⭐ | 企业级、容器编排 | 服务器成本 |
|
||
|
||
**推荐**：先用 Vercel 快速部署验证，后续根据需求迁移到自托管方案。
|