WSL2中Docker Compose部署多容器应用的局域网访问与Nginx代理问题

• 原Mac因存储空间不足、8GB内存无法流畅运行多Docker Compose项目，迁移至PC的WSL2（Ubuntu 20.04）环境，用Docker Compose部署了NestJS、NextJS、Nginx、Postgres四容器应用，容器间采用桥接网络
• 本地localhost可正常连接，但Nginx中/_next/路径代理失效；MacBook通过局域网访问无任何响应
• 已在Windows配置端口转发命令：netsh interface portproxy add v4tov4 listenport=80 listenaddress=192.168.3.2 connectport=80 connectaddress=172.31.32.32

Nginx配置 #

# Cache zone
# proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

# NextJS
# upstream frontend {
#   server frontend:3000;
# }

# NestJS
# upstream backend {
#   server backend:5000;
# }

server {
  listen 80 default_server;
  server_name _;
  
  server_tokens off;

  gzip on;
  gzip_proxied any;
  gzip_comp_level 4;
  gzip_types text/css application/javascript image/svg+xml;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;


  location /_next/static/ {
    proxy_cache STATIC;
    proxy_pass http://frontend:3000/_next/static/;
  }

  # location /_next/webpack-hmr {
  #     proxy_pass http://frontend;
  # } 

  # Прокси на NestJS
  location /api/ {
      proxy_pass http://backend:5000/;
      # rewrite ^/api/(.*)$ /$1 break;
  }

  # Прокси на Nextjs
  location / {
    proxy_pass http://frontend:3000;
  }
}

docker-compose.yml配置 #

version: '3.9'

networks:
  app-network:
    driver: bridge

services:
  # PostreSQL
  database:
    container_name: database
    image: 'postgres:latest'
    # command: bash -c "su - postgres -c '/usr/lib/postgresql/9.6/bin/psql  -h 127.0.0.1 -p 5432 -U postgres -c \"create database xxxxxxxxx;\"'"
    environment:
      - PGDATA=/pg
      - POSTGRES_USER=xxxxxxxx
      - POSTGRES_PASSWORD=xxxxxxxxx
      - POSTGRES_DB=xxxxxxxxx
    expose:
      - '5432'
    ports:
      - '5432:5432'
    restart: always
    networks:
      - app-network

  # NestJS Backend
  backend:
    container_name: backend
    build:
      context: ./backend
      dockerfile: Dockerfile
    volumes:
      - /app/node_modules
      - ./backend:/app
      - ./static:/app/static
    environment:
      - POSTGRES_USER=xxxxxx
      - POSTGRES_HOST=xxxxxxx
      - POSTGRES_DB=xxxxxxx
      - POSTGRES_PASSWORD=root
      - POSTGRES_PORT=5432
    depends_on:
      - database
    expose:
      - 5000
    networks:
      - app-network

  # NextJS Frontend
  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - /app/node_modules
      - ./frontend:/app
      - ./static:/app/public
    depends_on:
      - backend
    expose:
      - 3000
    networks:
      - app-network

  nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
    depends_on:
      - frontend
      - backend
    restart: always
    ports:
      - '80:80'
    volumes:
      - ./static:/static
    networks:
      - app-network

一、局域网访问无响应问题 #

1. 调整容器端口绑定方式
   WSL2的IP会随重启变化，依赖端口转发容易失效。直接修改docker-compose.yml中nginx的ports配置，让容器绑定Windows主机所有网卡IP：

   ports:
     - '0.0.0.0:80:80'
   

   这样无需额外端口转发，局域网设备可直接通过Windows主机的局域网IP（192.168.3.2）访问服务。

2. 检查Windows防火墙
   确保Windows防火墙允许80端口的入站连接，可临时关闭防火墙测试是否为拦截原因。

3. 验证网段连通性
   在MacBook上ping Windows主机的局域网IP（192.168.3.2），若不通则检查PC的局域网设置，确保设备处于同一网段，无网络隔离限制。

二、/_next/static/代理失效问题 #

1. 启用缓存配置
   当前Nginx配置中proxy_cache_path处于注释状态，但location /_next/static/使用了proxy_cache STATIC，这会导致Nginx缓存逻辑失效甚至报错。取消注释缓存配置：

   proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;
   

   同时在Nginx的Dockerfile中添加目录创建命令，确保缓存目录存在：

   RUN mkdir -p /var/cache/nginx
   

2. 简化proxy_pass路径
   调整location /_next/static/的代理配置，去掉路径末尾的重复部分，避免路径拼接错误：

   location /_next/static/ {
     proxy_cache STATIC;
     proxy_pass http://frontend:3000;
   }
   

3. 验证NextJS服务状态
   进入frontend容器，确认静态资源路径本身可访问：

   docker exec -it frontend curl http://localhost:3000/_next/static/
   

   若返回404，检查NextJS的构建配置，确保静态资源生成路径正确。

4. 补充必要代理头
   在location /_next/static/中添加完整的代理头信息，确保请求正确传递：

   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;
   

内容的提问来源于stack exchange，提问作者Anton Duditsky