出海技术人的“全能基础设施套装” —— Vercel 篇

在上一篇文章中，我们介绍了如何使用 Next.js 和 AI 功能快速打造一个出海应用平台，接下来，我们将深入讨论如何部署和运维你开发好的平台，为你的客户提供服务。

我们无需像传统部署方式那样，自己购买服务器并自行部署和维护。我们直接使用现成的托管服务，大幅降低运维成本和复杂度，达到快速项目起步的目的。

网站托管平台 —— Vercel

Vercel 是一个为开发者提供的全能基础设施套装，它对开发者极其友好，提供了一个 CLI 工具，在本地就可以快速部署和管理你的应用程序。

此外，对于 Next.js 应用，Vercel 提供了开箱即用的支持，自动优化性能和可扩展性。此外，对于其他流行的 SPA 和 SSR 框架以及静态网站，都有不错的支持。

最近，Vercel 的运行环境也新增了 Python，对于 Python 后端应用 (如 FastAPI, Flask 等) 也逐步开始支持。不过当前还处于 Beta 阶段，可能会有一些限制，也不保证你的 Python 应用一定能在 Vercel 上稳定运行。

费用上，Vercel 提供了免费的 Hobby Plan，对于项目起步成本很低，对于个人开发者和小型项目足够了。

Hobby Plan 的主要限制

• 每月流量限制 100 GB-Hrs
• Cron jobs 限制 2 个
• 不支持团队协作
• 不支持连接 GitHub 组织仓库

其他免费额度和付费额度的对比可以参考官方文档: limits

部署 Vercel

我们还是以一个 Next.js 应用为例，来演示如何使用 Vercel 进行部署。Vercel 部署 Next.js 应用极其简单，你只需要简单运行一个 vercel 命令即可。

安装 vercel CLI 工具:

npm install -g vercel

然后在你的 Next.js 项目根目录下运行 vercel 命令即可:

$ vercel

Vercel CLI 43.0.0
? Set up and deploy “~/projects/digital-products-store”? yes
? Which scope should contain your project? abcfy2's projects
? Link to existing project? no
? What’s your project’s name? digital-products-store
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? no
🔗  Linked to abcfy2s-projects/digital-products-store (created .vercel)
🔍  Inspect: https://vercel.com/abcfy2s-projects/digital-products-store/CmrGEx51EW8keytvBwJ4Ka2ruVsz [19s]
✅  Production: https://digital-products-store-e4kt70ik6-abcfy2s-projects.vercel.app [19s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/abcfy2s-projects/digital-products-store/settings

对于大部分 js SPA 或 SSR 应用框架来说，Vercel 几乎开箱即用，这里你一路回车就可以了，非常简单。Vercel CLI 会帮助你在 Vercel 控制台上创建一个项目，并将你的代码上传到 Vercel 进行构建和部署，最后给你一个访问链接，整个过程就是这么简单丝滑。

之后终端输出就可以看到你的应用已经成功部署到 Vercel 上了。

对于不希望上传到 Vercel 服务器的文件，可以定义一个 .vercelignore 文件，类似于 .gitignore，在这个文件中列出不需要上传的文件或目录。

深入 Vercel

只有第一次会部署到 Production 环境之外，之后每一次运行 vercel 命令都会给你部署到 Preview 环境。

Vercel 的多环境管理

Vercel 是支持多环境管理的，默认提供三个环境:

• Production: 生产环境，正式对外提供服务的环境
• Preview: 预览环境，供产品环境发布前检测使用，默认情况下不公开，用户需要授权才可以访问。
• Development: 开发环境，供本地开发使用，但是通常你不会使用这个环境，因为绝大多数开发框架都有本地 dev 方式运行

如果需要更多自定义的环境，那么需要升级 Pro 及以上订阅才支持。

Preview 环境默认情况下需要授权访问，如果你希望 Preview 环境也可以像 Production 环境一样公开访问，那么可以在 Project Settings —> Deployment Protection —> 关闭 Vercel Authentication 功能。

不同的环境可以配置不同的环境变量和域名，但是使用同一套代码。因此你可以通过配置环境变量的方式个性化每个环境的行为。

想设置环境变量，可以在 Project Settings —> Environment Variables 中进行设置。这个页面可以针对每个环境单独设置环境变量，也可以设置所有环境通用的环境变量。如果需要设置的环境变量非常多，这个页面也支持 Import .env 的方式上传你本地的 .env 文件，或者直接复制 .env 的内容直接粘贴到文本框中，非常方便。

也可以在本地使用 vercel env 命令来管理环境变量:

# 添加单一环境变量到所有环境
$ vercel env add FOO
? What s the value of FOO? BAR
? Add FOO to which Environments (select multiple)? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Production
 ◉ Preview
 ◉ Development


# 添加单一环境变量到指定环境
$ vercel env add FOO production
? What s the value of FOO? BAR

不过 Vercel CLI 目前不支持批量导入 .env 文件的内容，只能一个一个添加。所以当需要添加大量环境变量的时候，还是建议直接在 Vercel 控制台上操作导入 .env 文件更方便。

