Back to Details

vercel-deploy

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vercel Deploy

Vercel 部署

Deploy the project to Vercel and push all environment variables.
This skill is called by the 
vibe-ship
orchestrator. 
FRAMEWORK
= 
nextjs
or 
vite
.
将项目部署至Vercel并推送所有环境变量。
该技能由
vibe-ship
编排器调用。
FRAMEWORK
取值为
nextjs
或
vite
。

1. Add SPA rewrite rule (Vite only)

1. 添加SPA重写规则（仅Vite适用）

Skip this step entirely for Next.js.
If FRAMEWORK = vite — create 
vercel.json
at the project root:
json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
This prevents 404 errors when users navigate directly to a URL (e.g. 
/dashboard
) in a single-page app.
Commit the file before deploying:
bash
git add vercel.json && git commit -m "chore: add Vercel SPA rewrite rule"
Next.js需完全跳过此步骤。
若FRAMEWORK = vite — 在项目根目录创建
vercel.json
文件：
json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
此配置可避免单页应用中用户直接访问URL（如
/dashboard
）时出现404错误。
部署前提交该文件：
bash
git add vercel.json && git commit -m "chore: add Vercel SPA rewrite rule"

2. Set up Vercel

2. 配置Vercel

Invoke 
vercel:setup
.
This installs the Vercel CLI if missing, links the project to a Vercel account, and creates a new project if one doesn't exist.
调用
vercel:setup
命令。
该命令会在缺失时安装Vercel CLI，将项目关联至Vercel账号，若项目不存在则创建新的Vercel项目。

3. Push environment variables

3. 推送环境变量

Print the list of keys that need to be added to Vercel:
bash
grep -v '^#' .env.local | grep '=' | cut -d= -f1
Ask the user to add each key to Vercel by running this command for each one — they'll be prompted to paste the value securely:
bash
vercel env add <KEY_NAME> production
If a key already exists on Vercel, the CLI will ask to overwrite — confirm with 
y
.
打印需要添加至Vercel的所有变量键名：
bash
grep -v '^#' .env.local | grep '=' | cut -d= -f1
请用户为每个键名执行以下命令，将其添加至Vercel — 系统会提示用户安全地粘贴变量值：
bash
vercel env add <KEY_NAME> production
若该键名已存在于Vercel，CLI会询问是否覆盖 — 输入
y
确认即可。

4. Deploy

4. 执行部署

Invoke 
vercel:deploy
.
调用
vercel:deploy
命令。

5. Update Supabase site_url

5. 更新Supabase的site_url

Capture the production URL from the deploy output and update 
supabase/config.toml
so magic link emails redirect to the live app instead of localhost:
toml
[auth]
site_url = "https://<your-vercel-url>.vercel.app"
additional_redirect_urls = ["http://localhost:5173", "http://localhost:3000"]
Ask the user to push the updated config by running in their terminal:
bash
supabase config push
This ensures magic links work in both local dev and production without any config changes between environments.
从部署输出中获取生产环境URL，更新
supabase/config.toml
文件，确保魔法链接邮件重定向至线上应用而非本地环境：
toml
[auth]
site_url = "https://<your-vercel-url>.vercel.app"
additional_redirect_urls = ["http://localhost:5173", "http://localhost:3000"]
请用户在终端中执行以下命令，推送更新后的配置：
bash
supabase config push
此配置确保魔法链接在本地开发环境和生产环境均能正常工作，无需在不同环境间修改配置。

6. Validate

6. 验证部署

After the deploy completes, open the printed live URL and confirm:
  • The app loads without a blank screen or error
  • The login page is reachable
  • Data loads from Supabase
If anything looks wrong, invoke 
vercel:logs
to inspect the deployment output.
Report: "✓ Deployed. Live at: <URL>"
部署完成后，打开输出的线上URL，确认以下内容：
  • 应用可正常加载，无空白页面或错误
  • 登录页面可正常访问
  • 可从Supabase加载数据
若出现异常，调用
vercel:logs
查看部署输出日志。
最后反馈："✓ 部署完成。线上地址：<URL>"