前端项目部署平台与技术概念速览

本文介绍当前主流的前端部署平台和相关技术概念。

技术概念

SSR（Server-Side Rendering，服务端渲染）

每次用户请求时，由服务端实时获取数据、渲染 HTML 后返回给浏览器。适用于需要实时数据或用户特定内容的场景（如登录态页面、个性化推荐）。

优势：内容始终最新，对 SEO 友好
劣势：每次请求都需等待服务器处理，响应时间较长，服务器负载较高

SSG（Static Site Generation，静态站点生成）

在构建阶段就把页面渲染为静态 HTML 文件，部署后直接由 CDN 分发。适用于内容不常变动的页面（如博客文章、文档站）。

优势：响应极快（CDN 缓存下可达 20-50ms TTFB），服务器零负载
劣势：内容更新需要重新构建部署，不适合频繁变动的数据

ISR（Incremental Static Regeneration，增量静态再生）

Next.js 提出的渲染策略，结合了 SSG 和 SSR 的优点。页面在构建时预生成静态 HTML 并缓存到 CDN，同时设定一个过期时间，过期后由服务端在后台重新生成新版本页面。用户访问时始终拿到缓存内容，不会被阻塞。

优势：兼顾速度与内容新鲜度
劣势：存在短暂的内容滞后（由过期时间决定）

Serverless Functions（无服务器函数）

不需要自行维护服务器，代码以函数为单位部署在云平台上，按请求触发执行。平台负责自动扩缩容和资源管理，开发者只关注业务逻辑。

优势：零运维、按用量计费、自动弹性伸缩
劣势：存在「冷启动」问题——函数闲置后首次调用时会有数百毫秒的额外延迟

Edge Functions（边缘函数）

与 Serverless Functions 类似，但代码运行在全球各地的边缘节点（CDN 边缘），离用户更近。适用于需要极低延迟的轻量计算场景（如 A/B 测试、地理定向重定向、请求头改写）。

优势：延迟更低（靠近用户执行）
劣势：运行时环境受限（通常不支持 Node.js 全部 API），执行时间和内存限制更严格

Next.js

Next.js 是由 Vercel 开发的 React 全栈框架，也是目前 React 生态中最主流的生产级框架。之所以在部署话题中频繁出现，是因为它将上述 SSR、SSG、ISR、Serverless Functions、Edge Functions 等概念统一集成在一个框架内，通过 App Router 让开发者按页面粒度自由选择渲染策略。

文件系统路由、API Routes、Middleware、图片优化等功能开箱即用
与 Vercel 平台深度集成，部署零配置；在其他平台上部署则需要不同程度的适配
同类框架：Nuxt（Vue 生态）、SvelteKit（Svelte 生态）、Remix（React 生态，多运行时支持）、Astro（多框架支持，侧重静态输出）

Next.js 的混合渲染架构允许在同一项目中为不同页面选择不同的渲染策略，实际项目中往往组合使用上述多种方式。

CDN（Content Delivery Network，内容分发网络）

由分布在全球各地的边缘服务器组成的网络。当用户请求资源时，CDN 会从离用户最近的节点返回缓存内容，而不是每次都回源到原始服务器。

大幅降低访问延迟，提升页面加载速度（尤其对跨地域用户）
SSG 生成的静态页面天然适合 CDN 分发，Vercel、Netlify、Cloudflare Pages 等平台都自带全球 CDN
对于 Docker 自托管方案，通常需要额外接入 CDN 服务（如 Cloudflare、阿里云 CDN）来加速静态资源

部署平台

Vercel

Vercel 是 Next.js 的官方托管平台，提供从构建到部署的一站式体验。连接 GitHub 仓库后，每次 push 自动触发构建和部署，并为每个 PR 生成独立的预览环境。

免费额度（Hobby 计划）：

项目	限额
带宽	100 GB/月
Edge 请求	100 万次/月
Serverless 函数调用	15 万次/月
函数执行时长上限	60 秒
函数资源	2 GB 内存 / 1 vCPU
构建时长	6,000 分钟/月
并发构建	1
项目数	最多 200 个
KV 存储请求	3 万次/月

仅限个人和非商业用途，不支持团队协作
超出限额无法购买额外用量，需升级至 Pro 计划（$20/人/月）

Netlify

Netlify 是另一个广受欢迎的前端部署平台，同样支持 Git 连接自动部署、预览部署等功能，并且对 Next.js 有良好的适配支持。

免费额度（Free 计划）：

项目	限额
带宽	100 GB/月
构建时长	300 分钟/月
Serverless 函数调用	12.5 万次/月
Edge 函数调用	100 万次/月
存储	10 GB
项目数	最多 500 个

采用硬性限额制度，超额后站点会被暂停至下月，不会产生意外账单
达到 50%/75%/90%/100% 用量时会发送通知
升级至 Starter 计划（$8.5/人/月）可解锁按量付费

