Docker环境下无法从浏览器访问3000端口的Next.js应用求助

你在app容器内启动了Next.js的开发服务（端口3000），但当前docker-compose.yaml仅将web容器的3000端口映射到了主机。主机访问localhost:3000时，请求会被转发到web容器，而该容器并没有运行3000端口的服务，因此无法访问。EXPOSE指令仅用于声明容器开放的端口，不会自动完成主机与容器的端口映射，所以添加它无法解决问题。

方案一：直接映射app容器的3000端口（快速调试用） #

修改docker-compose.yaml中app服务的配置，添加端口映射规则：

services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: app.dockerfile
    working_dir: /var/www
    volumes:
      - ./:/var/www
    depends_on:
      - "db"
    ports:
      - "3000:3000" # 新增：将主机3000端口映射到app容器的3000端口

执行以下命令重启服务：

docker-compose down && docker-compose up -d

之后重新进入app容器启动Next.js开发服务，即可通过http://localhost:3000访问。

方案二：通过Nginx反向代理Next.js服务（更适合生产/统一入口） #

如果希望通过localhost（80端口）直接访问Next.js服务，可修改Nginx配置实现反向代理：

1. 编辑nginx/conf.d/app.conf文件，添加反向代理规则：

server {
    listen 80;
    server_name localhost;
    root /var/www/public;

    location / {
        try_files $uri $uri/ @nextjs;
    }

    location @nextjs {
        proxy_pass http://app:3000;
        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;
    }
}

2. 重启web容器使配置生效：

docker-compose restart web

3. 在app容器内启动Next.js开发服务后，直接访问http://localhost即可加载Next.js应用。

内容的提问来源于stack exchange，提问作者Jorge Andres Ramirez Granada