纯静态页面
落地页、作品集、文档——内容不常变
$0 + 域名 · 极低
△ 需要按用户展示内容,或表单要干比发邮件更多的事
图集 · L0–L3
一个人上线一个网站
AI 把"写代码"变成了最容易的部分。没人递给你的是那张基建地图:网站有哪几种形态、 哪种适合单人项目、每种形态背后拖着多少月账单。下面是从单页静态站到微服务的完整架构全景—— 它存在的意义,大半是让你知道哪些现在还不该碰。
设计哲学
网站是一个承诺：这个地址会一直有人应答。速度、外观、功能都可以商量，死链不行。
网址是永久的
页面一旦公开，别的网站、搜索引擎和 AI 模型都会记住它的地址。不加跳转就改地址，等于悄悄删掉自己的历史。
先内容，后运行时
大多数网站是文档，不是程序。能提前烤好的页面就提前烤好，只有真的要为每个访客现算的页面才加服务器。
一页只回答一个问题
每个页面只为一类访客回答一个问题。说不出这个问题是什么，这一页就还不该存在。
一个人、第一个正经网站?从纯静态或边缘全栈起步(都打了推荐标)。地图上它们右边的一切, 都属于你有了用户、收入或团队的那一天——信号响了再升级,别提前。
图号L0
原型
谁在用只有你和几个朋友
每月$0
①为什么升级
你想知道这个点子值不值得做。现在没人依赖它，没什么要保护的，唯一要紧的是试得快。
②架构
③工具
选你的 agent 写得最顺手的技术栈，而不是功能最多的那个。这一级框架几乎不重要，重要的是发布这条流水线。
④代码与测试
- 一个仓库，一个分支，push 即部署。先不要预发环境。
- 说完成之前，每一页都在真手机上打开看一遍。
- 跑一遍死链检查：满是死链的原型，验证不了任何想法。
图号L1
有真实用户
谁在用找到你的陌生人
每月$0–5
①为什么升级
开始有素不相识的人来了。有些页面需要逻辑了，比如表单、语言切换、搜索；搜索引擎也开始给你打分。
②架构
静态页面仍然是静态的；只有少数必须现算的请求，交给一层很薄的边缘代码。仍然没有自己的服务器，也还没有数据库。
Δ 本级新增
- + 处理动态部分的边缘函数
- + SEO 标签的唯一出口
- + 每次部署前的自动检查
- + 访客统计
对应地图上的形态: 边缘全栈(本站形态) · 静态前端 + 云函数
③工具
选一个免费额度扛得住真实流量、而且框架官方支持它运行时的托管商。没人维护的适配器，是你能选到的最贵的免费品。
④代码与测试
- 每次 push 都在 CI 里跑代码检查、类型检查和构建；检查变红就不许部署。
- 在真实运行时里测（本地预览边缘 worker），不要只在开发服务器上测，两者行为不一样。
- 每次部署后实际打开线上页面看内容，不能只看状态码。200 不等于内容对。
图号L2
涉及钱和数据
谁在用付钱给你、或把数据交给你的人
每月$5–25
①为什么升级
出现了账号、支付或个人数据。bug 不再只是丢人，它可能让别人损失钱、暴露隐私。从这一级开始，你对别人负有照看的责任。
②架构
边缘应用接上真正的数据库；最危险的部分，也就是登录和支付，交给专业服务商（托管的登录服务、支付处理商），不要自己手写。密钥彻底离开代码。
Δ 本级新增
- + 带备份的托管数据库
- + 登录和支付交给专业服务商
- + 密钥存在仓库之外
- + 和代码行为一致的隐私政策
对应地图上的形态: 边缘全栈(本站形态) · 前端 + BaaS(托管后端)
③工具
会伤到人的东西买现成的，让你与众不同的东西自己造。永远不要手写密码存储或银行卡处理；选有签名 webhook、并且能导出数据走人的服务商。
④代码与测试
- 在边界校验每一份输入，验证每一个 webhook 的签名。
- 备份数据库，并且真的演练一次恢复。没测过的备份只是愿望，不是备份。
- 先给钱和权限相关的路径写测试，那里的 bug 会有受害者。
- 每次提交前扫描密钥和个人数据，再推送。
图号L3
规模化
谁在用很多人，同时在用
每月$50–300+
①为什么升级
数据库比其他部分先喘不过气，凌晨 3 点宕机开始真金白银地赔钱，而且写代码的人不止一个。只有在测量数据告诉你该升级时，才走到这一级。
②架构
先在数据库前面加缓存，再把读和写拆开。只有写入本身成了瓶颈，才分库分表；只有很多团队互相打架，才拆成微服务。每一步都是加盖一层楼，不是把整栋楼推倒重建。
Δ 本级新增
- + 缓存层
- + 只读副本
- + 带告警的监控
- + 分批发布
对应地图上的形态: 缓存层 + 读写分离 · 容器化单体(Docker) · 经典三层(Web / 应用 / 数据库) · 分库分表 · 微服务
③工具
这一级的每个工具，都是拿钱和复杂度去换余量。加一个，测一测，再决定下一个。如果你是一个人在读这段，你几乎肯定属于更低的楼层。
④代码与测试
- 上线前用接近真实的流量做压测，而不是等宕机之后。
- 先发给一小部分用户，盯着错误率，再全量发布。
- 每条告警都必须写明该做什么；没人能处理的告警，只会把人训练成无视告警。
架构全景图
这件事所有可能的搭法。它们大半的意义,是让你知道哪些现在还不该碰。
静态生成(SSG)
博客、文档、本站——大量页面在部署时由数据生成
$0 + 域名 · 低
△ 内容需要不重新部署就更新,或出现按请求计算的逻辑
边缘全栈(本站形态)
单人项目需要 API、多语言、动态能力——又不想养服务器
$0–5/月 · 低-中
△ 出现长时任务、大规模长连接,或重型关系数据需求
静态前端 + 云函数
基本静态的站,带少量 API 端点(表单、支付、登录)
$0–10/月 · 低-中
△ 函数越写越多还开始共享状态——你正在用碎片拼一个后端
前端 + BaaS(托管后端)
需要登录、数据库、实时功能的应用型产品——追求快
$0–25/月 · 低-中
△ 用户一涨价格曲线陡增,或平台不允许你要的自定义逻辑
单机全栈(一台 VPS 包打天下)
要完全控制权、奇怪运行时,或低成本跑长时进程
$5–20/月 · 中——从此你就是运维团队
△ 凌晨三点服务器挂了是你的事;当这变得不可接受,就该搬家了
容器化单体(Docker)
同一个应用要在笔记本、VPS、云上跑得一模一样
$5–30/月 · 中
△ 单容器扛不住负载,或部署需要零停机
经典三层(Web / 应用 / 数据库)
团队开发的业务系统;教科书式企业形态
$20–100/月 · 中-高
△ 读流量最先压垮数据库——下一步通常是加缓存
缓存层 + 读写分离
读多写少的流量超出单库承受力
$50–300/月 · 高
△ 写入本身成了瓶颈——前方进入分库分表地界
分库分表
写入量或数据量超过任何单一数据库的极限
$300+/月 · 很高
△ 跨库查询和团队协作开始痛苦→服务化边界在招手
微服务
多个团队在同一产品上独立交付时
$1000+/月 + 一个平台组 · 极高
△ 这是终点站。如果你是单人开发者还在读这条——关掉页面,去写代码
你真正需要的概念
每个概念一句人话 + 一个比喻。点击任何工具模块,也有同款科普。
- 域名与 DNS
- 域名是你的地址;DNS 是把地址翻译成"到底哪台机器接客"的电话簿。
- ≈ 店铺招牌不动,后厨一夜之间可以整个换掉,顾客毫无察觉。
- 托管形态
- 静态托管只发文件;Serverless 按请求跑你的代码;VPS 是租下整台电脑。
- ≈ 自动售货机、按客流出摊的小吃车、整租一间餐厅——三种开店方式。
- SSG 与 SSR
- SSG 在部署时一次性烤好所有页面;SSR 每个请求现做。内容允许的话,预烤更便宜更快。
- ≈ 面包店的早晨批量出炉 vs 客点现炒的厨房。
- 边缘计算
- 代码跑在离用户最近的几百个节点,而不是某一个机房——延迟低,还没有服务器要管。
- ≈ 全国只有一个大仓库 vs 每个街角都有便利店。
- CI/CD
- 每次 push 自动触发检查和部署——发布流程里不再需要人肉搬运。
- ≈ 流水线上的传送带自己完成质检和发货,全程不过人手。
- 环境变量与密钥
- 配置和密钥放在代码之外、运行时注入——永远不进仓库。
- ≈ 保险柜密码记在脑子里,而不是写在柜门上。
- 缓存
- 把一次昂贵计算的答案存起来反复用,直到它过期。
- ≈ 咖啡师把熟客的单子贴在机器上,不用每天早上再问一遍。
- 多语言路由
- 每种语言有自己的 URL(/zh、/ja),搜索引擎才能分别收录每个版本。
- ≈ 一座博物馆修三条完整标识的参观路线,而不是一条路线配翻译耳机。
把 skill.md 带走
本场景的 Skill 中心主义起手文件——在第一句提示词之前先喂给你的 Agent。规划、工具栈、已知的坑都在里面。