返回博客列表
技术文章Supabase微信小程序工程实践部署上线

工程实践 — 从本地开发到生产上线

2026年04月🇨🇳 中文

历经前面几篇的跋涉,我们的“ProjectX 灵感协作小程序”已经完成了表结构设计、云函数接入、草图上传和实时讨论室的构建。

功能跑通只是玩具,能抗住生产考验才是工程。

在这最后一篇中,我们将视线从代码层面拔高。我们将探讨如何将这套协作系统优雅、安全、合规地推向正式的生产环境,迎接真实团队的检阅。


第一阶段:基建即代码(Migration 工作流)

如果你的开发方式是“在网页控制台(Dashboard)上点点鼠标建表”,那是一场工程灾难。这意味着你的系统是无法复现、无法回滚、无法进行团队协作的。

专业的开发团队必须依托于 Supabase CLI,将基础设施代码化。

1. 本地 Docker 沙盒

执行 supabase start 后,CLI 会在你电脑的本地 Docker 里拉起一套堪称宏伟的微服务集群(包含 Postgres、PostgREST、Realtime、Storage 等)。 它 1:1 完美复刻了云端环境。你可以毫无顾忌地在本地随意修改、清空数据库,彻底告别了“连着生产库改表导致线上崩溃”的惨剧。

2. Migration:数据库的版本控制

代码有 Git 来追踪历史,数据库呢?就靠 Migration 文件

你对系统的每一次变更(建 ideas 表、写 publish_idea 函数、加一条 RLS 策略),都不应该手动在界面上点,而应该通过 supabase migration new 生成一个 SQL 文件保存起来。

在开发过程中,每天早上执行一次 supabase db reset。这条命令会像推倒多米诺骨牌一样,清空本地库,将所有的 Migration 脚本按时间戳顺序重新执行一遍,最后灌入提前写好的 seed.sql(虚拟的灵感卡片与测试账号数据)。 只要 db reset 能够顺滑跑完,就证明你的数据库变更历史是自洽且完美的,随时可以通过 supabase db push 信心百倍地推向生产云。


第二阶段:上线前的安全与性能“体检”

在推向生产前,我们必须对这套新房进行一次深度的甲醛测试。

1. 密钥查杀:保护好你的大门钥匙

Supabase 项目有两把钥匙,它们的权限有着天壤之别:

  • anon key(匿名公开密钥):这把钥匙必须写在小程序的代码里。它本身没有任何权限,仅仅是告诉 Supabase "我是从哪个项目发来的请求",所有真正的防护全靠底层的 RLS 策略。
  • service_role key(上帝密钥):这把钥匙相当于数据库的 root 密码,完全无视并绕过所有的 RLS 策略。它只能、并且绝对只能出现在你的服务端(如 Edge Function 或自己的 Node.js 服务器)的环境变量里。

上线前必做:全项目全局搜索 service_role 字符串。一旦发现它被硬编码在小程序的业务代码里,立即去控制台重置密钥!

2. 扫荡“裸奔表”(RLS 覆盖率审计)

你费尽心机给 ideas 表写了完美的 RLS 策略,却在上线前为了方便,临时建了一张 user_feedback 表收集反馈,并且忘了开启 RLS。恭喜你,这张表现在是互联网上最坦诚的裸奔者,任何人都能往里面疯狂塞垃圾数据或者删掉全部内容。

在 SQL Editor 中运行这段审计脚本,抓出所有忘了开防护盾的危险表:

SELECT tablename FROM pg_tables
WHERE schemaname = 'public' AND rowsecurity = false;

如果列表不为空,马上回去补齐 RLS 策略。

3. 性能排雷:消灭 select=* 与 N+1

如果在开发阶段,你为了省事在获取灵感列表时写了 .select('*'),那是极度危险的。ideas 表里的 content 长文本字段会被全量拉取,导致列表页的 JSON 体积暴增,极度消耗用户的流量和渲染性能。始终明确指定你需要的字段.select('id, title, author_id')

另外,获取灵感列表时,你往往需要顺便拿到创作者的昵称和头像。千万不要先查 ideas,再用一个 for 循环挨个去查 profiles 表(经典的 N+1 查询风暴,数据库直接被轰趴)。 由于建表时你已经用外键关联了 users 表,利用 PostgREST 极其强大的嵌套路由能力,一句话搞定关联查询: .select('id, title, profiles(name, avatar_url)')


第三阶段:跨过微信合规的最后门槛

后端一切就绪,微信小程序端的部署合规同样容不得半点马虎。

1. 域名白名单矩阵

微信公众平台的沙盒极其严苛,它必须提前知道你要访问哪些外网。你必须在「开发设置 -> 服务器域名」中把 Supabase 的域名(通常是 *.supabase.co)填满四个格子:

  • request 合法域名:用于常规的增删改查。
  • socket 合法域名:把 https 换成 wss,为了 Realtime 的 WebSocket 通信。
  • uploadFile 合法域名:为了我们的 Storage 草图上传。
  • downloadFile 合法域名:用于下载或预览图片。

2. 拥抱不完美的现实:弱网与监控

不要假设用户的网络都像你的开发机 Wi-Fi 一样丝滑。 在微信开发者工具中开启 “弱网模拟”,测试你的应用。重点检查:

  • 草图上传中断了,有没有重试按钮?
  • 切入后台聊微信再回来,WebSocket 断开后,你的重连代码(指数退避算法)是否成功恢复了频道连接并拉取了漏掉的消息?

最后,不要让任何错误发生得悄无声息。用一个全局的错误上报拦截器包住你的 API 调用,一旦触发 4xx/5xx,要么向微信小程序的官方错误面板上报,要么对接 Sentry。只有具备可观测性的系统,才能在深夜宕机时给你保留最后的体面。

至此,我们的灵感协作平台已经准备就绪。恭喜你,完成了一次教科书级别的 Supabase x 微信小程序全栈工程演练!