VPS Docker容器中Nuxt应用配置SSL后出现Bad Gateway错误如何解决

你遇到的Bad Gateway错误由两个核心配置错误导致：

1. Nginx运行在独立的Docker容器内，配置里的http://127.0.0.1:3000指向的是Nginx容器自身的环回地址，不是宿主机上的Nuxt服务，也没有正确指向同网络下的Nuxt容器。
2. HTTPS server块的proxy_pass配置填写了自身域名，导致请求死循环，无法转发到上游服务。

第一步：调整docker-compose.yml配置 #

你不需要将Nuxt的3000端口暴露到公网，只需要让同网络下的Nginx可以访问即可，修改nuxt服务配置：

nuxt:
  image: sda2000den/agency:0.4
  container_name: nuxt_app
  # 删掉原来的ports配置，换成expose，仅对Docker内部网络开放端口
  expose:
    - "3000"

同时给nginx服务添加依赖声明，确保Nuxt先启动：

nginx:
  image: nginx:1.15-alpine
  # 新增下面这行
  depends_on:
    - nuxt
  ports:
    - "80:80"
    - "443:443"
  # 其余原有配置保持不变

第二步：替换完整的Nginx配置文件 #

直接用下面的配置替换你现有的Nginx配置，同时实现HTTP强制跳转HTTPS、证书验证、请求转发到Nuxt服务的功能：

# HTTP服务块：仅做证书验证和强制跳转HTTPS
server {  
    listen 80;
    server_name studioagnc.com;

    # Certbot证书验证路径保持不变
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    # 所有其他请求301跳转至HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

# HTTPS服务块：处理SSL请求并转发到Nuxt
server {
    listen 443 ssl;
    server_name studioagnc.com;
    
    # SSL证书配置保持不变
    ssl_certificate /etc/letsencrypt/live/studioagnc.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/studioagnc.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Gzip压缩配置移到这里，仅对有效请求生效
    gzip on;
    gzip_types  text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        # 这里直接用Docker服务名nuxt访问同网络下的Nuxt容器
        proxy_pass http://nuxt:3000;
        # 补充必要的代理头，确保Nuxt能拿到正确的客户端信息
        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 up -d --force-recreate

等待1分钟左右即可正常通过HTTPS访问你的域名。

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