1  # 部署指南 - Deploy to Vercel
  2  
  3  ## 📋 部署步骤
  4  
  5  ### 1. 准备代码
  6  
  7  确保你已经完成以下步骤：
  8  
  9  ```bash
 10  # 安装所有依赖
 11  npm run install-all
 12  
 13  # 测试本地运行
 14  npm run dev
 15  ```
 16  
 17  ### 2. 创建 GitHub 仓库并推送代码
 18  
 19  ```bash
 20  # 初始化 Git (如果还没有)
 21  git init
 22  
 23  # 添加所有文件
 24  git add .
 25  
 26  # 提交
 27  git commit -m "Initial commit"
 28  
 29  # 在 GitHub 创建新仓库，然后添加远程仓库
 30  git remote add origin https://github.com/你的用户名/仓库名.git
 31  
 32  # 推送代码
 33  git push -u origin main
 34  ```
 35  
 36  ⚠️ **重要**: 确保 `.gitignore` 已包含 `.env` 文件，不要提交敏感信息！
 37  
 38  ### 3. 在 Vercel 部署
 39  
 40  #### 方法一：通过 Vercel 网站
 41  
 42  1. 访问 [vercel.com](https://vercel.com)
 43  2. 使用 GitHub 账号登录
 44  3. 点击 "New Project"
 45  4. 导入你的 GitHub 仓库
 46  5. 配置项目设置：
 47     - **Framework Preset**: Other
 48     - **Root Directory**: 保持为空（根目录）
 49     - **Build Command**: `cd frontend && npm run build`
 50     - **Output Directory**: `frontend/build`
 51  
 52  #### 方法二：使用 Vercel CLI
 53  
 54  ```bash
 55  # 安装 Vercel CLI
 56  npm i -g vercel
 57  
 58  # 登录
 59  vercel login
 60  
 61  # 在项目根目录部署
 62  vercel
 63  
 64  # 生产环境部署
 65  vercel --prod
 66  ```
 67  
 68  ### 4. 配置环境变量
 69  
 70  在 Vercel 项目设置中添加以下环境变量：
 71  
 72  **Settings → Environment Variables** 添加：
 73  
 74  ```
 75  NOTION_API_KEY=你的Notion密钥
 76  NOTION_DATABASE_ID=你的数据库ID
 77  OPENAI_API_KEY=你的OpenAI密钥
 78  PORT=3000
 79  NODE_ENV=production
 80  ```
 81  
 82  ⚠️ **重要**: 
 83  - 确保所有环境变量都已添加
 84  - 需要重新部署才能生效
 85  - 可以在 Vercel Dashboard → Settings → Environment Variables 管理
 86  
 87  ### 5. 重新部署
 88  
 89  添加环境变量后，在 Vercel Dashboard 点击 "Redeploy" 重新部署项目。
 90  
 91  ---
 92  
 93  ## 🔧 项目配置说明
 94  
 95  ### Vercel 配置 (`vercel.json`)
 96  
 97  - API 路由 (`/api/*`) → 指向 `backend/server.js`
 98  - 前端路由 → 指向 `frontend/build`
 99  
100  ### 前端配置
101  
102  - 开发环境：使用 proxy 指向 `http://localhost:3001`
103  - 生产环境：自动使用当前域名 (`window.location.origin`)
104  
105  ### 后端配置
106  
107  - 开发环境：监听指定端口
108  - 生产环境：导出为 Vercel serverless 函数
109  
110  ---
111  
112  ## ✅ 验证部署
113  
114  部署成功后，访问你的 Vercel URL，检查：
115  
116  1. ✅ 首页能正常加载
117  2. ✅ API 健康检查：`https://你的域名.vercel.app/api/health` 返回 `{"status":"ok"}`
118  3. ✅ 数据能正常加载（检查浏览器控制台）
119  
120  ---
121  
122  ## 🐛 常见问题
123  
124  ### API 返回 404
125  
126  **原因**: 路由配置问题
127  
128  **解决**: 
129  - 检查 `vercel.json` 配置
130  - 确保 API 路由以 `/api/` 开头
131  - 重新部署
132  
133  ### 环境变量未生效
134  
135  **原因**: 需要重新部署
136  
137  **解决**: 
138  - 在 Vercel Dashboard 确认环境变量已添加
139  - 点击 "Redeploy" 重新部署
140  
141  ### 前端无法连接后端
142  
143  **原因**: API 路径错误
144  
145  **解决**: 
146  - 检查前端代码中的 API 调用路径
147  - 生产环境应该使用相对路径 `/api/...`
148  - 检查浏览器控制台的网络请求
149  
150  ### 构建失败
151  
152  **原因**: 依赖或配置问题
153  
154  **解决**:
155  ```bash
156  # 本地测试构建
157  cd frontend
158  npm run build
159  
160  # 检查错误信息
161  ```
162  
163  ---
164  
165  ## 📝 注意事项
166  
167  1. **敏感信息**: 永远不要提交 `.env` 文件到 GitHub
168  2. **API 限制**: Vercel 免费版有执行时间限制，适合中小型应用
169  3. **域名**: Vercel 会自动分配域名，也可以绑定自定义域名
170  4. **环境**: 可以在 Vercel 中为不同环境（Development, Preview, Production）设置不同的环境变量
171  
172  ---
173  
174  ## 🔄 更新代码
175  
176  每次推送代码到 GitHub，Vercel 会自动：
177  1. 检测到新的提交
178  2. 自动构建和部署
179  3. 生成预览 URL（Pull Request）
180  
181  ---
182  
183  ## 📚 更多资源
184  
185  - [Vercel 文档](https://vercel.com/docs)
186  - [Node.js on Vercel](https://vercel.com/docs/concepts/functions/serverless-functions)
187  - [React on Vercel](https://vercel.com/docs/concepts/deployments/overview)
188