Cloudflare Pages

Cloudflare Pages 是 Cloudflare 推出的前端部署平台，最大亮点是免费计划即提供无限带宽，且允许商业使用。同样支持 Git 连接自动部署，底层依托 Cloudflare 的全球 CDN 网络。

免费额度（Free 计划）：

项目	限额
带宽	无限制
构建次数	500 次/月
静态资源请求	无限制
Functions 请求	10 万次/天（与 Workers 共享）
项目数	100 个（软限制，可申请提升）
站点文件数	每站点最多 20,000 个
单文件大小	最大 25 MB

无需信用卡，允许商业使用
对纯静态站点极为友好，无限带宽意味着不用担心流量暴增导致的额外费用
Functions 基于 Cloudflare Workers（Edge 运行时），与 Node.js API 存在部分差异，迁移已有 Serverless 函数时需注意兼容性

从 Vercel 迁移的注意事项：

纯静态站点（SSG 输出、SPA）可以无缝迁移到 Cloudflare Pages。但涉及服务端逻辑的项目需要注意以下兼容性问题：

运行时差异：Cloudflare Workers 基于 V8 引擎而非 Node.js，许多 Node.js API（如 fs、net、child_process）不可用，依赖这些 API 的第三方库也无法直接使用
Next.js SSR/API Routes：需要通过 @opennextjs/cloudflare 等适配器转换，且部分功能可能不完全兼容
ISR 行为差异：Cloudflare Pages 对 ISR 的实现与 Vercel 原生支持存在差异，缓存刷新行为可能不一致
平台绑定服务：Vercel KV、Vercel Postgres、Image Optimization 等 Vercel 专属服务需要替换为对应方案（如 Cloudflare KV、D1 数据库等）

如果项目不需要 SSR，建议使用 Vite、Astro 等框架直接输出静态文件部署；如果需要 SSR，可选择对 Cloudflare Workers 运行时有官方适配器的框架（如 SvelteKit、Nuxt 3、Remix）。

Docker 自托管

通过 Docker 容器部署到自己的服务器（VPS、云主机等），拥有完全的控制权。可搭配 Redis 等中间件使用，支持多账户数据隔离和跨设备同步。

优势：不受平台限额约束，数据完全自主可控
劣势：需要自行维护服务器、配置域名/SSL、处理运维问题
成本取决于所选云服务器的价格，国内主流云服务商（阿里云、腾讯云）轻量服务器约 30-100 元/月起

使用 Docker 部署需要一个镜像仓库来存储和分发镜像。常见的托管平台：

Docker Hub：

Docker Hub 是 Docker 官方的镜像仓库，也是 docker pull 的默认来源。

项目	免费额度
公开仓库	无限制
私有仓库	1 个
拉取频率	匿名 100 次/6 小时，登录 200 次/6 小时
自动构建	不支持（曾免费提供，现仅付费计划可用）

升级 Pro 计划（$5/月）可获无限私有仓库和 5,000 次拉取/天
国内直接访问 Docker Hub 速度较慢或不稳定，通常需要配置镜像加速器

GitHub Container Registry（ghcr.io）：

GitHub Container Registry 是 GitHub 提供的容器镜像仓库，与 GitHub 账号和仓库体系深度集成。

项目	免费额度
公开镜像	存储和流量均免费
私有镜像存储	500 MB（GitHub Free）/ 2 GB（Pro）
私有镜像流量	1 GB/月（GitHub Free）/ 10 GB（Pro）

可通过 GitHub Actions 实现推送代码后自动构建并发布镜像，CI/CD 流程一体化
权限与 GitHub 仓库联动，公开仓库的镜像自动公开，私有仓库可单独控制镜像可见性
国内访问同样可能受限，但通常比 Docker Hub 更稳定

对于开源项目，GitHub Container Registry 是更优选择——公开镜像完全免费且无拉取频率限制，配合 GitHub Actions 可实现代码提交到镜像发布的全自动流水线。私有项目如果镜像较小，免费额度也基本够用。

爪云（Claw Cloud Run）

爪云是一家新加坡的容器即服务（CaaS）平台，底层基于 Kubernetes 编排。与 VPS 不同，你无需管理操作系统，只需提供 Docker 镜像即可部署；与 Vercel/Netlify 相比则更灵活，能运行任意 Docker 容器而不限于特定前端框架。可用区覆盖日本和新加坡。国外类似的服务有 Railway、Render 等。

免费计划限制：

项目	限额	说明
月度额度	$5（循环赠与）	GitHub 账号注册超 180 天即可获得，无需信用卡
Workspace	1 个	绑定单个可用区（日本/新加坡二选一）
席位	1 个	不支持团队协作
Pod	最多 4 个	即同时运行的容器实例数
NodePort	1 个	仅 1 个容器端口可暴露到公网，其余容器仅限内部通信
最大资源	4 核 / 8 GB 内存	所有 Pod 共享
日志保留	7 天	超过 7 天自动清理

