Question

WebSocket use in App Platform (wss)

I have a react frontend and a .NET Core 8.0 backend that works beautifully on dev machine.

Finally decided to deploy it via App Platform but I’m having issues with secure websocket communication.

As I understand it, AP is handling my SSL stuff so I just need to properly specify the URLs in my environment variables.

My working dev variables look like this:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_WS_URL_ws=ws://localhost:5000/ws
REACT_APP_WS_URL_game=ws://localhost:5000/game

So I made my .env.production variables as such:

REACT_APP_API_URL=https://mydomain.com/api
REACT_APP_WS_URL_ws=wss://mydomain.com/ws
REACT_APP_WS_URL_game=wss://mydomain.com/game

While the API calls work fine, the WebSocket connection fails with the following error:

Firefox can't establish a connection to the server at wss://mydomain.com/ws

Testing the WebSocket connection directly via Postman connects successfully.

I use an Nginx configuration that I copy into my Dockerfile for the frontend. Here’s the Nginx configuration:

nginx
server {
    listen 80;
    server_name mydomain.com;

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

    location /api/ {
        proxy_pass http://backend-api:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /ws/ {
        proxy_pass http://backend-api:5000/ws;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";  # Corrected case
        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_cache_bypass $http_upgrade;
    }

    location /game/ {
        proxy_pass http://backend-api:5000/game;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";  # Corrected case
        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_cache_bypass $http_upgrade;
    }
}

In this configuration, “backend-api” is the name of my backend compute section.

I’m seeking advice on what else could be causing this issue or if there are any additional configurations I need to make for WebSocket connections to work correctly in production on DigitalOcean App Platform.


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel