Next.js 项目跨境部署方案
背景
部署一个面向全球用户的 Next.js 项目时，往往会遇到一个棘手的问题：如何让国内外用户都能流畅访问？
- 国外用户：可以直接访问 Vercel，体验很好
- 国内用户：直连 Vercel 速度慢，甚至可能无法访问
本文记录了一套完整的解决方案，通过 Vercel + 阿里云 CDN + OSS 的组合，实现了国内外用户的双线访问。
架构概览
1┌─────────────────────────────────────────────────────────────┐2│ 用户访问层 │3├──────────────────────┬──────────────────────────────────────┤4│ 国内用户访问 │ 国外用户访问 │5│ blog.qiuyedx.com │ qiuvision.com │6│ (阿里云 CDN) │ (Vercel) │7└──────────┬───────────┴──────────────┬───────────────────────┘8 │ │9 └──────────┬───────────────┘10 │11 ┌──────────▼──────────┐12 │ Next.js 应用 │13 │ (Vercel 部署) │14 │ qiuvision.com │15 └──────────┬──────────┘16 │17 ──────────────┴──────────────18 │ │19┌───────▼────────┐ ┌───────▼────────┐20│ 图片资源访问 │ │ 数据文件访问 │21│ (用户浏览器) │ │ (Vercel 服务端) │22└───────┬────────┘ └───────┬────────┘23 │ │24┌───────▼─────────────┐ ┌────────▼──────────────┐25│ 阿里云 CDN │ │ OSS 传输加速 │26│ qiuvision-assets. │ │ oss-accelerate. │27│ qiuyedx.com │ │ aliyuncs.com │28└───────┬─────────────┘ └────────┬──────────────┘29 │ │30 └──────────┬────────────────┘31 │32 ┌───────▼───────┐33 │ 阿里云 OSS │34 │ 对象存储服务 │35 └───────────────┘核心组件
1. Next.js 应用 - Vercel 部署
域名：qiuvision.com
特点：
- 支持静态页面（SSG）
- 支持服务端渲染（SSR）
- 自动构建和部署
- 全球 CDN 边缘节点
适用场景：
- 国外用户直接访问
- 需要服务端渲染的动态内容
- API Routes 的处理
2. 阿里云 OSS - 图片资源存储
Bucket 名称：qiuvision-reference-picture
功能：
- 存储项目中的图片资源
- 提供稳定的对象存储服务
- 成本相对较低
访问方式：
- 不直接对外暴露原始域名
- 通过 CDN 加速域名访问
- 通过传输加速域名访问（服务端）
3. 阿里云 CDN - 图片资源加速
加速域名：qiuvision-assets.qiuyedx.com
源站：阿里云 OSS（qiuvision-reference-picture）
用途：
- 加速 OSS 中图片资源的访问
- 降低 OSS 流量成本
- 提供更好的国内访问速度
使用场景：
- 用户浏览器加载图片时使用
- 适用于前端页面中的
<img>标签 - 适用于 CSS 背景图等静态资源
4. OSS 传输加速 - 全球加速功能
加速域名：qiuvision-reference-picture.oss-accelerate.aliyuncs.com
Endpoint：oss-accelerate.aliyuncs.com
特点：
- OSS 自带的全球加速功能
- 无需额外配置 CDN
- 自动选择最优路径
使用场景：
- Vercel 服务端访问 OSS 中的
data.json文件 - 服务端渲染时读取数据
- 避免地理位置限制导致的访问慢问题
5. 阿里云 CDN - 全站加速
加速域名：blog.qiuyedx.com
源站：Vercel（qiuvision.com）
用途：
- 加速 HTML、CSS、JS 等全站内容
- 让国内用户能够裸连且快速访问
- 作为国内用户的主要访问入口
备注：
- 没有使用
www.qiuvision.com是因为懒得再给qiuvision.com进行 ICP 备案 qiuyedx.com已有 ICP 备案，可以直接使用子域名
访问流程
国外用户访问流程
- 用户访问
qiuvision.com - DNS 解析到 Vercel 的 IP
- Vercel 边缘节点返回 HTML 内容
- 浏览器加载图片资源：
- 图片 URL 指向
qiuvision-assets.qiuyedx.com - DNS 解析到阿里云 CDN 节点
- CDN 从 OSS 获取图片并缓存
- 返回图片给浏览器
- 图片 URL 指向
- 如需服务端数据：
- Vercel 服务端通过
oss-accelerate.aliyuncs.com访问data.json - 传输加速选择最优路径访问 OSS
- 返回数据给 Vercel 进行渲染
- Vercel 服务端通过
国内用户访问流程
- 用户访问
blog.qiuyedx.com - DNS 解析到阿里云 CDN 节点（国内）
- CDN 回源到 Vercel 获取内容并缓存
- CDN 返回 HTML 内容给用户
- 浏览器加载图片资源：
- 图片 URL 指向
qiuvision-assets.qiuyedx.com - DNS 解析到阿里云 CDN 节点（国内）
- CDN 从 OSS 获取图片并缓存
- 返回图片给浏览器
- 图片 URL 指向
- 如需服务端数据（同国外用户）：
- Vercel 服务端通过
oss-accelerate.aliyuncs.com访问data.json
- Vercel 服务端通过
域名映射关系
| 域名 | 用途 | 指向 | 备注 |
|---|---|---|---|
qiuvision.com | 主站域名（国外） | Vercel | 未备案，国内可能慢 |
blog.qiuyedx.com | 主站域名（国内） | 阿里云 CDN → Vercel | 已备案，国内快速 |
qiuvision-assets.qiuyedx.com | 图片 CDN | 阿里云 CDN → OSS | 图片资源加速 |
qiuvision-reference-picture.oss-accelerate.aliyuncs.com | OSS 传输加速 | 阿里云 OSS | 服务端访问数据文件 |
配置要点
1. Vercel 配置
在 Vercel 项目设置中添加自定义域名：
qiuvision.com
环境变量配置：
1# OSS 传输加速 Endpoint2OSS_REGION=oss-accelerate3OSS_ENDPOINT=oss-accelerate.aliyuncs.com4
5# 图片 CDN 域名6IMAGE_CDN_DOMAIN=qiuvision-assets.qiuyedx.com2. 阿里云 CDN 配置（图片加速）
域名：qiuvision-assets.qiuyedx.com
源站类型：OSS 域名
源站地址：qiuvision-reference-picture.oss-cn-shanghai.aliyuncs.com
缓存配置：
- 图片文件（jpg, png, webp 等）：缓存 30 天
- 其他静态资源：缓存 7 天
回源配置：
- 开启私有 Bucket 回源
- 配置 OSS 访问密钥
3. 阿里云 CDN 配置（全站加速）
域名：blog.qiuyedx.com
源站类型：自定义源站
源站地址：qiuvision.com
缓存配置：
- HTML 文件：缓存 10 分钟（或不缓存）（根据场景和需求可以设置更长一些）
- CSS/JS 文件：缓存 1 天
- 图片文件：不缓存（因为已经用了图片 CDN）
高级配置：
- 开启 HTTPS
- 配置 SSL 证书
- 开启 HTTP/2
- 开启 GZIP 压缩
4. OSS 传输加速配置
在阿里云 OSS 控制台：
- 选择 Bucket：
qiuvision-reference-picture - 找到「传输管理」→「传输加速」
- 开启「全球加速」
- 获取加速域名：
qiuvision-reference-picture.oss-accelerate.aliyuncs.com
在代码中使用：
1import OSS from 'ali-oss';2
3const client = new OSS({4 region: 'oss-accelerate', // 使用传输加速5 accessKeyId: process.env.OSS_ACCESS_KEY_ID,6 accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,7 bucket: 'qiuvision-reference-picture',8});9
10// 读取 data.json11const result = await client.get('data.json');成本分析
Vercel
- 免费额度：每月 100GB 带宽，对于中小型项目足够
- 超出部分：按使用量计费
阿里云 OSS
- 存储费用：按存储容量计费，约 ¥0.12/GB/月
- 流量费用：CDN 回源流量较低，成本可控
阿里云 CDN
- 流量费用：按 CDN 流量计费，比 OSS 直接流量便宜
- 图片 CDN：约 ¥0.24/GB（国内）
- 全站 CDN：约 ¥0.24/GB（国内）
传输加速
- 加速费用：按请求次数和流量计费
- 适用场景：服务端访问，流量较小，成本可控
优势总结
- 双线访问：国内外用户都能流畅访问
- 成本优化：通过 CDN 降低 OSS 流量成本
- 性能优化：CDN 加速 + OSS 传输加速，全方位提升速度
- 灵活配置：可根据实际情况调整 CDN 缓存策略
- 易于维护：Vercel 自动部署，无需手动运维
潜在问题与注意事项
1. 缓存一致性
问题：CDN 缓存可能导致内容更新不及时
解决方案：
- HTML 文件设置较短的缓存时间（或不缓存）
- 静态资源使用版本号或 hash
- 必要时手动刷新 CDN 缓存
2. HTTPS 证书
问题：多个域名需要配置 SSL 证书
解决方案：
- Vercel 自动提供免费证书
- 阿里云 CDN 可使用免费的 DV 证书
- 或者使用 Let's Encrypt
3. 跨域问题
问题：图片 CDN 域名与主站域名不同，可能遇到跨域
解决方案：
- 在 CDN 配置中添加 CORS 响应头
- 设置
Access-Control-Allow-Origin: *
4. 备案要求
问题：阿里云 CDN 加速国内需要域名 ICP 备案
解决方案：
- 使用已备案的域名（如
qiuyedx.com） - 或者对新域名进行备案（需要 15-20 天）
5. SEO 考虑
问题：国内外使用不同域名可能影响 SEO
解决方案：
- 在页面中添加
<link rel="canonical">标签 - 统一指向主域名
qiuvision.com - 或者根据用户地理位置做智能 DNS 解析（未实施）
后续优化方向
- 智能 DNS：根据用户地理位置自动解析到最优域名
- CDN 策略优化：根据实际访问数据调整缓存策略
- 图片格式优化：使用 WebP/AVIF 等现代图片格式
- 懒加载：对图片资源实施懒加载，减少首屏加载时间
- 监控告警：配置 CDN 和 OSS 的监控，及时发现问题
总结
这套部署方案通过 Vercel、阿里云 CDN 和 OSS 的组合，成功解决了 Next.js 项目的跨境访问问题。核心思路是：
- 国外用户：直连 Vercel，体验最佳
- 国内用户：通过 CDN 加速，速度同样快
- 图片资源：统一使用 OSS + CDN，降低成本
- 服务端数据：使用 OSS 传输加速，保证全球访问
虽然配置略显复杂，但一次配置完成后，后续维护成本很低，是一个值得推荐的方案。
最后更新时间：2025-11-11
适用版本：Next.js 14+
QiuYeDx
一个热爱技术、追求品味的开发者，专注于前端开发、交互动效、二次摄影等领域。