典型用法：1 个 Web 应用容器对外暴露 + 1 个 Redis 容器内部通信，留 2 个容器余量。超出免费额度后按实际用量（CPU/内存/存储/网络）计费。

存储方案

前端项目部署后，用户数据（如偏好设置、收藏列表、会话信息等）需要一个地方存放。根据部署环境的不同，常见的存储方案有以下几种。

LocalStorage（浏览器本地存储）

HTML5 引入的 Web Storage API 之一。在此之前，浏览器端持久化数据主要依赖 Cookie，但 Cookie 容量仅约 4 KB 且每次 HTTP 请求都会自动附带发送到服务器，并不适合纯客户端存储。HTML5 规范引入了两个新的存储接口来解决这个问题：

localStorage：数据持久保存，页面关闭后依然保留，除非手动清除
sessionStorage：数据仅在当前浏览器标签页生命周期内有效，关闭标签页即清除

两者 API 用法相同（setItem/getItem/removeItem），区别仅在于数据的生命周期。通常所说的 LocalStorage 方案指的是 localStorage。

容量约 5-10 MB（因浏览器而异），仅支持字符串类型，存取复杂数据需要 JSON 序列化
数据存在用户浏览器端，无需任何服务端支持，所有部署平台均可使用
局限性：数据与浏览器绑定，无法跨设备同步；用户清除浏览器数据后即丢失；不适合存储敏感信息（可被 JS 直接读取，存在 XSS 风险）

适用于轻量场景：单设备使用、用户偏好设置、临时缓存等。

Redis（原生自建）

Redis（Remote Dictionary Server）是一个开源的内存键值数据库，数据存储在内存中因此读写速度极快，常用作缓存、会话存储、消息队列等。原生 Redis 需要部署在自己的服务器上，作为一个常驻进程运行，由开发者自行管理实例的运维、备份和扩容。

支持丰富的数据结构（字符串、哈希、列表、集合、有序集合等）
数据存储在服务端，天然支持多设备、多用户共享访问
需要自行维护服务器，适用于 Docker 自托管或爪云等有持久进程的部署环境

Upstash Redis（Serverless 托管）

Upstash 是基于 Redis 协议的 Serverless 托管服务，与原生 Redis 的主要区别在于：

无需运维：Upstash 完全托管，不需要自行部署和维护 Redis 实例
按请求计费：原生 Redis 需要为服务器持续付费（无论是否有请求），Upstash 按实际执行的命令数计费，空闲时零成本
HTTP 协议访问：原生 Redis 使用 TCP 长连接，而 Upstash 额外提供 REST API，天然适配 Serverless 环境（无服务器函数每次调用都是短生命周期，无法维持 TCP 长连接）
全球复制：Upstash 支持多区域只读副本，原生 Redis 需要自行配置主从复制

简而言之，在 Vercel、Netlify 等无服务器平台上部署时，由于没有持久运行的服务器来承载 Redis 进程，Upstash 是最常见的替代方案；而在 Docker 自托管环境中，直接运行原生 Redis 容器则更简单直接。

Upstash 免费额度：

项目	限额
数据库数量	10 个
数据容量	256 MB
命令数	50 万次/月
带宽	200 GB/月

超出免费额度后按量计费，额外数据库 $0.5/个，额外带宽 $0.03/GB

平台内置存储服务

除了自行接入第三方存储，部分部署平台也提供了开箱即用的存储服务，通过 HTTP API 访问，与各自的 Serverless 环境深度集成。

Vercel Storage：

Vercel 提供三种内置存储产品，均可在项目 Dashboard 中一键开通：

服务	底层实现	用途	免费额度
Vercel KV	Upstash Redis	键值缓存、会话、限流	3 万次请求/月，256 MB
Vercel Postgres	Neon Postgres	关系型数据（用户、订单等）	60 计算小时/月，256 MB
Vercel Blob	Cloudflare R2	文件存储（图片、附件等）	存储空间需付费，读取免费

Vercel 的存储服务本质上是对第三方产品的封装集成——KV 封装了 Upstash，Postgres 封装了 Neon，Blob 封装了 Cloudflare R2。好处是在 Vercel 环境中接入更方便（环境变量自动注入、SDK 集成），但免费额度可能比直接使用原服务更少。

Cloudflare Storage：

Cloudflare Pages 可搭配 Cloudflare 自家的存储服务使用：

服务	类型	用途	免费额度
Workers KV	全球分布式键值存储	配置、缓存、会话	10 万次读/天，1 千次写/天，1 GB
D1	SQLite 边缘数据库	关系型数据	10 GB 存储，500 万行读/天，10 万行写/天
R2	对象存储（S3 兼容）	文件存储	10 GB 存储，100 万次读/月，10 万次写/月

