在生产环境中，我们经常需要在一台服务器上部署多个前端项目，并且每个项目可能对应不同的后端接口。本文将介绍如何通过 Docker 快速搭建 Nginx 环境，实现多项目共存及跨服务器反向代理。

1. 架构目标

• 服务器 A (192.168.x.22)：部署 Nginx 容器，托管前端静态资源。
• 服务器 B (192.168.x.61)：运行后端 API 服务（如 Python FastAPI/Java Spring）。
• 项目要求：
  • 访问 /：显示老项目。
  • 访问 /sjzt/：显示新项目（数据中台）。
  • 接口转发：通过 /api/ 转发至后端。

---

2. 前端项目打包（关键点）

如果你的项目部署在子路径（如 /sjzt/），在打包前必须修改项目的 Base URL。

Vite 项目 (vite.config.js)

export default defineConfig({
  base: '/sjzt/', // 必须与 Nginx location 配置一致
  build: {
    outDir: 'dist'
  }
})

Vue CLI 项目 (vue.config.js)

module.exports = {
  publicPath: '/sjzt/'
}

打包完成后，将 dist 文件夹上传到服务器。

---

3. 准备 Nginx 配置文件

在服务器上创建 nginx.conf。为了方便扩展，我们采用主配置文件直接管理的方式。

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8848; # 容器内监听端口
        server_name  yourdomain.com; # 域名或 localhost

        # --- 1. 老项目 (部署在根路径) ---
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; # 支持 SPA 路由刷新
        }

        # --- 2. 新项目 (部署在二级路径 /sjzt/) ---
        location /sjzt/ {
            alias  /usr/share/nginx/html/shujuzhongtai/; # 使用 alias 对应子目录
            index  index.html index.htm;
            try_files $uri $uri/ /sjzt/index.html;
        }

        # --- 3. 后端 API 反向代理 ---
        location /api-sjzt/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # 转发至跨服务器的后端地址
            proxy_pass http://192.168.x.61:8000/; 
        }
    }
}

---

4. Docker 部署方案

我们可以通过两种方式启动。

方式 A：直接运行容器

docker run -d \
  --name my-nginx \
  -p 22091:8848 \
  -v /home/user/nginx.conf:/etc/nginx/nginx.conf:ro \
  -v /home/user/dist_old:/usr/share/nginx/html:ro \
  -v /home/user/dist_new:/usr/share/nginx/html/shujuzhongtai:ro \
  nginx:latest

方式 B：进入已有容器修改（调试常用）

1. 拷贝文件：docker cp ./dist/. my-nginx:/usr/share/nginx/html/shujuzhongtai/
2. 修改配置：docker exec -it my-nginx vi /etc/nginx/nginx.conf
3. 热重载：docker exec -it my-nginx nginx -s reload

---