Azure container apps using docker nginx proxy_pass to another container

Update 07-05-2024

After some digging, I was made aware that Azure by default uses http protocol http 1.1 between app containers.

After reading through some more nginx docs I discovered that the nginx config by default sets the proxy_http_version to 1.0. I fixed my issue by explicitly setting proxy_http_version 1.1 in the location /api/ declaration.

Additionally, when proxying between containers, you can use the container name instead of the entire 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/;
    }
}

Original

I have two docker images, a backend (laravel) and a frontend (angularjs), which I deploy to each their Azure Container App with --target-port 80.

The container apps run on an Azure Container App Environment with a custom VNet. The VNet has an NSG which allows port 80 and 443 for inbound and outbound from any source to any source (just to get things rolling).

My backend dockerfile uses dunglas/frankenphp, which builds on top of Caddyserver.

My frontend is an Angular JS application which my dockerfile serves using Nginx.

For my backend caddyserver I import the following to allow all requests for now just to get things rolling:

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

In my frontend nginx conf.d/default.conf I have the following:

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/;
    }
}

Both container app URLs can be accessed normally via any browser without issue and serves the expected stand-alone sites.

The issue is when the frontend app needs to make a request to the backend API. As you can see in my nginx config, I do a proxy_pass on location /api/ - but the frontend request gets an 502 error and the default nginx error page as the response.