Cloudflare 的存储服务免费额度较为慷慨，且与 Workers/Pages 运行时原生集成，无需额外网络开销。

第三方 Serverless 数据库：

如果平台内置存储不满足需求，还可以接入独立的 Serverless 数据库服务，它们均提供 HTTP API，兼容所有部署平台：

Supabase：开源的 Firebase 替代品，提供 PostgreSQL 数据库 + 认证 + 实时订阅 + 文件存储，免费计划包含 500 MB 数据库 + 1 GB 文件存储
MongoDB Atlas：MongoDB 官方云服务，免费提供 512 MB 共享集群（M0），适合文档型数据存储
Turso：基于 libSQL（SQLite 分支）的边缘数据库，免费计划包含 9 GB 存储 + 500 个数据库，延迟极低
PlanetScale：基于 Vitess 的 Serverless MySQL，免费计划包含 5 GB 存储 + 10 亿行读/月

这些服务通过 HTTP/REST API 或专用 SDK 访问，不依赖 TCP 长连接，因此在 Vercel、Cloudflare Pages 等 Serverless 环境中都能正常使用。

存储方案与部署平台的搭配

方案	Docker 自托管	Vercel	Netlify	Cloudflare Pages	爪云
LocalStorage	✅	✅	✅	✅	✅
原生 Redis	✅	—	—	—	✅
Upstash Redis	—	✅	✅	✅	—
平台内置 KV	—	✅ Vercel KV	—	✅ Workers KV	—
平台内置数据库	—	✅ Vercel Postgres	—	✅ D1	—
平台对象存储	—	✅ Vercel Blob	—	✅ R2	—
第三方 Serverless DB	✅	✅	✅	✅	✅

平台对比总结

	Vercel	Netlify	Cloudflare Pages	Docker 自托管	爪云
部署方式	Git 推送自动部署	Git 推送自动部署	Git 推送自动部署	手动/CI 部署镜像	容器部署
免费带宽	100 GB/月	100 GB/月	无限制	取决于服务器	按 $5 额度换算
免费构建	6,000 分钟/月	300 分钟/月	500 次/月	无限制	无限制
存储方案	KV/Postgres/Blob + Upstash	Upstash/第三方	KV/D1/R2 + Upstash	原生 Redis/自建 DB	原生 Redis
适用场景	个人项目快速上线	个人项目快速上线	静态站点/高流量	生产环境/需完全控制	需容器但不想管服务器
商业使用	需 Pro 计划	需付费计划	允许	无限制	无限制
国内可访问性	❌ 已被墙	❌ 不稳定	⚠️ 默认域名受限	✅ 取决于服务器位置	⚠️ 海外节点

国内访问问题

Vercel、Netlify、Cloudflare Pages 等海外平台在国内均存在不同程度的访问障碍：

Vercel：vercel.app 域名已被墙，国内基本无法访问。即使绑定自定义域名，由于服务器 IP 段受影响，访问仍不稳定
Netlify：netlify.app 域名访问不稳定，速度较慢
Cloudflare Pages：pages.dev 域名存在 DNS 污染风险。绑定自定义域名后，可通过 Cloudflare 优选 IP 一定程度改善国内访问速度，但不完全稳定

面向国内用户的解决方案：

方案	成本	效果	备注
自定义域名 + Cloudflare 优选 IP	仅域名费用	中等，不完全稳定	免费方案中相对最优
国内云服务器自托管	30-100 元/月起	稳定可靠	域名需 ICP 备案
国内 CDN 回源海外平台	CDN 费用 + 域名	较好	域名需 ICP 备案
海外平台服务海外 + 国内单独部署	双份成本	最佳	维护成本较高

如果目标用户主要在国内，优先考虑国内云服务器 + Docker 自托管方案。海外部署平台更适合面向全球或海外用户的项目。

如何选择

场景	推荐平台	理由
Next.js 项目（SSR/ISR/API Routes）	Vercel	官方平台，零配置原生支持，教程和社区资源最丰富
纯静态站点 / SPA，流量可能较大	Cloudflare Pages	无限带宽零成本，免费允许商业使用
非 Next.js 的全栈项目（SvelteKit/Nuxt/Remix）	Cloudflare Pages	这些框架都有官方 Cloudflare 适配器，且免费额度更慷慨
需要完整 Node.js 运行时或自定义中间件	Docker 自托管 / 爪云	不受运行时限制，可运行任意服务
跟教程学习、快速原型验证	Vercel	一键部署，文档最完善，上手最快
预算敏感，不想产生任何费用	Cloudflare Pages + Upstash	两者免费额度组合足以覆盖大多数个人项目