6.2 部署上线与数据分析

Vercel 部署指南

什么是 Vercel？ Vercel 是一个专为前端优化的云部署平台，由 Next.js 的创始团队开发。它的核心优势是「零配置部署」：你只需推送代码到 GitHub，Vercel 就会自动构建、部署、分发到全球 CDN。对于 Next.js 项目来说，是最佳选择。

为什么选择 Vercel？

Vercel 优势：

✅ 一键部署：GitHub 推送代码自动部署
✅ 全球 CDN：访问速度极快
✅ 免费额度：个人项目足够使用
✅ 自动 HTTPS：无需配置 SSL
✅ 预览部署：每个分支都有独立链接

部署步骤

1. 准备项目

确保项目可以本地构建：


pnpm run build

2. 连接 GitHub

将代码推送到 GitHub


git init
git add .
git commit -m "初始化项目"
git branch -M main
git remote add origin https://github.com/username/repo-name.git
git push -u origin main

3. 部署到 Vercel

方法 1：通过网站

访问 https://vercel.com
用 GitHub 账号登录
点击「New Project」
选择你的仓库
点击「Deploy」

方法 2：通过 CLI


# 在项目根目录执行
vercel
 
# 根据提示：
# Set up and deploy? Y
# Which scope? (选择你的账号)
# Link to existing project? N
# What's your project's name? my-website
# In which directory is your code located? ./
 
# 部署完成，会显示：
# ✅ Production: https://my-website.vercel.app

后续更新：


# 只需执行
vercel --prod

自动部署流程


你推送代码到 GitHub
         ↓
GitHub Webhook 通知 Vercel
         ↓
Vercel 自动拉取最新代码
         ↓
自动运行 pnpm install
         ↓
自动运行 pnpm run build
         ↓
部署到全球边缘节点
         ↓
网站自动更新！

实际操作：


# 1. 修改代码
# 2. 提交
git add .
git commit -m "更新首页"
 
# 3. 推送
git push
 
# 4. 自动部署（无需任何操作）
# 去 Vercel 控制台查看部署进度

部署状态：

🟡 Building：正在构建
🟢 Ready：部署成功
🔴 Error：部署失败（查看日志）

环境变量配置

什么是环境变量？ 环境变量是存储在系统中的配置值，代码可以读取但不会写入代码文件。它的作用是：(1) 保护敏感信息（API 密钥不会上传到 GitHub）；(2) 区分环境（本地用测试数据库，线上用生产数据库）。

什么时候需要环境变量？

✅ 数据库连接字符串
✅ API 密钥
✅ 第三方服务凭证
✅ 区分开发/生产环境

在 Vercel 添加环境变量：

进入项目 → Settings → Environment Variables

添加变量：


Name: DATABASE_URL
Value: postgresql://user:pass@host:5432/db
Environment: Production, Preview, Development (全选)

Save

在代码中使用：


// 本地 .env.local
DATABASE_URL=postgresql://localhost:5432/mydb
NEXT_PUBLIC_API_KEY=abc123  // NEXT_PUBLIC_ 开头的变量会暴露给浏览器
 
// 代码中使用
const dbUrl = process.env.DATABASE_URL;
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

注意：

NEXT_PUBLIC_ 开头的变量会打包到前端代码中（不要放密钥）
普通变量只在服务端可用（安全）

正在检查访问权限...

学习进度0%

0/60 篇已完成