Vibe Coding实现Supabase + Vercel完整部署

Vibe Coding实现Supabase + Vercel完整部署

前言

本文从零完整记录：Next.js前端项目搭建 → Supabase后端服务配置 → 本地调试验证 → Git托管 → Vercel一键部署，以及部署过程踩过的全部坑，手把手跑通一条完整上线链路。以登录注册为例，这也是Hello‑World般的存在！

项目名称：vibe‑coding

技术栈：Next.js 15 + Supabase Auth + Vercel 免费托管

Vibe Coding（氛围编程） ，由Andrej Karpathy提出的全新AI协作开发范式，开发者不再逐行手写全部代码，而是用自然语言描述产品需求、交互风格与功能目标，交给AI完成代码生成、调试纠错与迭代优化。我们本次实践正是一次典型的Vibe Coding完整落地：以登录注册这个Web界的Hello‑World作为原型，基于Next.js + Supabase快速搭建全栈应用，本地验证功能后一键部署至Vercel，走完从想法到线上可访问产品的完整链路，直观感受AI驱动下高效、轻量化的现代原型开发流程。

以下我没自己写过任何代码，全程与AI协作完成。

一、前期准备工作

1. GitHub（代码仓库）
2. Supabase（免费后端、数据库、登录认证）
3. Vercel（前端自动部署平台）

二、把想法告诉AI

比如简单的需求：如何使用 vercel+supabase 实现一个登陆注册页面？

三、Supabase后台关键配置

1. 进入 Supabase控制台 → Authentication → Settings
2. Site URL：本地调试填 http://localhost:3000

本地测试验证

协作AI在本地完成操作，执行 npm run dev，访问 localhost:3000/login

1. 输入邮箱密码注册账号
2. 使用账号登录，无报错 = 本地开发流程全部跑通
   
   至此不需要掌握什么编程知识，也没手动写什么代码，已经实现了本地跑的登录注册功能！

四、Vercel平台部署完整流程

1、代码推送到GitHub

1. 初始化git（新项目默认已经初始化）

2. 注意：.env.local 禁止提交到远程仓库
   .gitignore 文件必须包含下面一行

   .env*.local

环境变量属于敏感配置，线上环境全部在Vercel后台单独配置，不要上传密钥到GitHub。

2. Vercel导入GitHub仓库

1. 登录Vercel，点击 Add New Project
2. Import Git Repository，选中我们的 vibe‑coding 仓库
3. 直接先部署

3. 设置Environment Variables

左侧侧边栏直接存在独立菜单：Environment Variables， 添加两条环境变量：

Key	Value	勾选环境
NEXT_PUBLIC_SUPABASE_URL	Supabase项目URL	Production / Preview / Development（全部勾选）
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase匿名公钥	Production / Preview / Development（全部勾选）

4. 保存变量后重新部署 Redeploy

1. 左侧菜单打开 Deployments
2. 找到上一次失败的构建记录，点击右侧 ... → Redeploy
3. 等待30秒左右，构建状态变成 Ready，部署完成！

部署成功后生成3条域名：

1. 主域名：vibe‑coding‑flame.vercel.app
2. Git分支预览域名
3. 单次提交临时预览域名
   

5、上线收尾配置

回到 Supabase Authentication → URL Configuration

1. 修改 Site URL 为你的 Vercel正式域名
   
   

五、完整流程复盘 & 避坑总结

✅ 整个链路完整步骤

本地开发 → 本地环境变量调试 → Git提交（忽略本地密钥文件）→ Vercel导入仓库 → Vercel后台配置线上环境变量 → Redeploy重新构建 → Supabase配置线上回调域名 → 线上验证功能

❌ 本次实战踩坑清单

1. 本地测试的时候不要使用局域网 IP打开页面，否则可能跨域拦截，React 事件系统完全没有挂载 → onClick 全部失效，按钮点死都没反应。改用 localhost 访问页面，不要打开 IP 地址链接！浏览器地址输入：http://localhost:3000/login
2. git推送连接不上，检查github中SSH密钥填好了没有
3. 看清楚supabase给的key名字是什么，代码中读取的名字要与之对应。

至此，我们完整利用vibe coding，跑完了一套现代Web应用从0到上线的标准工程流程。从头到尾不需要手动写代码，只要告诉AI具体的需求，并协作完成必要操作即可。

---