使用Docker Compose配置Nginx反向代理Next.js遇502 Bad Gateway问题

我在EC2的Amazon Linux环境下，尝试配置Nginx作为Next.js应用的HTTPS反向代理，结果出现了502 Bad Gateway错误。

我的配置文件 #

nginx.conf #

events {}
    
http {
    server {
        listen 80;
        server_name mydomain1.com mydomain2.com mydomain3.com;
        return 301 https://$server_name$request_uri;
    }

    server {
        listen 443 ssl;
        server_name mydomain1.com mydomain2.com mydomain3.com;

        ssl_certificate /etc/letsencrypt/live/mydomain1.com/****.pem;
        ssl_certificate_key /etc/letsencrypt/live/mydomain1.com/*****.pem;

        location / {
            proxy_pass http://app:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

Next.js应用的Dockerfile #

FROM node:18-alpine
WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

ENV NODE_ENV production
ENV PORT 3000

EXPOSE 3000
CMD ["npm", "start"]

docker-compose.yml #

version: "3"
services:
  app:
    image: username/docker_hub_repo_name
    ports:
      - 3000:3000
    networks:
      - web
  nginx:
    image: nginx:latest
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - /etc/letsencrypt:/etc/letsencrypt
    depends_on:
      - app
    networks:
      - web
networks:
  web:
    driver: bridge

容器状态与日志 #

docker ps输出 #

CONTAINER ID   IMAGE               COMMAND                  CREATED         STATUS         PORTS                                                                      NAMES
ba2ea4bc2931   nginx               "/docker-entrypoint.…"   5 seconds ago   Up 4 seconds   0.0.0.0:80->80/tcp, :::80->80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp   next-js-app-nginx-1
1fd8e63f5585   ******/next-app     "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   80/tcp, 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp                          next-js-app-1

Next.js容器日志 #

> next start

  ▲ Next.js 14.2.4
  - Local:        http://localhost:80

 ✓ Starting...
 ✓ Ready in 683ms

遇到的问题 #

1. 明明在Dockerfile中设置了ENV PORT 3000，但Next.js实际运行在80端口，导致Nginx反向代理到http://app:3000时无法连接，触发502错误。
2. 若尝试将Next.js改为80端口，会出现端口占用错误：

Error response from daemon: driver failed programming external connectivity on endpoint next-js-nginx-1 (0e63bdb3c2d0392d80758d10ccdd7b4a2ae741b4ef6e188e9c9cff37bde6f04c): Bind for 0.0.0.0:80 failed: port is already allocated

EC2安全组配置 #

入站规则已开放80、443和22端口：

sgr-******  IPv4    HTTP    TCP 80  0.0.0.0/0   –
–
sgr-******  IPv4    HTTPS   TCP 443 0.0.0.0/0   –
–
sgr-******  IPv4    SSH TCP 22  0.0.0.0/0

请问我遗漏了什么配置？

解决步骤 #

1. 强制Next.js运行在3000端口 #

Next.js在Docker环境中可能被默认配置或其他环境变量覆盖端口设置，可通过以下方式强制指定：
修改Dockerfile的启动命令，直接指定端口：

CMD ["npm", "start", "--", "-p", "3000"]

同时检查项目根目录的.env文件，确保没有PORT=80这类覆盖配置。

2. 优化docker-compose端口配置（可选） #

Nginx和Next.js在同一个Docker网络内，无需将Next.js的3000端口映射到EC2主机，移除端口映射可减少暴露风险：

services:
  app:
    image: username/docker_hub_repo_name
    # 移除ports配置，仅保留内部网络通信
    networks:
      - web

3. 验证容器间连通性 #

进入Nginx容器，测试能否访问Next.js的3000端口：

docker exec -it next-js-app-nginx-1 curl http://app:3000

若能返回页面内容，说明网络连通正常；若失败，检查Docker网络配置是否正确。

4. 重启容器生效 #

修改配置后，重启所有容器：

docker-compose down
docker-compose up -d

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