哈喽，大家好
我是阿星👋🏻
这两天阿星在研究怎么囫囵上线一个海外站。（因为我老觉得没有上线的东西等于不存在）
所以试了下全流程：代码推到恶👉🏻发布到vercel👉🏻连通supabase数据库👉🏻成功上线一个有数据储存功能的小项目
分享给大家我的踩坑经历：
1、随便做个网站发到github
这次囫囵上站尝试主要有3个做法
1、大家既可以直接采用vercel里的模版
2、也可以参考这个站里的网站自己做一个👇🏻
3、可以自己随手做一个网站试试
划重点！
记得在写代码的时候让lovable来写
这个lovable很神奇啊，口碑在AI圈也很好
为数不多我想充钱的工具
你做到本文第六步就知道lovable给你省了多少个小时了
亲测deepseek、trae需要交流时间挺久
告诉lovable，一句话就给你接好supabase
只能说lovable太懂supabase了
我先做一个凑合的
因为之后要连通到数据库，如果你不让lovable给你写，如果你用的也不是vercel自带的模版
你需要在开发的过程中就把supabse初始化考虑进来
你需要自己配置下vercel和supabase连接时的key
在项目级别界面的settings中，添加：
第一个变量：
- Name:
NEXT_PUBLIC_SUPABASE_URL
第二个变量：
- Name:
NEXT_PUBLIC_SUPABASE_ANON_KEY
| Key | Value |
|---|---|
| NEXT_PUBLIC_SUPABASE_URL | 你的 Supabase Project URL |
| NEXT_PUBLIC_SUPABASE_ANON_KEY | 你的 Supabase Project anon / public key |
你需要自己处理
这是supabase的api文档
https://supabase.com/docs/guides/api/api-keys
Project URL：xxx
API Key：xxx
示例代码
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://okqxrigpjgoncvoflenz.supabase.co'
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
一顿配置后你会发现还是lovable好
做完了，然后我把项目推到github里
# 在本地编写/修改代码
# 测试功能
# 提交到GitHub
git add .
git commit -m "添加Supabase集成"
git push origin main
单独跟小白同学说一句
如果你后续修改了代码，是需重新推送代码到github
更新代码 → 推送到GitHub → Vercel自动部署
不需要手动更新Supabase和Vercel（环境变量配置一次即可）
关于注册github
登录不上的自己想办法
这个没办法教你
2、注册vercel
vercel是用来部署网站的，主攻前端，发到 Vercel 上的东西不需要传统服务器，是因为 Vercel 是一个提供 “无服务器 (Serverless)” 和 “静态网站” 托管的云平台。它会自动处理服务器的配置、部署、扩展和管理，用户只需关注代码就行了。
相当于网站的顺丰快递站，帮你承载发布各种网站
记住，登录的时候直接用github账号登录你的vercel
3、注册supabase
Supabase 是一个开源的 后端即服务 (BaaS) 平台，旨在为开发者提供构建应用的后端工具。
它和vercel就是一个组合拳。
4、连接vercel和github项目
登录 Vercel 后，你会进入控制台。
点击 “Add New...” 按钮，然后选择 “Project”。
此时你会看到你 GitHub 账户下的所有仓库列表。
如果你第一次使用，可能需要授权 Vercel 访问你的 GitHub 账户。
就可以看到所有已经导入的项目。
项目名称要注意会和你的域名有关系，
比如 your-project-name.vercel.app
想域名高级点要花钱，今天可以先用这个免费的。
另外就是预设框架这个地方，一定要选自己的框架，否则部署出来是变形的
不知道自己啥框架的让deepseek诊断下
到这一步，相当于没有数据库
vercel是两头都要好
又要和github好
又要和supabase好
没法存数据光有前端代码显示一下也不行啊
所以我们还要继续连——
5、连接vercel和supabase
点击右上角的install
就可以多看到它提示你新建或者选择已有的supabase
然后选择关联你在supabase上创建的项目、以及你在当前在vercel里的项目，两者相连，ok了。
它是通过直接读取你刚在github更新的表头直接和supabase联通
6、检查数据库是否真的连上了
登录你刚用github注册的supabase
在supabase里新建表格，用命令行手动创建表格
如果你用了lovable，现在就是直接复制他给你写的创建语句
这是lovable当时根据我的项目让我做表的sql语句
-- 创建愿景表
CREATE TABLE IF NOT EXISTS public.visions (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
user_id TEXT NOT NULL DEFAULT 'public_user',
content TEXT NOT NULL,
enhanced_text TEXT,
image_url TEXT,
image_prompt TEXT,
manifestation_count INTEGER DEFAULT 0 NOT NULL,
category TEXT DEFAULT 'general',
status TEXT DEFAULT 'active' CHECK (status IN ('active', 'completed', 'archived', 'withdrawn')),
metadata JSONB DEFAULT '{}'::jsonb,
created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL
);
-- 创建索引
CREATE INDEX IF NOT EXISTS visions_user_id_idx ON public.visions(user_id);
CREATE INDEX IF NOT EXISTS visions_created_at_idx ON public.visions(created_at DESC);
-- 更新时间触发器
CREATE OR REPLACE FUNCTION public.handle_updated_at()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = TIMEZONE('utc'::text, NOW());
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
CREATE TRIGGER handle_visions_updated_at
BEFORE UPDATE ON public.visions
FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at();
-- 启用RLS
ALTER TABLE public.visions ENABLE ROW LEVEL SECURITY;
-- RLS策略
CREATE POLICY "公共用户可读" ON public.visions
FOR SELECT USING (user_id = 'public_user' AND status != 'withdrawn');
CREATE POLICY "公共用户可写" ON public.visions
FOR INSERT WITH CHECK (user_id = 'public_user');
CREATE POLICY "公共用户可更新" ON public.visions
FOR UPDATE USING (user_id = 'public_user');
CREATE POLICY "公共用户可删除" ON public.visions
FOR DELETE USING (user_id = 'public_user');
-- 权限
GRANT SELECT, INSERT, UPDATE, DELETE ON public.visions TO anon;
然后我回到自己的愿景板一顿许愿
数据才顺利躺进supabase，我真棒
至此，小白已经完成了第一个前后端、数据库、部署发布的全流程。
在阿星看来，出海和自媒体是非常值得花时间的地方。所以仍旧会不断学习。
我是阿星，我们下期再见👋🏻
