部署上线

什么是部署？

你的项目在本地跑得好好的，npm run dev 一敲，浏览器打开 localhost:3000，完美。但是这个地址只有你的电脑能访问，你的朋友、用户看不到。

部署，简单来说就是把你的代码从你的电脑搬到一台公共服务器上，让全世界都能通过互联网访问。

打个比方：你在家做了一桌好菜（本地开发），只有自己能吃。部署就是把这桌菜搬到一个餐厅里（服务器），贴上地址（域名），让所有人都能来吃。

以前部署确实挺麻烦的——你得买服务器、装操作系统、配 Nginx、搞 SSL 证书、处理域名解析……光这些就能劝退一半人。

但现在，有大量"部署平台"帮你搞定这些。你只需要把代码推到 GitHub，点几下按钮，几分钟后产品就上线了。你不需要懂服务器运维，真的不需要。

整个流程大概是这样的：

你的电脑 → GitHub（代码仓库）→ 部署平台（自动构建+发布）→ 互联网上的用户

你负责写代码和推代码，平台负责其他所有事。下面我们就来看具体怎么操作。

Vercel：Next.js 的最佳拍档

如果你用的是 Next.js（大概率是），那 Vercel 就是你的第一选择。

为什么？因为 Vercel 就是 Next.js 的亲爹做的（同一个公司）。它们是一家人，所以对 Next.js 的支持好到离谱——自动识别、自动构建、自动部署，你基本不需要配置什么。

Vercel 部署完整流程

第一步：把代码推到 GitHub

首先，确保你的代码已经在 GitHub 上。如果还没有：

# 在项目根目录执行
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main

如果你还没建 GitHub 仓库，去 github.com 点右上角的 "+" → "New repository"，创建一个新仓库，然后按提示把本地代码推上去。

第二步：连接 Vercel

打开 vercel.com，点击右上角 "Sign Up" 或 "Log In"
选择 "Continue with GitHub"——用你的 GitHub 账号授权登录
进入 Vercel 的 Dashboard（仪表盘），你会看到一个干净的页面
点击 "Add New Project" 按钮
Vercel 会列出你 GitHub 上的所有仓库，找到你的项目，点击 "Import"

第三步：配置项目

Import 之后，你会看到一个配置页面：

Framework Preset：Vercel 会自动检测到你的项目是 Next.js，显示 "Next.js" 图标。不需要手动选择。
Root Directory：默认是项目根目录，如果你的代码在子目录里才需要改。
Build and Output Settings：一般保持默认就行，Vercel 知道 Next.js 该用什么命令构建。
Environment Variables：这是最重要的部分，下面单独讲。

第四步：点击 Deploy

点那个蓝色的 "Deploy" 按钮。你会看到一个构建过程的实时日志，大概等 1-2 分钟。构建完成后，Vercel 会放烟花庆祝，然后给你一个 .vercel.app 的域名，比如 your-project.vercel.app。

点开看看——你的产品已经上线了！

以后每次你往 GitHub 的 main 分支推代码，Vercel 都会自动重新部署。这个流程叫 CI/CD（持续集成/持续部署），你不需要额外配置，开箱即用。

环境变量设置

这一步是新手踩坑最多的地方，务必仔细看。

你的项目里可能有个 .env.local 文件，里面存着各种敏感信息，比如：

# .env.local
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx
DATABASE_URL=postgresql://user:pass@host:5432/db
NEXTAUTH_SECRET=your-secret-here

这个文件不会被推到 GitHub 上（因为 .gitignore 里排除了它），所以 Vercel 也读不到。你需要手动在 Vercel 里配置：

进入你的 Vercel 项目页面
点击顶部的 "Settings" 标签
左侧菜单找到 "Environment Variables"
逐个添加：Key 填变量名（如 OPENAI_API_KEY），Value 填对应的值
Environment 选择：勾选 Production、Preview、Development，确保所有环境都能用
点 "Save"

# 如果你想用 Vercel CLI 批量导入，也可以：
# 先安装 Vercel CLI
npm i -g vercel

# 在项目目录下拉取环境变量
vercel env pull .env.local

# 或者手动添加单个变量
vercel env add OPENAI_API_KEY

忘了配环境变量会怎样？ 部署是能成功，但你的应用会各种报错——接口调不通、数据库连不上、第三方服务认证失败。记住：本地能跑不代表线上能跑，环境变量是连接两者的桥梁。

自定义域名

.vercel.app 的域名能用，但不够专业。绑定你自己的域名（比如 myapp.com）：

