蓝绿部署实践 🚀

📌 问题背景

在传统的Next.js项目部署中，我们经常会遇到以下问题：

🔴 部署过程中用户访问出现样式加载失败
🔴 静态资源无法正确加载
🔴 Next.js的后台任务被意外中断
🔴 用户体验断层，刷新页面出现短暂服务不可用

这些问题主要是因为在常规部署流程中，我们通常会直接在运行的服务上进行代码更新和重启，导致服务临时不可用。

💡 蓝绿部署解决方案

蓝绿部署(Blue-Green Deployment)是一种零停机部署策略，通过准备两套相同的生产环境，在不影响用户体验的情况下完成系统升级。

🔄 方案原理

准备两个完全相同的Next.js服务环境：
- 🔵 蓝环境：端口3019
- 🟢 绿环境：端口5019
使用宝塔面板的Nginx配置管理流量分发
- 在任一时刻，只有一个环境接收真实用户流量
- 另一个环境作为待命状态，用于准备新版本部署

🔄 具体实施流程

假设当前蓝环境(3019端口)正在提供服务：

准备绿环境 📦
- 将最新代码同步到绿环境(5019端口)目录
- 在绿环境执行构建过程：
```
npm install
npm run build
```
- 此时用户依然访问的是蓝环境(3019端口)，不受影响
启动绿环境服务 ▶️
- 使用PM2启动或重启绿环境服务：
```
pm2 restart next-app-green
```
- 确认绿环境服务正常运行

切换流量 🔀

修改Nginx配置，将用户流量从蓝环境切换到绿环境：

# 原配置
upstream nextjs_upstream {
    server 127.0.0.1:3019;
}

# 新配置
upstream nextjs_upstream {
    server 127.0.0.1:5019;
}

重载Nginx配置：
```
nginx -s reload
```

验证与回滚机制 ✅
- 验证绿环境(5019端口)是否正常提供服务
- 如发现问题，可立即切换回蓝环境(3019端口)

✨ 核心优势

这种蓝绿部署方案具有以下显著优势：

零停机时间 ⏱️：用户在整个部署过程中不会感知到服务中断
保持任务连续性 🔄：不活跃的环境不会被关闭，其中运行的任务和进程继续执行
快速回滚能力 ⏪：如果新版本出现问题，只需修改Nginx配置即可立即回滚
资源利用率高 📈：两个环境可以轮流部署，充分利用服务器资源

🛠️ 宝塔Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://nextjs_upstream;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

upstream nextjs_upstream {
    server 127.0.0.1:5019; # 当前活跃环境
    # server 127.0.0.1:3019; # 注释掉非活跃环境
}

📊 部署流程示意

🔵 3019运行中 → 用户访问3019 → 代码同步到5019 → 5019构建完成
                                                    ↓
🔄 流量切换 ← Nginx配置修改 ← 5019服务启动 ← 5019构建验证
                                                    ↓
🟢 5019运行中 → 用户无感知迁移 → 3019保持运行但无流量

🎯 总结

通过蓝绿部署策略，我们成功解决了Next.js项目在传统部署方式下面临的问题。这种方案不仅保证了用户体验的连续性，还为后端任务提供了稳定的运行环境。

在实际应用中，这种部署模式特别适合以下场景：

🚀 高流量Next.js应用
⏱️ 包含重要后台任务的Next.js项目
👨‍💻 对用户体验和服务连续性要求较高的应用

通过宝塔面板和Nginx的配合，这种部署策略的实施变得简单高效，大大提升了Next.js应用的可靠性和用户满意度。

蓝绿部署：零停机时间发布的最佳实践