部署预览：Vercel 与环境变量

这一课你将能做到

1. 把 React 项目部署到 Vercel，获得公开访问的 URL
2. 配置环境变量，区分开发和生产环境的敏感配置
3. 理解 CI/CD 基础流程，实现 push 代码自动部署

为什么要学

代码在自己电脑上跑得再好，别人看不到等于没做。部署是把项目发布到服务器，让任何人通过 URL 访问。对初学者来说，部署是「作品上线」的最后一公里——面试官、朋友、用户，都需要一个能点开的链接。

传统部署要买服务器、配 Nginx、传文件，门槛高。现代平台（Vercel、Netlify）把这变成了「连接 GitHub，点一下按钮」——push 代码就自动构建部署，还有免费额度、HTTPS、全球 CDN。

先建立图像

本地开发                    部署后
localhost:5173        →     https://my-app.vercel.app
    ↓                          ↑
git push ──→ GitHub ──→ Vercel 自动构建 ──→ 全球 CDN
                              ↑
                        环境变量注入

Vercel 的工作流：监听 GitHub 仓库 → 检测到 push → 拉代码 → npm install → npm run build → 把 dist 目录发布到 CDN。

跟着做

步骤 1：准备项目

确保上一课的待办项目已推送到 GitHub：

git add .
git commit -m "完成待办清单应用"
git push origin main

确认 package.json 有 build 脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

本地验证构建：

npm run build
npm run preview

npm run build 会生成 dist/ 目录，里面是优化后的静态文件。npm run preview 在本地预览构建结果。

步骤 2：部署到 Vercel

1. 访问 vercel.com，用 GitHub 账号登录
2. 点击 Add New → Project
3. 在仓库列表中找到 todo-app，点击 Import
4. Vercel 自动检测到 Vite 项目，配置已预填：
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
5. 点击 Deploy

等待 1-2 分钟，部署完成后获得 URL：https://todo-app-xxxx.vercel.app。

步骤 3：自动部署（CI/CD）

部署后，Vercel 自动配置了 CI/CD：

# 本地修改代码
echo "// 添加新功能" >> src/App.jsx

# 提交并推送
git add .
git commit -m "更新界面"
git push origin main

push 后打开 Vercel 控制台，会看到新的部署自动触发，1-2 分钟后线上更新。这就是 CI/CD：持续集成（自动构建测试）+ 持续部署（自动发布）。

：创建 PR 时，Vercel 会为每个 PR 生成独立的预览 URL，合并前可以先看效果。