先去域名注册商（Cloudflare、阿里云、Namecheap 等）买一个域名
在 Vercel 项目设置里点 "Domains"
输入你的域名，点 "Add"
Vercel 会告诉你需要配置什么 DNS 记录，通常是：
- 一个 CNAME 记录，指向 cname.vercel-dns.com
- 或者 A 记录，指向 Vercel 的 IP
去你的域名注册商那边添加这些 DNS 记录
等几分钟到几小时 DNS 生效，你的域名就能访问了

SSL 证书？ Vercel 自动帮你申请和续期，不需要你管。https 开箱即用。

免费版可以绑定多个自定义域名，没有额外费用。

Serverless Functions

Vercel 的 Serverless Functions（无服务器函数）是你的后端 API 的运行方式。

简单解释：传统的后端服务器是一直运行的，哪怕没人访问也占着资源。Serverless Functions 不一样——有人请求的时候才启动，没人请求就休眠。你不用管服务器，不用管扩容，按使用量付费（免费额度足够个人项目）。

在 Next.js 项目里，你的 API Routes 就是 Serverless Functions：

// app/api/hello/route.ts
export async function GET() {
  return Response.json({ message: "Hello from serverless!" });
}

export async function POST(request: Request) {
  const body = await request.json();
  // 处理业务逻辑...
  return Response.json({ success: true, data: body });
}

注意事项：

免费版单次执行最多 10 秒，如果你的接口调用了很慢的外部 API（比如 AI 生成），可能会超时
冷启动：如果函数长时间没人调用，第一次请求会慢几百毫秒到一两秒
函数不能存储状态（因为它随时可能被销毁），需要持久化的数据放数据库

vercel.json 配置

你可以在项目根目录创建 vercel.json 来自定义部署行为：

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,POST,PUT,DELETE" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/blog/:slug",
      "destination": "/api/blog/:slug"
    }
  ]
}

几个常用场景：

{
  "functions": {
    "app/api/ai-generate/route.ts": {
      "maxDuration": 30
    }
  }
}

上面这段让特定 API 路由的超时时间从 10 秒延长到 30 秒（Pro 计划才能超过 10 秒限制）。

{
  "regions": ["hkg1", "sin1"]
}

指定函数部署到哪些区域，hkg1 是香港，sin1 是新加坡。离你的用户越近，响应越快。

Vercel 免费额度

Hobby 计划（免费）的限制，心里有个数：

资源	额度
带宽	每月 100GB
构建次数	每月 100 次
Serverless Functions 执行	每月 100GB-小时
单次函数执行时间	最多 10 秒
项目数量	无限
自定义域名	无限
团队协作	仅限个人

100GB 带宽是什么概念？ 如果你的页面平均 500KB，100GB 大约能支撑 20 万次页面访问。个人项目绑绑有余。你做到月入几万的时候再考虑升级到 Pro（$20/月）吧。

Cloudflare Pages：另一个好选择

Cloudflare Pages 是 Cloudflare 公司出的前端部署平台，和 Vercel 定位类似，但有一些不同的优势。

和 Vercel 的对比

对比项	Vercel	Cloudflare Pages
免费带宽	100GB/月	无限
免费构建	100次/月	500次/月
全球节点	多	更多（300+城市）
Next.js 支持	完美（亲儿子）	良好，但部分高级特性有坑
学习曲线	低	中等
Serverless	有	有（Cloudflare Workers）
免费数据库	无	有（D1）

什么时候选 Cloudflare？

你的流量比较大，担心 Vercel 100GB 带宽不够用
你的用户主要在国内（Cloudflare 在国内有节点，但需要备案域名）
你想用 Cloudflare 的其他产品（Workers、D1 数据库、R2 对象存储等）
你的项目是纯静态站或简单的全栈应用

基本部署步骤

打开 dash.cloudflare.com，登录或注册
左侧菜单找到 "Workers & Pages"
点击 "Create" → "Pages" → "Connect to Git"
授权 GitHub，选择你的仓库
配置构建设置：
- Framework preset 选 "Next.js"
- Build command：npm run build（通常自动填好）
- Build output directory：通常自动填好
添加环境变量（和 Vercel 类似）
点 "Save and Deploy"

部署完成后，你会得到一个 *.pages.dev 的域名。

踩坑提醒： 如果你的 Next.js 项目用了 App Router 的一些高级功能（如 revalidatePath、unstable_cache 等），在 Cloudflare Pages 上可能会遇到兼容性问题。建议先部署试试，有问题再调整。

其他部署平台

Netlify

