个人博客进阶：Next.js 双端智能分流部署指南 (Vercel + 阿里云 + Docker)

0. 前言

很多开发者习惯了 Vercel 的一键部署，但随着国内访问需求增加（备案号展示、访问速度优化），将博客部署到国内服务器成了刚需。本文将分享如何实现：“国内走阿里云 ECS，国外走 Vercel，一套代码，自动分流” 的顶级方案。

---

1. 核心镜像优化：从 Vercel 到 Docker

为了让 Next.js 在阿里云 2G 内存的入门服务器上流畅运行，我们启用了 Standalone 模式。

关键配置

在 next.config.mjs 中添加：

export default {
  output: 'standalone',
}

编写多阶段构建 Dockerfile

我们通过多阶段构建，将镜像体积从 1GB 压缩到了 100MB 左右，极大提升了部署速度。

• 阶段一 (Deps)：只安装生产环境依赖。
• 阶段二 (Builder)：进行项目编译。
• 阶段三 (Runner)：仅拷贝必须的编译产物，以极其精简的体积运行。

---

2. 自动化流水线：GitHub Actions CI/CD

我们配置了一套支持 多环境 自动化的 YAML 脚本。

实现逻辑：

• 推送至 develop 分支：自动打包并部署到阿里云 3001 端口，实时预览新功能。
• 推送至 main 分支：同时触发 Vercel 部署和阿里云 3000 端口部署，实现生产环境上线。

---

3. 智能 DNS 解析：全球加速

这是本方案的“灵魂”。在阿里云 DNS 后台，我们按线路进行了拆分：

解析线路	记录类型	记录值	效果
中国大陆	A 记录	阿里云服务器 IP	国内访问极速，符合备案要求
境外 (国外)	CNAME	cname.vercel-dns.com	海外访问走 Vercel 边缘 CDN

---

4. 阿里云服务器：Nginx 反向代理

为了让服务器上的多个应用（如博客正式版、测试版、营销应用）共存，我们安装并配置了 Nginx：

server {
    listen 80;
    server_name chengnanblog.cn; # 正式域名
    location / {
        proxy_pass http://localhost:3000; # 转发给生产容器
    }
}

server {
    listen 80;
    server_name test-blog.chengnanblog.cn; # 测试域名
    location / {
        proxy_pass http://localhost:3001; # 转发给测试容器
    }
}

---

5. 总结

通过这套架构，我们实现了：

1. 全自动化：SourceTree 一点推送，全球同步更新。
2. 极速体验：国内外用户都通过物理距离最近的节点访问。
3. 职业素养：从 Standalone 优化到 Docker 多阶段构建，这是从小白迈向专业开发的必经之路。

现在，我的博客已经完美起航！