Docker环境下Nginx配置自定义域名遇Bad Gateway问题求助

我在Docker环境部署了React项目，目前可以通过103.253.72.246:3000正常访问。现在想给它配置自定义域名my-4portfolio.online，已经完成Nginx配置文件设置，并且把DNS指向了服务器IP，但访问域名时出现Bad Gateway错误，求解决办法。

相关配置文件 #

主Nginx配置文件（nginx.conf） #

events {
  worker_connections 1024;
}

http {
  include /etc/nginx/sites-enabled/*;
}

站点配置文件（sites-enabled目录下的配置） #

server {
    listen 80;
    listen [::]:80;
    
    server_name my-4portfolio.online;

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

Docker Compose配置文件（docker-compose.yml） #

version: '3'
services:
  frontend:
    build:
      context: ./client
    ports:    
      - "3000:80"

  nginx:
    image: nginx:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/sites-enabled:/etc/nginx/sites-enabled
    depends_on:
      - frontend

排查与解决步骤 #

• 修正代理端口：React容器内部服务运行在80端口，Docker Compose只是把容器的80映射到主机3000。容器间通信直接用容器内部端口，所以Nginx配置里的proxy_pass要改成http://frontend:80，而不是3000。
• 验证容器间连通性：进入Nginx容器，执行curl http://frontend:80，检查是否能正常获取页面内容。如果失败，确认两个容器处于同一Docker网络（默认情况下Compose会创建统一网络，无需额外配置，但若有自定义网络需确保都加入）。
• 重载Nginx配置：修改配置后，重启Nginx容器：docker-compose restart nginx，或者在容器内执行nginx -s reload使配置生效。
• 确认DNS解析：用nslookup my-4portfolio.online检查域名是否已正确解析到服务器IP，避免本地DNS缓存导致的解析延迟。
• 确保服务就绪：depends_on仅保证容器启动顺序，不确保服务完全就绪。可以给frontend容器添加健康检查，或者在React项目的启动脚本里确保服务稳定后再对外提供访问。

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