Azure容器应用中Nginx反向代理至其他容器的502问题及解决

将两个Docker镜像（Laravel后端、AngularJS前端）分别部署到Azure容器应用，指定--target-port 80。容器应用运行在带自定义VNet的Azure容器应用环境中，VNet的NSG允许80和443端口的任意入站、出站流量。

后端Dockerfile基于dunglas/frankenphp（构建于Caddyserver之上），临时允许所有请求的Caddyserver配置如下：

(cors) {
        header {
                Access-Control-Allow-Headers *
                Access-Control-Allow-Methods *
                Access-Control-Allow-Origin *
        }
        @options {
                method OPTIONS
        }
        respond @options 204
}

前端是AngularJS应用，由Nginx提供服务，其conf.d/default.conf配置如下：

server {
    server_name test-frontend-cors.somesubdomain.westus.azurecontainerapps.io;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ $uri.html /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    location /api/ {
        proxy_buffering off;
        proxy_set_header Host test-backend-cors.somesubdomain.westus.azurecontainerapps.io;
        proxy_pass https://test-backend-cors.somesubdomain.westus.azurecontainerapps.io/;
    }
}

两个容器应用的URL均可正常访问，但前端请求后端API时，Nginx的proxy_pass配置返回502错误及默认错误页。

排查发现Azure容器应用之间默认使用HTTP 1.1协议，而Nginx默认将proxy_http_version设为1.0，通过在location /api/配置块中显式设置proxy_http_version 1.1解决了问题。此外，容器间代理时可直接使用容器名替代完整URL，优化后的示例配置如下：

server {
    server_name ...

    location / {
        ...
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        ...
    }

    location /api/ {
        proxy_buffering off;
        proxy_http_version 1.1;
        proxy_pass http://test-backend-cors/;
    }
}

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