我的Netlify全栈开发方案

国内做全栈开发太难了：买香港 VPS 贵得离谱，买美国 VPS 又慢得要死。

怎么用最少的钱，搞定一套既快又稳的全栈环境？

答案是：Netlify + Functions + 美国 VPS。

为什么这么搞

香港 VPS 延迟低（<50ms），但 2C2G 就要 150 块，带宽还只有 3M，传个图片能急死人。美国 VPS 便宜量大，4C8G 只要 50 块，千兆带宽随便跑，唯一缺点是国内直连延迟高（>150ms）。

架构设计

核心思路是动静分离，就近计算。

用户 —> Netlify CDN (香港/日本) —> Netlify Functions (美西) —> VPS (美西)

静态资源扔给 Netlify，利用它的全球 CDN（国内通常走香港或日本节点）解决首屏加载。后端逻辑用 Netlify Functions 跑在美国节点，数据库部署在美国 VPS 上。

妙在哪？

用户访问前端很快（CDN 加速）。当需要调 API 时，请求发到 Netlify Functions（美国），Functions 再去请求 VPS（美国）。Functions 和 VPS 都在美国，内网延迟 < 10ms。

你把跨海传输这部分最慢的链路，交给了 Netlify 这种大厂的骨干网去跑，肯定比你直连稳。

前端框架怎么选

Netlify 对主流框架都有一流支持，但不同框架的定位差异很大。

Astro 适合内容型网站（博客、文档、营销页）。默认零 JS，需要交互时再引入 React/Vue 组件，首屏性能极好。本站就是 Astro 构建的。

Next.js 适合复杂应用（Dashboard、SaaS）。App Router 的 Server Components 能在服务端渲染，减少客户端 JS 体积。但 Netlify 上跑 Next.js 有个坑：部分 Edge Runtime 特性不完全兼容，建议用 Node.js Runtime。

Nuxt 是 Vue 生态的全栈框架，Hybrid Rendering 可以按路由配置 SSR/SSG/CSR，灵活度高。

SvelteKit 编译时框架，产物体积最小，适合对性能有极致追求的项目。

我的选择逻辑：内容站选 Astro，应用选 Next.js 或 Nuxt。

为什么后端写在 netlify/functions

很多人第一反应是把后端部署在 VPS 上直接跑 Express，但 Netlify Functions 有几个独特优势。

自动扩缩容。传统服务器需要预估流量配置资源，Functions 按调用量计费，突发流量来了自动扩，没流量时零成本。

部署原子性。Functions 和前端代码在同一个 Git 仓库，一次 Push 同时部署前后端，不存在版本不一致的问题。

零运维。不用管 PM2、Nginx、SSL 证书续期这些破事，Netlify 全包了。

冷启动优化。Netlify Functions 底层是 AWS Lambda，冷启动通常在 200-500ms。可以通过复用数据库连接、减少依赖包体积来优化：

// netlify/functions/api.js
import { neon } from "@neondatabase/serverless"

// 连接放在 handler 外部，跨请求复用
const sql = neon(process.env.DATABASE_URL)

export async function handler(event) {
  // 不要在这里初始化连接
  const users = await sql`SELECT * FROM users LIMIT 10`

  return {
    statusCode: 200,
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(users),
  }
}

什么时候不该用 Functions？ 长时间运行的任务（视频转码、大文件处理）不适合，Functions 有 10 秒超时限制（Pro 版 26 秒）。这类任务还是扔给 VPS 跑。

本地开发：Netlify CLI

线上环境和本地环境不一致是 Serverless 开发的常见痛点。Netlify CLI 可以在本地完整模拟生产环境。

# 安装
npm install -g netlify-cli

# 登录（会打开浏览器授权）
netlify login

# 关联项目（在项目根目录执行）
netlify link

本地启动开发服务器：

netlify dev

这个命令会同时启动前端开发服务器和 Functions 模拟器，默认监听 localhost:8888。它会自动检测你用的是 Astro、Next.js 还是 Vite，然后启动对应的 dev server。

环境变量同步。netlify dev 会自动拉取 Netlify 后台配置的环境变量，不用手动维护 .env 文件。如果想用本地的环境变量覆盖，创建 .env.local 即可。

调试 Functions。Functions 代码改动后会热重载，在浏览器访问 /.netlify/functions/api 就能调用。如果要打断点，用 --inspect 参数：

netlify dev --inspect

然后在 Chrome 打开 chrome://inspect，就能断点调试了。

模拟生产构建。上线前建议跑一次完整构建，确保没问题：

netlify build
netlify serve  # 用生产构建结果启动本地服务器

项目结构

一个典型的 Netlify 全栈项目结构：

my-app/
├── src/                    # 前端代码
├── netlify/
│   └── functions/          # Serverless Functions
│       ├── api.js          # REST API
│       └── auth.js         # 认证相关
├── netlify.toml            # Netlify 配置
├── .env.local              # 本地环境变量
└── package.json

netlify.toml 是核心配置文件：

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[functions]
  node_bundler = "esbuild"    # 比默认的 zip 快很多
  external_node_modules = ["sharp"]  # 不打包的依赖

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/api/:splat"
  status = 200

最后一段 redirects 把 /api/* 重定向到 Functions，这样前端调用 /api/users 就等于调用 /.netlify/functions/api/users，URL 更干净。

VPS 配置

Docker 一键起服务：

# docker-compose.yml
services:
  postgres:
    image: postgres:16
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "127.0.0.1:5432:5432" # 只监听本地

volumes:
  pgdata:

数据库端口只绑定 127.0.0.1，外部无法直连。用 Tailscale 组内网后，Netlify Functions 通过 Tailscale IP 访问 VPS，流量全程加密，不用配置防火墙白名单。

# VPS 上安装 Tailscale
curl -fsSL https://tailscale.com/install.sh | sh
tailscale up

# 记下 Tailscale IP，比如 100.x.x.x
# 在 Netlify 后台配置环境变量
# DATABASE_URL=postgres://user:pass@100.x.x.x:5432/mydb

算算账

Netlify 免费版给的额度（100G 带宽、12.5万次调用）足够个人项目用了。

小结

这套方案特别适合：穷，但想要高性能的个人开发者。

相比 Vercel + Supabase 这种纯 Serverless 方案，自己有台 VPS，数据在自己手里，心里更踏实。而且 VPS 还能挂挂脚本、跑跑 Docker，可玩性高多了。