Netlify 是老牌的前端部署平台，比 Vercel 还早。它的操作逻辑和 Vercel 类似——连接 GitHub 仓库、自动构建、自动部署。免费计划每月有 100GB 带宽和 300 分钟构建时间。Netlify 的优势在于它的生态系统很成熟，表单处理、身份认证、A/B 测试等功能都有内置方案。如果你的项目是纯静态站或者用了 Netlify 特有的功能（比如 Netlify Functions），它是不错的选择。不过对于 Next.js 项目，Vercel 的支持还是更好。

Railway

Railway 不只是前端部署，它更像一个轻量级的云服务器平台。你可以在 Railway 上部署数据库（PostgreSQL、MySQL、Redis）、后端服务、定时任务等。它支持 Docker，也能直接从 GitHub 部署。免费计划每月有 $5 的额度，大约够跑一个小型数据库加一个轻量后端。如果你的项目需要一个真正的后端服务器而不只是 Serverless Functions，Railway 是个性价比很高的选择。界面也很现代，用起来很舒服。

Fly.io

Fly.io 是一个"把你的应用部署到离用户最近的地方"的平台。它在全球很多城市都有节点，你的应用会被部署到多个地理位置。它支持 Docker 容器部署，适合需要长时间运行的后端服务（比如 WebSocket 服务器、游戏服务器）。免费计划包括 3 个共享 CPU 虚拟机和一定的内存/存储。Fly.io 的学习曲线比 Vercel 和 Railway 都高，需要了解一些 Docker 和网络知识，适合进阶用户。

部署常见问题：Top 5

1. 环境变量没配

症状： 本地跑得好好的，线上各种 undefined、接口 500 错误、数据库连不上。

修复： 去 Vercel Settings > Environment Variables 检查，确保所有 .env.local 里的变量都配了。配完之后需要重新部署才能生效（触发一次新的部署，或者在 Vercel 仪表盘里点 Redeploy）。

2. 构建失败

症状： Vercel 日志里出现红色的 Error，部署直接失败。

修复： 仔细看错误信息。常见原因：

TypeScript 类型错误：本地 dev 模式可能不检查类型，但 build 会严格检查
依赖缺失：检查 package.json 是否包含了所有需要的包
某个包不兼容 Node.js 环境：比如只在浏览器端能用的包，用 typeof window !== 'undefined' 包一下

在本地先跑一次 npm run build，如果本地构建也失败，修好再推。

3. API Routes 超时

症状： 接口调用返回 504 Gateway Timeout。

修复： Vercel 免费版的 Serverless Functions 单次执行最多 10 秒。优化方案：

减少外部 API 调用次数
加缓存，避免重复请求
用流式响应（Streaming）替代一次性返回
如果确实需要更长时间，升级到 Pro 计划（最长 60 秒）

4. 404 错误

症状： 某些页面访问返回 404 Not Found。

修复： 检查文件结构是否符合 Next.js 的路由约定。在 App Router 中：

app/
  page.tsx          → 首页 /
  about/
    page.tsx        → /about
  blog/
    [slug]/
      page.tsx      → /blog/xxx（动态路由）

注意是 page.tsx 而不是 index.tsx，是 layout.tsx 而不是 _app.tsx。

5. 图片加载失败

症状： 页面上的图片显示不出来，控制台报 Invalid src prop 之类的错误。

修复： Next.js 的 next/image 组件需要你在 next.config.js 里配置允许的图片域名：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: '*.amazonaws.com',
      },
    ],
  },
};

module.exports = nextConfig;

配完重新部署即可。

构建错误 vs 运行时错误

这两个概念搞清楚，排查问题会快很多。

构建错误（Build Error）： 发生在"盖房子"的过程中。Vercel 读你的代码、编译、打包时出错了。你的应用根本没上线。

表现：Vercel 构建日志里出现红色错误，部署状态是 "Error"
常见原因：语法错误、TypeScript 类型错误、依赖问题
怎么查：看 Vercel 的构建日志，错误信息会明确告诉你哪个文件、哪一行出问题
怎么修：在本地 npm run build，复现问题，修好再推

运行时错误（Runtime Error）： 发生在"住进去之后"。应用已经上线了，但用户在使用过程中遇到了问题。

表现：应用能访问，但某些操作会报错（白屏、500 错误、功能异常）
常见原因：环境变量没配、API 调用失败、空指针、数据格式不对
怎么查：看浏览器的 Console（F12）、看 Vercel 的 Functions 日志、看用户反馈
怎么修：根据具体错误修复代码或配置

简单记忆： 构建错误 = 代码写错了，编译不过；运行时错误 = 编译过了，但用的时候出问题。

Preview Deployments（预览部署）

这是一个非常实用的功能，很多人不知道。

