前后端部署实战：Vue3+Vite+PNPM + NestJS + Docker + Nginx + 云效（阿里云）流水线蓝绿部署

小阿俊
728 阅读3分钟

本文适合：中高级前端/全栈开发者、希望提升项目部署自动化水平的工程师。

随着项目复杂度提高，传统的部署方式已无法满足高可用与持续交付的需求。本文将介绍一个完整的现代部署实践方案，包含：

  • 前端（Vue3 + Vite + PNPM）部署脚本
  • 后端（NestJS + Docker + Nginx）蓝绿部署配置
  • 使用阿里云云效流水线实现全自动部署流程

✅ 前端部署方案（Vue3 + Vite + PNPM）

步骤 1：配置免密 SSH 登录服务器

为了实现自动上传构建产物，推荐先配置好 SSH 免密登录。

不清楚如何配置可参考这篇文章：如何配置免密 SSH 登录

步骤 2：编写前端部署脚本 deploy.sh

#!/bin/bash

# === 配置项 ===

LOCAL_DIST_DIR=dist # 本地打包产物目录
REMOTE_USER=root # 登录服务器用户名
REMOTE_HOST=服务器IP地址
REMOTE_SSH_PORT=22 # SSH 端口
REMOTE_PARENT_DIR=/root/project/html/admin # 服务器目标路径

# ========================

echo "📦 开始构建前端..."
pnpm build
if [ $? -ne 0 ]; then
  echo "❌ 构建失败，终止部署"
  exit 1
fi

echo "🔍 检查本地构建目录..."
if [ ! -d "$LOCAL_DIST_DIR" ]; then
  echo "❌ 构建目录不存在"
  exit 1
fi

echo "📁 确保远程目录存在：$REMOTE_PARENT_DIR"
ssh -p $REMOTE_SSH_PORT $REMOTE_USER@$REMOTE_HOST "mkdir -p $REMOTE_PARENT_DIR"

echo "🚀 上传 dist 到服务器..."
rsync -avz --delete -e "ssh -p $REMOTE_SSH_PORT" $LOCAL_DIST_DIR $REMOTE_USER@$REMOTE_HOST:$REMOTE_PARENT_DIR/

echo "✅ 部署完成！dist 文件夹已上传至 $REMOTE_PARENT_DIR/dist"

步骤 3：执行发布脚本

bash deploy.sh

🧩 后端服务部署（NestJS + Docker Compose + Nginx）

步骤 1：编写 Docker Compose 配置

version: '3.8'

services:

  # 蓝环境网关服务
  server-blue:
    build:
      context: .
      dockerfile: Dockerfile
    image: hope/server:blue
    container_name: hope-server-blue
    command: node dist/main.js
    restart: always
    ports:
      - "3300:3300"
    environment:
      - NODE_ENV=production
      - PORT=3300
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3300/health"]
      interval: 5s
      timeout: 3s
      retries: 10
    networks:
      - hope-network
    volumes:
      - ./logs:/app/logs
    depends_on:
      - redis

  # 绿环境网关服务
  server-green:
    build:
      context: .
      dockerfile: Dockerfile
    image: hope/server:green
    container_name: hope-server-green
    command: node dist/main.js
    restart: always
    ports:
      - "3301:3300"
    environment:
      - NODE_ENV=production
      - PORT=3300
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3300/health"]
      interval: 5s
      timeout: 3s
      retries: 10
    networks:
      - hope-network
    volumes:
      - ./logs:/app/logs
    depends_on:
      - redis

  # Nginx 服务
  nginx:
    image: nginx:alpine
    container_name: hope-nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/ssl:/etc/nginx/ssl
      - ./nginx/html:/usr/share/nginx/html
    networks:
      - hope-network
    depends_on:
      - server-blue
      - server-green

networks:
  hope-network:
    driver: bridge

volumes:
  redis-data:
  mysql-data:

步骤 2：编写 Nginx 虚拟主机配置（支持蓝绿切换）

image.png

server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/xxx.pem;
    ssl_certificate_key /etc/nginx/ssl/xxx.key;

    # ✅ 蓝绿切换点，修改此处可切换流量方向
    set $backend_host hope-server-blue:3300;
    # set $backend_host hope-server-green:3300;

    location / {
        proxy_pass http://$backend_host;
        resolver 127.0.0.11 valid=30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_cache_bypass $http_upgrade;
    }
}

📌 记得将域名、证书路径、端口等信息根据实际情况修改

☁️ 使用阿里云云效流水线实现自动部署

步骤 1：新建流水线

  • 模版选择：组织模版 - 空模版
  • 类型选择：其他 · 执行命令

image.png

image.png

步骤 2：配置代码源与触发器

  • 选择代码库：阿里云云效
  • 选择分支：如 master
  • 配置触发方式：自动触发 / 手动触发

image.png

image.png

步骤 3：选择构建集群

建议选择靠近你服务器所在地的构建集群，提高部署速度。

image.png

步骤 4：配置构建命令

image.png

#!/bin/bash
set -e

echo "🎯 进入项目目录"
cd 服务器项目地址

echo "🔄 拉取最新代码"
git reset --hard
git pull origin master

echo "🚀 启动 blue 容器"
docker-compose up -d --build server-blue

echo "⏱️ 等待 blue 容器健康检测"
for i in {1..20}; do
  status=$(docker inspect --format='{{json .State.Health.Status}}' hope-server-blue)
  echo "当前健康状态: $status"
  if [[ $status == "\"healthy\"" ]]; then
    echo "✅ hope-server-blue 已健康"
    break
  else
    echo "⌛️ 等待中...（${i}/20）"
    sleep 3
  fi
  if [[ $i -eq 20 ]]; then
    echo "❌ 容器健康检查失败，终止部署"
    exit 1
  fi
done

echo "📦 切换 Nginx 到 blue"
sed -i 's/set \$backend_host hope-server-.*/set $backend_host hope-server-blue:3300;/' ./nginx/conf.d/xxx.conf

grep 'set \$backend_host' ./nginx/conf.d/xxx.conf || true

docker exec hope-nginx nginx -t
docker exec hope-nginx nginx -s reload

echo "🧹 停止并移除旧 green 容器"
docker-compose stop server-green
docker-compose rm -f server-green

📌 记得将服务器项目位置、nginx配置文件名等信息根据实际情况修改

步骤 5：保存流水线，提交代码触发部署

你可以在本地执行：

git add .
git commit -m "✨ 新版本部署"
git push origin master

阿里云云效将自动拉取代码并完成部署流程！

🚀 总结

通过本文的实践，你将获得以下能力：

  • 使用 shell 脚本将前端构建结果自动上传服务器
  • 利用 Docker Compose 构建蓝绿部署架构
  • 使用 Nginx 配合配置切换，实现零停机部署
  • 借助阿里云云效流水线，打造自动化部署工作流

本文结合GPT编写，有遗漏、不通顺的地方欢迎指正👏👏👏👏👏

avatar
文章
阅读
粉丝