React Academy · 课时

部署到 Vercel：零配置与预览 URL

Q: 「部署到 Vercel：零配置与预览 URL」这节课中我会学到什么？

将 GitHub 仓库连接到 Vercel，配置环境变量，并使用预览部署。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 GitHub 仓库连接到 Vercel，配置环境变量，并使用预览部署。

部署到 Vercel：零配置与预览 URL 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

为什么选择 Vercel

Vercel 是由 Next.js 团队打造的平台。它提供零配置部署：连接 GitHub 仓库后，Vercel 会自动检测框架、进行构建，并在每次推送时部署。

连接代码仓库

从 Vercel 控制面板导入 GitHub/GitLab/Bitbucket 代码仓库。Vercel 会检测框架（Next.js、Vite、CRA）并自动配置构建设置。

项目设置

Vercel 会自动检测：框架、构建命令（npm run build）、输出目录（.next、dist）和安装命令（npm install）。如有需要，可以在项目设置中覆盖这些配置。

环境变量

在 Vercel 控制面板的“项目设置”→“环境变量”下添加环境变量。为生产、预览和开发环境设置不同的值。

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

预览部署

每次 Git 分支推送和拉取请求都会获得一个唯一的预览 URL（例如 myapp-git-feature-xyz.vercel.app）。在合并之前分享该 URL 进行审查，无需手动设置预发布环境。

自定义域名与 SSL

在 Vercel 控制面板中添加自定义域名。将 DNS（A 记录或 CNAME）指向 Vercel 的 IP 地址，Vercel 会自动处理 SSL 证书的配置。

vercel.json 配置

微调部署行为：重定向、标头、重写和区域选择。

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

使用 Vercel CLI 从终端进行部署、在本地拉取环境变量并管理项目。

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

无服务器函数

api/（页面路由器）或 app/api/*/route.ts（应用路由器）中的文件会自动在 Vercel 的边缘运行时或 Node.js 运行时中部署为无服务器函数。

部署钩子

创建部署钩子（Webhook URL），以从外部服务触发部署——这对于应触发网站重新部署的 CMS 内容更改很有用。

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

单体仓库部署

在 Nx 或 Turborepo 单体仓库中，将 Vercel 根目录设置为特定应用的文件夹，并配置构建命令以使用单体仓库任务运行器。

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

快速检查

什么是 Vercel 预览部署？

回顾

将 Git 代码仓库连接到 Vercel，即可实现零配置部署。每个分支都会获得一个预览 URL。在控制面板中按环境管理环境变量，使用 vercel.json 配置重定向和标头，并使用 Vercel CLI 在终端中部署和拉取环境变量。

常见问题解答

「部署到 Vercel：零配置与预览 URL」课时是免费的吗？

是的 — 「部署到 Vercel：零配置与预览 URL」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「部署到 Vercel：零配置与预览 URL」这节课中我会学到什么？

将 GitHub 仓库连接到 Vercel，配置环境变量，并使用预览部署。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「部署到 Vercel：零配置与预览 URL」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy