出海：小白快速出海上站指南：Vercel + Supabase先上个站再说

出海：小白快速出海上站指南：Vercel + Supabase先上个站再说 🌊 出海：小白快速出海上站指南：Vercel + Supabase先上个站再说 Modified October 13, 2025 亲测deepseek、trae需要交流时间挺久 告诉lovable，一句话就给你接好supabase 只能说lovable太懂supabase了 我先做一个凑合的 因为之后要连通到数据库，如果你不让lovable给你写，如果你用的也不是vercel自带的模版 你需要在开发的过程中就把supabse初始化考虑进来 你需要自己配置下vercel和supabase连接时的key 在项目级别界面的settings中，添加： 第一个变量： • Name: NEXT PUBLIC SUPABASE URL 第二个变量： • Name: NEXT PUBLIC SUPABASE ANON 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，我真棒 至此，小白已经完成了第一个前后端、数据库、部署发布的全流程。 亲测deepseek、trae需要交流时间挺久 告诉lovable，一句话就给你接好supabase 只能说lovable太懂supabase了 我先做一个凑合的 因为之后要连通到数据库，如果你不让lovable给你写，如果你用的也不是vercel自带的模版 你需要在开发的过程中就把supabse初始化考虑进来 你需要自己配置下vercel和supabase连接时的key 在项目级别界面的settings中，添加： 第一个变量： • Name: NEXT PUBLIC SUPABASE URL 第二个变量： • Name: NEXT PUBLIC SUPABASE ANON 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，我真棒 至此，小白已经完成了第一个前后端、数据库、部署发布的全流程。 在阿星看来，出海和自媒体是非常值得花时间的地方。所以仍旧会不断学习。 我是阿星，我们下期再见👋🏻 原文链接：https://mp.weixin.qq.com/s/NZdn8BHC QvgSMe9wSJgcw 哈喽，大家好 我是阿星👋🏻 这两天阿星在研究怎么囫囵上线一个海外站。（因为我老觉得没有上线的东西等于不存在） 所以试了下全流程：代码推到git👉🏻发布到vercel👉🏻连通supabase数据库👉🏻成功上线一个有数据储存功能的小项目 分享给大家我的踩坑经历： 1、随便做个网站发到github 这次囫囵上站尝试主要有3个做法 1、大家既可以直接采用vercel里的模版 2、也可以参考这个站里的网站自己做一个👇🏻 3、可以自己随手做一个网站试试 划重点！ 记得在写代码的时候让lovable来写 这个lovable很神奇啊，口碑在AI圈也很好 为数不多我想充钱的工具，最省事的地方在于——我朋友的用法：lovable里直接连接github，这样就能用 trae 打开代码文件夹直接改代码了，推到 github 之后 lovable 也会自动同步到最新的版本，需要 supabase 的时候就让 lovable 上，其他时候可以在本地改 你做到本文第六步就知道lovable给你省了多少个小时了