部署到 Vercel、Netlify 与 Cloudflare Pages
将仓库连接到各个平台，配置构建命令和输出目录，并了解分支的预览部署。
部署到 Vercel、Netlify 与 Cloudflare Pages 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
现代前端托管三强
Vercel、Netlify 和 Cloudflare Pages 是部署前端应用的领先平台。它们都提供：基于 Git 的部署、预览分支、自定义域名、边缘 CDN 和无服务器函数。选择一个并坚持使用。
Vercel——为 Next.js 打造
由 Next.js 团队创建。提供一流的 Next.js 集成：零配置图像优化、ISR、边缘函数和 Speed Insights。同时也支持 Vite、Nuxt、Astro 以及大多数静态框架。
部署到 Vercel
连接 GitHub/GitLab/Bitbucket 仓库。Vercel 会自动检测框架、运行 build 并完成部署。
# Manual deploy (any project):
npm install -g vercel
vercel login
vercel # preview deploy
vercel --prod # production deploy
# Or push to main — auto-deploys via Git integration.vercel.json 配置
覆盖默认设置（构建命令、重定向、标头和重写规则）。
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": "vite",
"headers": [{
"source": "/(.*)",
"headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
}],
"redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}Netlify——先行者
开创了现代静态部署方式。提供强大的表单处理、身份管理和分析功能。Netlify Functions 和 Edge Functions 可用于无服务器场景。对 Vite/Hugo/Eleventy 提供出色支持。
部署到 Netlify
连接仓库，或拖放已构建的文件夹。通过控制面板或 netlify.toml 进行配置。
# netlify.toml
[build]
command = "npm run build"
publish = "dist"
[build.environment]
NODE_VERSION = "20"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200 # SPA fallback
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"Netlify CLI
支持无服务器函数的本地开发。
npm install -g netlify-cli
netlify login
netlify init
netlify dev # local server with functions
netlify deploy # preview
netlify deploy --prodCloudflare Pages
部署到 Cloudflare 的全球边缘网络。Pages Functions 在 Workers 运行时上提供无服务器功能。免费层十分慷慨。非常适合 Astro、Hono 和 Remix。
部署到 Cloudflare Pages
通过 Cloudflare 控制面板连接仓库。或者使用 wrangler CLI。
# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site
# Or push to GitHub — auto-deploys.用于 Pages 的 wrangler.toml
Cloudflare Pages 使用 wrangler.toml 配置 Workers/Functions。
# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"
[vars]
API_URL = "https://api.example.com"
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."预览部署
这三个平台都会为每个 PR 分支创建唯一的 URL。审查者可以点击该 URL，在隔离环境中测试更改。这现在已经成为标准的团队工作流。
环境变量
这三个平台都支持通过控制面板或 CLI 设置按环境区分的变量（生产、预览、开发）。前端变量必须带有前缀（Vite：VITE_，Next：NEXT_PUBLIC_），才能发送到浏览器。
# Vercel:
vercel env add API_URL production
# Netlify:
netlify env:set API_URL https://api.example.com
# Cloudflare Pages:
wrangler pages secret put API_URL自定义域名与 SSL
这三个平台都会自动处理 SSL 证书（Let's Encrypt）。将 DNS A/CNAME 记录指向它们的目标地址，它们就会签发并续期证书。所有付费层级都免费提供自定义域名。
三者之间如何选择
Vercel：最适合 Next.js，开发体验精致，但价格略高。Netlify：最适合表单和身份管理，插件生态成熟。Cloudflare Pages：边缘性能最佳，大规模使用时成本最低，并且与 Workers 集成出色。三者都非常优秀。
快速检查
在 Vercel/Netlify/Cloudflare Pages 上，为拉取请求创建可部署的预览 URL 的标准方式是什么？
回顾：前端托管
Vercel：最佳的 Next.js 集成。Netlify：表单、身份管理和插件。Cloudflare Pages：边缘性能和最低成本。这三者都支持：基于 Git 的自动部署、每个 PR 对应的预览 URL、按环境设置环境变量、自动 SSL 和自定义域名。可通过控制面板或各平台的配置文件（vercel.json、netlify.toml、wrangler.toml）进行配置。
常见问题解答
「部署到 Vercel、Netlify 与 Cloudflare Pages」课时是免费的吗？
是的 — 「部署到 Vercel、Netlify 与 Cloudflare Pages」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「部署到 Vercel、Netlify 与 Cloudflare Pages」这节课中我会学到什么？
将仓库连接到各个平台，配置构建命令和输出目录，并了解分支的预览部署。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「部署到 Vercel、Netlify 与 Cloudflare Pages」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 用于前端的 GitHub Actions：代码检查、测试与构建
- 部署到 Vercel、Netlify 与 Cloudflare Pages
- 持续集成中的环境变量
- 自动化 Lighthouse 检查