静态网站部署实战从 Vercel 到自托管的最优成本方案选型一、静态网站部署的核心问题不是「能不能部署」而是「部署后是否足够快、足够稳、足够便宜、以及是否足够自动化」静态网站Static Site是指「所有页面都是预渲染的 HTML 文件」的网站代表性的框架包括 Next.jsSSG 模式、Astro、Hugo、Gatsby、NuxtSSG 模式。和动态网站每次请求都从服务器生成页面相比静态网站的部署简单得多——只需要把 HTML/CSS/JS 文件放到一个能响应 HTTP 请求的服务器上就行。但「简单」不等于「没有选择」不同的部署方案在性能、成本、自动化程度和运维复杂度上的差异很大。Vercel 是目前最流行的静态网站部署平台它的核心优势是「和 Next.js 深度集成」、「全球 CDN 自动配置」、「每次 git push 自动部署」、以及「预览部署」每个 PR 自动生成一个预览 URL。对于独立开发者或者小团队Vercel 的免费计划通常够用部署体验极佳。但 Vercel 的收费模式是「按团队成员和构建时长收费」当项目变多、团队变大、或者构建变得频繁时费用可能快速增长。自托管静态网站部署方案如用 Nginx rsync、或者用 MinIO Nginx、或者用专门的静态网站部署工具如scribe的成本更低控制力更强但需要自己处理 CDN、HTTPS 证书更新、以及部署自动化。对于流量不大、但需要精细控制成本或者数据主权的项目自托管是值得考虑的。二、静态网站部署方案的技术对比从托管平台到自托管flowchart TD A[静态网站部署需求] -- B{预期流量?} B -- 1000 PV/月 -- C[Vercel 免费计划] B -- 10万 PV/月 -- D{需要精细控制成本?} D -- 是 -- E[自托管 CDN] D -- 否 -- F[Vercel Pro / Netlify Pro] C -- G[优点: 零成本/自动化] E -- H[优点: 成本低/可控] F -- I[优点: 省心/性能好] G -- J[适合个人项目] H -- K[适合对成本敏感] I -- L[适合商业项目]Vercel的部署体验是目前业界最好的之一。把 Next.js 项目推到 GitHub在 Vercel Dashboard 里导入项目配置一下构建命令和环境变量就完成了。之后每次git push到 main 分支Vercel 自动构建并部署每次提 PRVercel 自动创建一个预览部署附上预览 URL 到 PR 评论里。这个体验极大降低了部署的心智负担。但 Vercel 有几个限制需要注意免费计划的构建时长有限每月 100 小时、带宽有限每月 100GB、且服务器端功能Serverless Function的执行时间和内存也有限制。对于大多数个人项目这些限制够用对于商业项目或者高流量项目可能需要升级到 Pro 计划20 美元/月/成员。Netlify是 Vercel 的主要竞争者功能和体验类似。Netlify 的免费计划也提供了构建自动化、CDN 和预览部署。选择 Vercel 还是 Netlify通常取决于你用的框架Next.js 首选 Vercel因为 Vercel 是 Next.js 的开发公司和个人偏好。自托管方案适合「需要精细控制成本」或者「不能把代码放在第三方平台」的场景。最简单的自托管方案是用 GitHub Actions 构建项目构建产物通过rsync或者scp传到服务器用 Nginx 提供静态文件服务用 Lets Encrypt 做 HTTPS 证书自动更新。这个方案的成本基本上就是一台 VPS 的成本如 Hetzner、DigitalOcean、或者国内的云服务器每月 5-20 美元流量再大也增加不了多少成本。三、Vercel 部署 Next.js 项目的完整配置与优化在 Vercel 上部署 Next.js 项目几乎不需要配置——Vercel 会自动检测next.config.js、安装依赖、运行next build、然后部署。但要做生产级的部署还需要关注以下几个配置和优化点。环境变量管理在 Vercel Dashboard 的 Project Settings → Environment Variables 里配置环境变量。Vercel 支持为不同环境Production、Preview、Development配置不同的变量值。需要特别注意的是NEXT_PUBLIC_前缀的变量会被打包到客户端 JS 里不能用来存密钥。自定义域名与 HTTPS在 Vercel Dashboard 的 Project Settings → Domains 里添加自定义域名Vercel 会自动配置 HTTPS 证书用 Lets Encrypt自动续期。这个过程通常需要你添加一条 DNS CNAME 记录指向 Vercel 的 CDN。构建优化Next.js 的静态导出next export或者在next.config.js里配置output: export生成的纯静态文件部署到 Vercel 时会被自动放到 CDN 边缘节点性能极好。但如果你的 Next.js 项目用了 SSR 或者 API RoutesVercel 会把它们部署成 Serverless Functions这时候需要关注「函数执行时间」和「冷启动延迟」。以下是一个next.config.js的配置示例展示如何为 Vercel 部署做优化/** type {import(next).NextConfig} */ const nextConfig { output: standalone, // 生成独立部署包减少 node_modules 体积 compress: true, // 启用 Gzip/Brotli 压缩 reactStrictMode: true, // 图片优化用 Vercel 的 Image Optimization API images: { formats: [image/webp], minimumCacheTTL: 60, }, // 环境变量也可以在 Vercel Dashboard 里配置 env: { NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, }, }; module.exports nextConfig;四、自托管静态网站部署的自动化GitHub Actions VPS 的完整流程自托管部署的自动化通常用 GitHub Actions 实现。以下是一个完整的 GitHub Actions 配置展示如何构建 Next.js 静态导出项目并部署到 VPSname: Deploy to VPS on: push: branches: [main] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 with: node-version: 20 cache: npm - run: npm ci - run: npm run build # 对于静态导出这个命令应该是 next export 或者 next build next export - name: Deploy to VPS uses: appleboy/ssh-actionv1.0.0 with: host: ${{ secrets.VPS_HOST }} username: ${{ secrets.VPS_USER }} key: ${{ secrets.VPS_SSH_KEY }} script: | cd /var/www/my-site git pull origin main npm ci npm run build pm2 restart my-site # 如果用 PM2 管理 Node.js 服务 # 或者如果是纯静态导出 # rsync -avz --delete ./out/ /var/www/my-site/ # nginx -s reload这个配置的关键设计是「用 SSH 在远程服务器上构建」还是「在 GitHub Actions 里构建后 rsync 过去」。对于静态导出项目推荐「在 Actions 里构建然后 rsync 过去」——这样服务器上不需要装 Node.js也不需要关心构建依赖部署更快也更可靠。自托管部署还需要配置 Nginx。以下是一个为静态网站优化的 Nginx 配置server { listen 80; server_name example.com; return 301 https://$host$request_uri; # HTTP 转 HTTPS } server { listen 443 ssl http2; server_name example.com; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; root /var/www/my-site; index index.html; # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { expires 1y; add_header Cache-Control public, immutable; } # SPA 兜底如果是 SPA 而不是纯静态 location / { try_files $uri $uri/ /index.html; } }五、总结静态网站部署方案的选择是在部署体验、成本、可控性和运维复杂度之间做权衡。Vercel 提供最好的部署体验和最完善的自动化适合大多数项目和团队Netlify 是 Vercel 的有力竞争者自托管方案成本最低、控制力最强但需要自己处理自动化、CDN 和 HTTPS。对于独立开发者推荐从 Vercel 免费计划开始等项目有稳定流量和收入后再评估是否需要自托管或者升级付费计划。部署不是一次性操作而是「每次代码变更都能自动、可靠地到达用户」的持续性能力——投资时间把部署自动化、把构建优化、把 CDN 配好长期来看都是值得的。