什么是 Preview Deployments？ 当你创建一个 Pull Request（PR）而不是直接推到 main 分支时，Vercel 会自动为这个 PR 单独部署一个预览版本，给它一个独立的 URL。

比如你推了一个 PR 到 feature/new-homepage 分支，Vercel 会部署一个类似 your-project-abc123.vercel.app 的预览地址。你可以在 PR 的评论区看到这个链接。

为什么有用？

上线前看效果：不用在本地开两个浏览器对比，直接打开预览链接看改动
团队协作：设计师、产品经理可以直接点链接看你的改动，不需要他们懂代码
不影响生产环境：预览部署是独立的，改坏了也不会影响线上的用户
自动清理：PR 合并或关闭后，预览部署会被自动清理

怎么用？ 不需要额外配置，Vercel 默认就开启了。你只需要把代码推到一个新分支，然后在 GitHub 上创建 PR 就行。

# 创建新分支
git checkout -b feature/add-dark-mode

# 写代码、提交
git add .
git commit -m "add dark mode toggle"
git push origin feature/add-dark-mode

# 然后去 GitHub 创建 Pull Request
# Vercel 会自动在 PR 里评论一个预览链接

部署后监控

产品上线了，但你怎么知道它有没有挂？你需要做一些基本的监控。

免费监控工具推荐

UptimeRobot（uptimerobot.com）

免费版可以监控 50 个 URL
每 5 分钟检查一次你的网站是否能正常访问
挂了会发邮件/短信通知你
设置超简单：添加你的网站 URL → 选监控间隔 → 填通知邮箱，完事

Better Stack（betterstack.com）

免费版可以监控 5 个 URL，每 3 分钟检查一次
界面更好看，功能更丰富
除了 HTTP 监控，还可以监控端口、关键词等
有状态页面（Status Page），可以给用户展示系统状态

Google Search Console（search.google.com/search-console）

不是传统的监控工具，但对 SEO 很重要
提交你的网站，Google 会告诉你有没有页面抓取错误
还能看你的网站在 Google 搜索中的表现

基本监控设置步骤

以 UptimeRobot 为例，3 分钟搞定：

注册账号（可以用 Google 账号登录）
点 "Add New Monitor"
Monitor Type 选 "HTTP(s)"
Friendly Name 填你的项目名
URL 填你的网站地址（比如 https://your-project.vercel.app）
Monitoring Interval 选 5 分钟
Alert Contacts 填你的邮箱
点 "Create Monitor"

完成！如果网站挂了，5 分钟内你就会收到邮件通知。

Vercel 自带的分析

Vercel 的 Analytics 功能可以告诉你：

每天有多少人访问你的网站
哪些页面最受欢迎
页面加载速度如何
Core Web Vitals（Google 的性能指标）

免费版有基础的 Web Analytics，Pro 版有更详细的数据。在项目设置的 "Analytics" 标签里开启即可。

部署完之后做什么

产品上线不是终点，是起点。

自己从头到尾用一遍。 注册、登录、核心功能、边缘操作，走完整个流程。很多 Bug 是在真实网络环境下才会出现的——本地用 localhost 和线上用真实域名，体验完全不一样。

让朋友试用。 找三五个愿意帮忙的朋友，让他们自由使用，记录下他们遇到的问题和困惑。你会发现，你觉得理所当然的操作，他们可能完全不知道该怎么用。

看数据。 即使是简单的访问量，也能告诉你很多信息。有人来吗？他们用哪些功能？他们在哪里流失了？这些数据会指导你的下一步决策。

持续迭代。 根据用户反馈和数据，不断改进产品。部署平台让"发布新版本"变得极其简单——推代码就行。善用这个优势，快速试错，快速迭代。

产品上线的那一刻，确实会有成就感。享受一下，然后继续干活。

什么是部署？​

Vercel：Next.js 的最佳拍档​

Vercel 部署完整流程​

第一步：把代码推到 GitHub​

第二步：连接 Vercel​

第三步：配置项目​

第四步：点击 Deploy​

环境变量设置​

自定义域名​

Serverless Functions​

vercel.json 配置​

Vercel 免费额度​

Cloudflare Pages：另一个好选择​

和 Vercel 的对比​

什么时候选 Cloudflare？​

基本部署步骤​

其他部署平台​

Netlify​

Railway​

Fly.io​

部署常见问题：Top 5​

1. 环境变量没配​

2. 构建失败​

3. API Routes 超时​

4. 404 错误​

5. 图片加载失败​

构建错误 vs 运行时错误​

Preview Deployments（预览部署）​

部署后监控​

免费监控工具推荐​

基本监控设置步骤​

Vercel 自带的分析​

部署完之后做什么​