Next.js+Supabase+R2：手把手搭建Serverless壁纸站，月成本接近$0-北京尧图网络

上个月我把自己的壁纸站从传统服务器迁到了纯 Serverless 架构技术栈就是 Next.js Supabase Cloudflare R2。跑完一个月再看账单所有固定开销加起来真的接近 $0。这不是标题党我把整个壁纸销售平台的完整拆解写在这里架构选型、数据库设计、上传下载流程、支付回调、read ECONNRESET 这类典型坑以及免费额度到底够不够用全部摊开讲。这套方案解决的问题是不需要买服务器、不需要天天盯运维就能把一个能在线付费下载壁纸的小店跑起来。适合独立开发者、设计师、数字商品卖家也适合想学全栈的 Next.js 新手——你不用先把各种框架全学一遍跟着这套组合走一遍基本就理解了“前端数据库对象存储”三件事怎么通过服务商协作完成。先给出我对三个服务的定位Next.js 负责页面、接口、服务端逻辑Supabase 负责数据库、登录鉴权、行级权限Cloudflare R2 负责图片存储和分发。三者各管一摊互不打架而且都有明确的免费额度叠加起来正好覆盖一个小型壁纸商城的全部需求。1. 为什么是这三件套成本、省心、下限高1.1 传统服务器方案到底差在哪我之前用一台 2G 内存的云服务器加面板跑过类似的站点月费看着不贵但真正烧钱的是时间。先不说安全补丁要定期打光是 PHP 进程把内存吃满、MySQL 半夜连接数爆掉就够你爬起来折腾半天。数字商品站的流量也不稳定可能前三天没人访问第四天来了波 SEO 流量直接内存告急你又得半夜去改配置。对独立开发者来说机会成本远比那点服务器费用高。我真正想要的是“流量来多少都能撑住、没人访问时不产生闲置费用”的方案。Serverless 把服务器这个底层概念拆掉了按请求计费免费额度还特别宽。这三个平台组合在一起恰好每条链路都不需要我维护底层基础设施。1.2 Next.js 在项目里具体管了什么Next.js 不是普通的 React 框架它自带文件路由、服务端渲染、API 路由、中间件和图片优化。这意味着我可以在一个代码库里完成三件事第一把壁纸列表、详情页渲染成 HTML给搜索引擎正常的索引结构第二写 API Routes 处理支付、创建订单、生成下载链接第三用中间件做登录态校验和管理员鉴权。部署直接走 Vercel主流的 Next.js 项目都能零配置托管。Vercel 免费版每天有 100 次部署、100GB 流量对壁纸站这种以图片缓存为主、页面本身体积不大的场景相当耐用。另一个关键点是它的边缘网络节点比较密集跨地域访问的体验虽然不是最优但配合 Cloudflare 的 CDN整体比单台 VPS 稳得多。1.3 Supabase一个数据库省掉一半开发时间Supabase 本质是托管的 PostgreSQL但它在数据库外面给你包了一层非常实用的东西自带的 Auth、Storage、Realtime以及最重要的 Row Level Security。做一个小型壁纸站登录、密码找回、权限控制、文件上传都能在 Supabase 面板里完成不需要再单独接一个 BaaS 服务。我最看重的是数据库本身是标准 Postgres。后续真做大了可以直接导出数据迁移到任何 Postgres 托管服务不会被平台锁死。SQL、索引、外键这些能力也都还在遇到数据问题还能用 SQL 直接排查不像某些过于简单的后端平台那样会卡住你。1.4 Cloudflare R2对象存储里少见的零出口费R2 的 API 和 AWS S3 完全兼容但它的核心卖点是没有“出口流量费”。这一点放在壁纸项目里太关键了壁纸图片动辄几百 KB 到几 MB如果走传统对象存储流量费会慢慢吃掉利润。R2 免费层包含 10GB 存储、每月 1000 万次读请求小型壁纸站大概率根本用不完。同时 R2 自带 Cloudflare 的全球边缘网络图片可以设置 Cache-Control 让 CDN 缓存。细节上R2 的公开桶可以通过自定义域名直接访问。我给预览图绑定了一个自己的域名这样浏览器里不会出现跨域问题后续换存储也不影响图片 URL 结构。2. 架构设计与数据模型2.1 从一次购买请求看整个链路梳理架构最好的方式是跟着一笔订单走一遍。用户访问你的站点打开壁纸列表页Next.js 的服务端组件直接向 Supabase 发起 SELECT 查询只把 status 为 published 的壁纸基本信息返回给页面。预览图从 R2 的公开桶加载图片走 CDN。用户点下购买按钮前端把壁纸 ID 和价格发给 Next.js 的 API Route /api/checkout服务端创建一条 Stripe Checkout Session带上壁纸信息和成功、取消跳转地址。用户跳到 Stripe 完成支付后Stripe 会回调你的 /api/webhook 接口你在这里做两件事把订单状态更新为 paid并生成一个 R2 下载签名 URL。用户回到成功页前端通过订单接口拿到下载链接点击下载。2.2 数据表设计直接用 SQL 建表我建了两张核心表。第一张是 wallpapers存壁纸商品信息create table public.wallpapers ( id uuid primary key default gen_random_uuid(), title text not null, slug text unique not null, description text default , price_cents integer not null check (price_cents 0), preview_key text not null, original_key text not null, width integer, height integer, tags text[] default {}, status text not null default draft check (status in (draft,published,archived)), created_at timestamptz default now(), updated_at timestamptz default now() );preview_key 和 original_key 存的是 R2 对象 key不是完整 URL这样可以随时切换分发域名不用改数据库。第二张是 orders记录所有支付订单create table public.orders ( id uuid primary key default gen_random_uuid(), email text not null, wallpaper_id uuid references public.wallpapers(id) on delete cascade, amount_cents integer not null, status text not null default pending check (status in (pending,paid,failed,refunded)), stripe_session_id text unique, download_token_hash text, created_at timestamptz default now(), paid_at timestamptz );download_token_hash 用来做一次性下载令牌防止订单 URL 被无限次套用。实际项目里还可以加订阅表或用户资料表但最小闭环上面两张表就够了。2.3 行级权限别把后台数据全暴露出去Supabase 的 RLS 是关键设计。对壁纸表任何人都能读 published 记录但不能写对订单表用户只能看自己的订单管理员才能看全部。两个策略例子alter table public.wallpapers enable row level security; create policy can read published wallpapers on public.wallpapers for select using (status published); alter table public.orders enable row level security; create policy orders visible to owner or admin on public.orders for select using ( auth.uid() in ( select user_id from public.profiles where is_admin true ) or email auth.jwt() - email );需要注意如果你让客户端直连 Supabase 去读订单表RLS 会拦一部分但真正的敏感操作我仍然放在服务端 API 里用 service_role key 或管理员鉴权来做。不要把 RLS 当成唯一防线。3. 关键实现从初始化到第一笔收款3.1 项目初始化和依赖安装初始化命令很简单npx create-next-applatest wallpaper-store cd wallpaper-store npm install supabase/supabase-js supabase/ssr stripe aws-sdk/client-s3.env.local 里至少要有这些变量NEXT_PUBLIC_SUPABASE_URL... NEXT_PUBLIC_SUPABASE_ANON_KEY... R2_ACCOUNT_ID... R2_ACCESS_KEY_ID... R2_SECRET_ACCESS_KEY... R2_BUCKET_NAME... R2_PUBLIC_BASE_URLhttps://img.example.com STRIPE_SECRET_KEY... STRIPE_WEBHOOK_SECRET...注意 Supabase 有两把 keyanon key 给浏览器用service_role key 只能放在服务器端。R2 的 key 在 Cloudflare 面板的 R2 管理里创建 Access Token区域填 auto 就行。第一次配置时最容易犯的错是把 secret 直接写进 NEXT_PUBLIC_ 前缀变量里等于把密钥发到了前端。3.2 把壁纸传进 R2R2 兼容 S3 协议所以用 AWS SDK 就能写。你要做的是在管理后台页面里选一个文件前端把文件 POST 到 Next.js 的 /api/admin/upload服务端校验登录态后用 S3 client 直接 PUT 到 R2import { S3Client, PutObjectCommand } from aws-sdk/client-s3; const s3 new S3Client({ region: auto, endpoint: https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com, credentials: { accessKeyId: process.env.R2_ACCESS_KEY_ID!, secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!, }, }); export async function uploadToR2(key: string, body: Buffer, contentType: string) { await s3.send(new PutObjectCommand({ Bucket: process.env.R2_BUCKET_NAME!, Key: key, Body: body, ContentType: contentType, CacheControl: public, max-age31536000, immutable, })); }这里 body 是 Buffer实际在 API Route 里要先把 File 读成 ArrayBuffer。上传前我做了个处理同一张壁纸会传两份一份是加了水印的预览图 preview/xxx.jpg公开读一份是原图 originals/xxx.jpg不公开只有下单后通过签名 URL 才能下载。预览图的水印建议在服务端生成比如用 sharp 库把半透明文字或 Logo 画到图片上比前端 canvas 水印安全得多因为请求能直接改。3.3 商品列表和详情页列表页用服务端组件直接查 Supabase。先写一个 server clientimport { createServerClient } from supabase/ssr; import { cookies } from next/headers; export function createClient() { return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll: () cookies().getAll(), setAll: () {}, }, } ); }然后查询const supabase createClient(); const { data: wallpapers } await supabase .from(wallpapers) .select(id,title,slug,price_cents,preview_key,width,height) .eq(status, published) .order(created_at, { ascending: false });图片 URL 直接用 R2_PUBLIC_BASE_URL 拼接 preview_key。用 next/image 加载时要把 R2 的域名加入 remotePatterns这一步特别容易忘很多新手卡在图片白屏不显示。3.4 创建 Stripe 收款会话用户点购买后前端 POST /api/checkout传壁纸 ID。服务端逻辑const wallpaper await getWallpaperById(id); const session await stripe.checkout.sessions.create({ mode: payment, line_items: [{ price_data: { currency: usd, product_data: { name: wallpaper.title }, unit_amount: wallpaper.price_cents, }, quantity: 1, }], success_url: ${origin}/success?session_id{CHECKOUT_SESSION_ID}, cancel_url: ${origin}/shop, metadata: { wallpaper_id: wallpaper.id, email: userEmail || }, }); await supabase.from(orders).insert({ email: userEmail || session.customer_details?.email || , wallpaper_id: wallpaper.id, amount_cents: wallpaper.price_cents, status: pending, stripe_session_id: session.id, });这里有一个实战经验不要强制用户先登录再购买。壁纸站是轻决策商品用户大概率随手买一张再让他注册登录就流失了。让他在 Stripe 里填邮箱支付完把下载链接发到邮箱同时成功页也能看到下载按钮这样转化率明显提升。3.5 Webhook 回调和自动发货新建 /api/webhook 路由这个接口只给 Stripe 调用所以要校验签名const sig req.headers.get(stripe-signature)!; const event stripe.webhooks.constructEvent(payload, sig, process.env.STRIPE_WEBHOOK_SECRET!);然后处理 checkout.session.completed。拿到 session 里的 metadata.wallpaper_id把对应订单改成 paid接着生成下载令牌const r2 new S3Client({ ... }); const objectParams { Bucket: process.env.R2_BUCKET_NAME!, Key: wallpaper.original_key, }; const url await getSignedUrl(r2, new GetObjectCommand(objectParams), { expiresIn: 300 });签名 URL 默认只有 5 分钟有效期但用户访问的下载页面实际是进入订单详情接口每次即时生成新链接这样即使 URL 暴露、过期也不用重发库里不需要存最终下载地址。这里生成签名 URL 依赖 AWS SigV4aws-sdk/s3-request-presigner 可以直接支持 R2不用额外写签名逻辑。3.6 管理后台的轻量实现我没有单独做后台项目直接在同一个 Next.js 里加 /admin 目录。用 Supabase Auth 做登录页登录后校验 profiles.is_admin 字段再进入管理页可以调用 /api/admin/upload、/api/admin/wallpapers 这些接口。中间件里做未登录跳转export async function middleware(req: NextRequest) { const supabase createServerClient(...); const { data: { user } } await supabase.auth.getUser(); if (!user) { return NextResponse.redirect(new URL(/login, req.url)); } return NextResponse.next(); }管理后台功能不用做太重能上传壁纸、修改价格、上下架商品就够了。所有写操作都走服务端 API并在 API 里再校验一次管理员身份不要只依赖中间件跳转。4. 常见问题与排查技巧实录4.1 read ECONNRESET 报错的排查经历有朋友问我为什么 Next.js 里偶尔会报 supabase read ECONNRESET。这个错误本质是 TCP 连接被对端重置常见场景是网络环境切换、防火墙中断空闲连接或者客户端和连接池之间失去同步。我踩过的场景是本地开发时用 Supabase 客户端频繁查数据切了几次网络后连接被挂起再请求就报 ECONNRESET。解决分几层先升级 supabase/supabase-js 和 supabase/ssr 到最新版其次在服务端用模块级单例保存 Supabase client避免每次请求都新建连接再给查询加一个指数退避重试export async function withRetryT(fn: () PromiseT, max 3): PromiseT { let attempt 0; while (attempt max) { try { return await fn(); } catch (err: any) { if (!/ECONNRESET|ETIMEDOUT|503/.test(err?.message ?? )) throw err; attempt; await new Promise((r) setTimeout(r, 200 * attempt)); } } throw new Error(retry failed); }另外如果你部署在 Vercel建议把项目的 Region 设置得离数据库近一点。Supabase 面板里也可以看连接监控如果连接数动不动满多数情况是客户端没有复用连接。4.2 图片防盗原图别公开壁纸站最怕原图被白嫖。我的方案是原图目录和预览图目录分开原图目录不开放公共读权限只有服务端能读。预览图加上水印原图只在生成签名 URL 后允许短时访问。R2 的公开桶默认所有对象都可以匿名 GET所以不想公开的桶一定不要打成 public。还需要注意R2 的对象级访问控制和 S3 不完全一样想细粒度控制统一走签名 URL 更省心。4.3 Stripe Webhook 本地调试别用 dashboard 手点支付成功来测试直接装 Stripe CLIstripe listen --forward-to localhost:3000/api/webhook它会打印一个 whsec_ 开头的临时 webhook secret填进 .env.local。然后在另一个终端用 curl 触发测试事件。这个流程我一开始没搞好导致本地联调支付回调基本靠猜。真到生产环境记得去 Stripe 后台把正式端点的 secret 配好。4.4 免费额度会先撞上哪个临界点Supabase 免费版数据库 500MB、Storage 1GB壁纸原图如果很多存储会先顶到。我的做法是上传时用 sharp 把原图转成 WebP并控制最大边在 3840px 以内预览图控制在 1600px 并压缩到 80% 质量。这样一张图从 8MB 降到 1MB 左右10GB 的 R2 免费存储能用比较久。数据库方面订单数据量增长很慢索引建好基本不慌。4.5 R2 绑定自定义域名与 CORSR2 的自定义域名可以绑定到自己的域名推荐直接用 Cloudflare DNS 管理。绑定后要在 R2 桶的 CORS 配置里加上网站域名否则浏览器里 fetch 上传或某些场景会遇到跨域报错。next/image 的加载本身不受 CORS 限制但如果你在管理后台上传时用 fetch 直接 PUT必须把 CORS 策略配好。CORS 配置在 Cloudflare 面板里的 R2 桶 Settings 里做允许的 Origin 填你的站点域名Allowed Methods 至少包含 GET、PUT、HEAD。4.6 一个容易忽略的小细节环境变量不生效Next.js 改了 .env.local 需要重启 dev server。这个坑很小但特别常见我见过不少人在 .env.local 里新增变量后页面里一直拿到 undefined却以为是代码写错了。另外不要把 SERVICE_ROLE 这种 key 放进 NEXT_PUBLIC_ 前缀的变量里否则打包后会被直接注入到浏览器代码中。5. 月成本接近 $0 是真的吗免费额度账单拆解5.1 各项服务的免费额度对照这里放一张我整理过的对照表服务免费额度超出后价格Vercel Hobby100GB 带宽/月、每天 100 次部署、1 个项目Pro 20 美元/月Supabase Free500MB Postgres、1GB Storage、5 万月活Pro 25 美元/月Cloudflare R210GB 存储、每月 1000 万次读、100 万次写按量付费几乎零出口费Stripe无固定月费按成功交易抽成每笔约 2.9% 30 美分具体看地区域名每年十几到几十美元不等固定小支出如果你只是自己卖壁纸订单量几十到几百单Vercel、Supabase、R2 三块几乎都是免费的。真正的硬成本是域名年费和 Stripe 的交易抽成这就是为什么我说“月成本接近 $0”而不是“永远 $0”。5.2 什么时候该升级套餐当你开始感受到免费额度不够时通常已经赚到钱了这时候升级很划算。比如 Supabase 免费版限制主要在 MAU 超 5 万、数据库超 500MB、Storage 超 1GB这三项说明已经有稳定流量和订单了。Vercel 免费版最大的限制是 Hobby 不支持团队和某些高级部署功能单个人使用会一直够。R2 的计费在对象存储里属于比较良心的免费层之外是每 GB 月存储 0.015 美元、每 100 万次读 0.36 美元出口流量为 0。对数字商品站来说这个费用几乎可以忽略不计。真到了每天几十万请求量级再考虑更复杂的 CDN 缓存策略也不迟。5.3 省流量的三个习惯第一给 R2 绑定自定义域名后设置 Cache-Control让浏览器和 CDN 都能缓存预览图避免重复回源拉取。第二把壁纸列表页做成静态生成加增量更新定时触发重新验证而不是每次请求都打 Supabase。第三Supabase 查询只 SELECT 需要的字段不要用 select * 把大字段全拖回来。这些小习惯能让你在免费额度里待更久。这套方案真正的价值不在于省那十几美元而在于把运维成本压缩到几乎为零。哪怕明天流量翻十倍需要做的也只是在面板里调一下配额不会出现半夜爬起来重启服务的情况。最后分享一个我自己的体会独立开发者做数字商品站最大的敌人不是技术而是上线太慢。Next.js Supabase Cloudflare R2 这套组合能让你在几天内把一个想法变成能收钱的链接。想继续折腾还可以在这个架构上叠加博客引 SEO 流量、做会员订阅、加多语言地基已经够稳。踩过几次坑之后我现在对新项目的判断标准非常明确如果一件事能在 Serverless 免费额度里跑就绝对不碰服务器。

Next.js+Supabase+R2：手把手搭建Serverless壁纸站，月成本接近$0

相关推荐

Spring Boot架构选型：单体、多模块与微服务核心区别及演进路径

计算机网络怎么学？一套从零基础到考研冲刺的完整学习路径

Redis限流策略全解析：固定窗口、滑动窗口与令牌桶实践

更多资讯

真正的AI能力，从来不是始于完美指令

CentOS虚拟机固定IP配置指南：从VMware网络模式到实操详解

2021数学建模国赛复盘：三道题揭示建模三大范式

Ubuntu系统级配置：打通ROS多机通信的SSH与网络信任链

EtherCAT协议基础：从帧结构到伺服同步，一文梳理核心概念与调试避坑

Token Plan中的Harness权益：云端Agent工作台与自研工具免费额度全解析

今日更新

MATLAB+Yalmip+CPLEX实战：综合能源系统优化调度全流程解析

I3C比I2C快10倍？RK3576实战：速率、DTS配置与混合总线避坑指南

字符串转对象：JSON.parse、new Function与URLSearchParams

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？