执行 vercel 命令会部署到 Preview 环境，执行 vercel --prod 会部署到 Production 环境，执行 vercel dev 会在本地启动一个开发服务器，模拟 Development 环境。

Vercel 的域名管理

Vercel 会提供一个 vercel.app 的二级域名给你访问你的应用，你也可以绑定你自己的域名。对于一个优秀的项目，拥有自己的独立域名也是品牌的象征，我们强烈建议使用自己的域名给用户提供服务。

使用自己的域名之前，需要将域名添加到 Vercel 的控制台上。Vercel 会给你生成 DNS 认证记录，你需要将这些记录添加到你的域名 DNS 服务商的控制台上，完成域名认证，之后就可以使用自己的域名了。官方文档 有详细的操作步骤。

但是注意设置了自己的域名之后，可能会遇到一些 origin 域名不匹配的问题，如果遇到了这些问题，可以参考我们之前的排错文章:

• 排错：Astro 部署 Vercel 环境发起 POST 请求遇到 403 错误
• 排错：Vercel Preview 环境下 Better Auth 登录 invalid origin 问题

Vercel 配置

Vercel 可以直接在 Web UI 上进行配置，此外，还支持通过 vercel.json 文件进行配置，这样你的项目配置可以跟随代码一并版本控制，进行班本化管理。你可以在项目根目录下创建一个 vercel.json 文件，来定义项目的配置项。

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "next build"
}

注意在 vercel.json 中的配置项优先级高，会覆盖 Web UI 上的配置。

完整的配置项可以在 Vercel 官方文档 中查看，这里我们列几个比较有用的：

• framework: 指定项目使用的框架，Vercel 会根据这个框架来优化构建和部署流程，如果自动识别的有误，你可以手动配置这个项。
• headers: 自定义 HTTP 响应头
• outputDirectory: 定义构建输出目录，默认情况下 Vercel 会自动识别输出目录，但如果你有特殊需求，可以手动指定。
• redirects & rewrites: 定义 URL 重定向/重写规则
• functions: 自定义 Serverless Functions 的一些配置。这里有两个非常有用的配置，maxDuration和 memory。maxDuration 定义 function 的最大执行时间，单位为秒，默认是 10 秒。对于一些需要较长时间处理的请求 (比如 AI 响应)，可以适当调整这个值。免费用户最大可以设置到 60 秒，Pro 用户可以设置到 800 秒。memory 定义 function 的内存大小，单位为 MB，默认是 1024 MB。对于 Pro 用户可以设置到 3009。

CI / CD 支持

Vercel 支持与 GitHub, GitLab, Bitbucket 等代码托管平台集成，提供了自动化的 CI/CD 流程。在项目设置中，你可以连接你的代码仓库，当你提交代码到主分支时，Vercel 会自动触发构建和部署流程。对于个人开发者非常友好，开箱即用。

如果你是团队协作开发，那么我们建议使用 github actions 方式部署到 Vercel。因为它不需要给每个团队成员都开通 Vercel 的权限，也不需要支付额外的 team 成员成本。只需要管理员提供 vercel token 访问即可。管理员按照此文档申请并记下这个 token: How do I use a Vercel API Access Token?

然后在 GitHub 仓库中添加一个 action 配置即可，参考如下:

# .github/workflows/ci.yml
name: "CI"

on: [push, workflow_dispatch]

env:
  ALIAS_DOMAIN_PREV: "preview.example.com"
  ALIAS_DOMAIN_PROD: "www.example.com"

jobs:
  deploy:
    runs-on: ubuntu-latest
    if: ${{ contains(
      fromJson('["push", "workflow_dispatch"]'),
      github.event_name) &&
      contains(
      fromJson('["main", "prod"]'),
      github.ref_name)
      }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - name: Install Vercel CLI
        run: npm install -g vercel
      - name: Deploy to Vercel Action
        uses: BetaHuhn/deploy-to-vercel-action@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          GITHUB_DEPLOYMENT_ENV: ${{ github.ref_name == 'prod' && 'production' || 'preview' }}
          PRODUCTION: ${{ github.ref_name == 'prod' }}
          ALIAS_DOMAINS: ${{ github.ref_name == 'prod' && env.ALIAS_DOMAIN_PROD || env.ALIAS_DOMAIN_PREV }}
          VERCEL_SCOPE: "secrets.VERCEL_SCOPE"

在这个配置中示例中，当我们 push 或点击 Actions 页面中手工运行 workflow 时，会触发这个 CI 流程，对于 main 分支会发布到 Preview 环境，而对于 prod 分支会发布到 Production 环境。

其余需要配置的 secrets 包括：

• VERCEL_TOKEN: Vercel 的访问令牌
• VERCEL_ORG_ID: Vercel 的组织 ID，在组织 Settings —> General 页面可以找到
• VERCEL_PROJECT_ID: Vercel 的项目 ID，在 Project Settings —> General 页面可以找到
• VERCEL_SCOPE: Vercel 的作用域，可以在 Vercel 控制台上找到，也可以从 URL 中看出来，大部分可能是 xxxx-projects 这样的格式。

注意 GITHUB_TOKEN 是 GitHub Actions 运行时自动生成，自动对当前仓库进行授权，不需要手动配置。