6.2 部署上线与数据分析

Vercel 部署指南

为什么选择 Vercel？

Vercel 优势：

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

部署步骤

1. 准备项目

确保项目可以本地构建：


npm 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 自动拉取最新代码
         ↓
自动运行 npm install
         ↓
自动运行 npm run build
         ↓
部署到全球边缘节点
         ↓
网站自动更新！

实际操作：


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

部署状态：

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

环境变量配置

什么时候需要环境变量？

✅ 数据库连接字符串
✅ 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_ 开头的变量会打包到前端代码中（不要放密钥）
普通变量只在服务端可用（安全）

域名购买与配置

域名基础知识

什么是域名？

IP 地址 = 门牌号（192.168.1.1）
域名 = 小区名（example.com）

为什么需要域名？

❌ 记住 76.76.21.21 很困难
✅ 记住 google.com 很简单

域名结构


https://blog.example.com

https://     → 协议 (HTTP Secure)
blog         → 三级域名 (子域名)
example      → 二级域名 (主域名)
.com         → 顶级域名 (TLD)

常见顶级域名

后缀	含义	价格	适用场景
.com	Commercial	$10-15/年	商业、通用（最推荐）
.net	Network	$10-15/年	网络服务
.org	Organization	$10-15/年	组织、非盈利
.io	Input/Output	$30-40/年	科技、初创公司
.ai	Artificial Intelligence	$60-80/年	AI 相关

建议：

✅ 首选 .com（最权威）
✅ 其次 .net、.org
⚠️ .io、.ai 虽酷但贵

域名注册商推荐

注册商	价格	优点	缺点	推荐指数
Namecheap	⭐⭐⭐⭐⭐	便宜、免费隐私保护	界面稍复杂	⭐⭐⭐⭐⭐
Cloudflare	⭐⭐⭐⭐⭐	接近成本价、免费 CDN	需要已有域名转入	⭐⭐⭐⭐⭐
阿里云	⭐⭐⭐⭐	国内访问快	需要实名认证	⭐⭐⭐⭐
腾讯云	⭐⭐⭐⭐	价格实惠	需要实名认证	⭐⭐⭐⭐

购买域名流程（以 Namecheap 为例）

第 1 步：搜索域名

访问 https://www.namecheap.com
在搜索框输入想要的域名
点击搜索

第 2 步：加入购物车

选择域名
点击「Add to Cart」
购买年限：建议先买 1 年

第 3 步：配置选项


Domain Privacy (域名隐私保护):
✅ 勾选 (通常免费)

Auto-Renew (自动续费):
⚠️ 建议关闭（避免忘记取消导致扣费）

第 4 步：结账

创建账号（或登录）
填写支付信息
确认支付

✅ 购买完成！域名现在属于你了！

DNS 配置

什么是 DNS？

DNS = Domain Name System（域名系统）

作用：将域名翻译成 IP 地址


用户输入: google.com
         ↓
DNS查询: google.com → 142.250.185.46
         ↓
浏览器访问: 142.250.185.46

DNS 记录类型

类型	作用	示例
A	将域名指向 IPv4 地址	`example.com → 76.76.21.21`
CNAME	将域名指向另一个域名	`www.example.com → example.com`

绑定到 Vercel

在 Vercel 项目中，进入 Settings → Domains
输入域名：
```
example.com
```

Vercel 会显示 DNS 配置：


Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

去域名注册商配置 DNS
等待 DNS 生效（5 分钟到 48 小时）
SSL 证书自动配置（Vercel 自动完成）

✅ 完成！现在访问 https://example.com 就是你的网站了！

HTTPS 与 SSL

为什么需要 HTTPS？

特性	HTTP	HTTPS
安全性	明文传输，可被窃听	加密传输，安全
SEO	Google 降权	Google 优先收录
浏览器提示	⚠️ 不安全	🔒 安全
现代 API	部分功能不可用	全部功能可用

结论：HTTPS 是必须的！

Vercel 自动 SSL

好消息：Vercel 自动提供免费 SSL 证书！

无需任何配置：

绑定域名
DNS 生效后
Vercel 自动申请并配置 Let’s Encrypt 证书
自动续期

网站数据分析

为什么需要数据分析？

没有数据的问题 ❌

不知道有多少人访问
不知道用户从哪里来
不知道哪个页面最受欢迎
不知道用户在哪里离开

有了数据 ✅

📊 每天多少访客
📍 用户来自哪些国家/城市
📄 哪些页面访问量最高
⏱ 用户停留多久
📱 使用什么设备（手机/电脑）

Google Analytics 4 (GA4) 设置

第 1 步：创建 GA4 账号

访问 https://analytics.google.com
使用 Google 账号登录
点击「开始衡量」

填写账号信息：


账号名称: My Website Analytics
地区: 中国 (或你的地区)
货币: CNY (人民币)

点击「下一步」

第 2 步：创建数据流

选择平台: 网站

填写信息：


网站网址: https://example.com
数据流名称: My Website

点击「创建数据流」

第 3 步：获取衡量 ID

创建完成后，你会看到：


衡量 ID: G-XXXXXXXXXX

复制这个 ID，我们马上要用。

第 4 步：添加到网站

Next.js 项目：

安装依赖：


npm install @next/third-parties

在 app/layout.tsx 添加：


import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  )
}

纯 HTML 网站：

在 <head> 标签内添加：


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

第 5 步：验证安装

部署更新后的网站
访问你的网站
在 GA4 后台查看实时数据

关键指标解读

实时数据：

当前在线人数
活跃页面
来源渠道

受众概览：

用户数 vs 访问数
新用户 vs 老用户
设备类型分布
地理位置分布

流量获取：

搜索引擎流量（SEO 效果）
直接访问（品牌知名度）
社交媒体流量
外链流量

用户行为：

热门页面
跳出率
平均停留时间
转化率

数据分析最佳实践

设置目标转化
- 邮箱订阅
- 购买
- 下载文件
- 联系表单
定期查看数据
- 每周查看趋势
- 每月分析总结
用数据驱动改进
- 发现问题 → 制定方案 → 实施 → 验证效果

使用 AI 优化网站运营

分析 GA4 数据


Command + L

输入：
请帮我分析我的网站数据：

【GA4 数据摘要】
- 每日访客：500
- 跳出率：65%
- 平均停留时间：1分30秒
- 热门页面：首页、产品页
- 来源：70%搜索引擎，20%直接访问，10%社交媒体

【问题】
- 跳出率较高
- 产品页转化率低

【问题】
请分析可能原因，并给出优化建议。

SEO 优化建议


Command + L

输入：
请为我的网站制定 SEO 优化策略：

【网站信息】
- 类型：个人博客
- 内容：AI 编程教程
- 目标关键词：AI 编程
- 当前排名：未排名

【竞争对手】
- 网站A：权威度高，内容丰富
- 网站B：用户体验好

请提供：
1. 关键词策略
2. 内容优化建议
3. 技术 SEO 检查清单
4. 外链建设方案