name: deploy description: Guides Vercel deployment and PWA setup for petconnect-app. Use when deploying to Vercel, configuring PWA, adding to home screen, or troubleshooting deployment/auth/AI issues.
Deploy 部署技能
触发词:部署、Vercel、PWA、发布、上线、vercel 部署、PWA 安装
一、Vercel 部署流程
1. 导入项目
- 登录 Vercel → Add New → Project
- 选择 GitHub 仓库(如
pet-adoption-app) - 确认分支
main
2. 构建配置
| 配置项 | 值 |
|---|---|
| Framework Preset | Vite(自动检测) |
| Build Command | npm run build |
| Output Directory | dist |
| Root Directory | ./ |
项目已有 vercel.json,可覆盖上述配置。
3. 环境变量(必填)
在 Vercel → Settings → Environment Variables 添加:
| Key | 必填 | 说明 |
|---|---|---|
VITE_SUPABASE_URL | 是 | Supabase 项目 URL |
VITE_SUPABASE_ANON_KEY | 是 | Supabase Anon Key |
VITE_LLM_PROVIDER | 否 | deepseek / doubao / gemini,默认 deepseek |
VITE_DOUBAO_API_KEY | doubao 时 | 豆包 API Key |
VITE_DOUBAO_MODEL_ID | doubao 时 | 豆包推理接入点 ID(ep-xxx 或预置模型 ID) |
VITE_DEEPSEEK_API_KEY | deepseek 时 | DeepSeek API Key |
VITE_GEMINI_API_KEY | gemini 时 | Gemini API Key |
注意:环境变量修改后必须 Redeploy 才能生效(Vite 在构建时注入)。
4. Supabase URL 配置
部署完成后,在 Supabase Dashboard → Authentication → URL Configuration:
- Redirect URLs:添加
https://<你的项目>.vercel.app/(如https://pet-adoption-app-omega.vercel.app/) - Site URL:可改为生产域名
否则登录/注册后重定向会失败。
二、PWA 流程
1. 依赖与配置
项目已集成 vite-plugin-pwa,vite.config.ts 中已配置 VitePWA 插件及 manifest。
2. 图标资源
图标位于 public/pets/:
| 文件 | 用途 |
|---|---|
pwa-192x192.png | Manifest 小图标 |
pwa-512x512.png | Manifest 主图标 |
favicon.ico | 浏览器标签页 |
apple-touch-icon.png | iOS 主屏幕 |
3. 验证 PWA
- 部署后访问 Vercel 域名
- Chrome DevTools → Application → Manifest:检查名称、图标、theme_color
- Application → Service Workers:确认已注册
- 安卓:菜单 → 「添加到主屏幕」;桌面:地址栏安装图标
三、坑点速查
完整坑点见 reference.md。
| 坑点 | 快速处理 |
|---|---|
| 提交信息乱码 | 提交信息请使用英文;若已乱码,用 git commit -F <文件> 修正,见 github-batch-commits |
| AI 回复失败 | 配置 VITE_LLM_* 环境变量并 Redeploy |
| 注册成功登录失败 | Supabase 邮箱未验证,查 auth.users.email_confirmed_at |
| 登录重定向失败 | Supabase Redirect URLs 添加 Vercel 域名 |
| 环境变量不生效 | 修改后必须 Redeploy |
四、检查清单
部署前:
- 环境变量已在 Vercel 配置(含 Supabase、LLM)
- Supabase Redirect URLs 已添加 Vercel 域名
部署后:
- 访问域名可正常打开
- 登录/注册流程正常
- AI 智能体(若配置)可正常回复
- PWA 可「添加到主屏幕」
调试:
- Supabase 数据:使用 supabase-calls 的
execute_sql查 auth.users、profiles - AI 失败:浏览器控制台查看
[PetConnect Doubao]日志