Use reverse proxy for websocket in Azure Container Apps

Question

I have two container apps, one is backend API and other one is Angular 2 app hosting in Nginx.

I use Nginx reverse proxy to proxies http request to API.

Follow this article https://techcommunity.microsoft.com/t5/apps-on-azure-blog/use-nginx-as-a-reverse-proxy-in-azure-container-app/ba-p/3870513

I make it work to proxy http but it's doesn't in case with Websocket.

Here my nginx config:

Answer 1

Hi ,

It seems like there might be some configuration issues in your Nginx setup for WebSocket proxying. Here's a revised version of your Nginx configuration that might address the problem:

server {
    listen 80;
    large_client_header_buffers 4 16k;
    root /var/www/fapa;
    try_files $uri /index.html;

    location /api/ {
        proxy_pass https://example-api-backend.azurecontainerapps.io;
        proxy_ssl_server_name on;
        proxy_http_version 1.1;
    }

    location /ws/ {
        proxy_pass https://example-api-backend.azurecontainerapps.io;
        proxy_http_version 1.1;
        proxy_ssl_server_name on;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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;
        proxy_read_timeout 86400;
        proxy_send_timeout 86400;
        proxy_redirect off;
        proxy_buffering off;
    }
}

Please try this and accept answer if it helps

Answer 2

Solved

It's turn out that because my Websocket server reject CORS request.

Right now I have to set Cors in websocket to "*" to make it work. I don't know the reason behind this since it's not the case with API part.

In development, if I add proxy_set_header Host $host; Everything work find I don't need to config cors in websocket server.

but in Azure Container proxy_set_header Host $host; cause error 400 Too Large request Header.

Here the configuration

    location /ws/ {
      proxy_pass https://backend-example.azurecontainerapps.io;
        proxy_http_version 1.1;
        proxy_ssl_server_name on;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

}