Report this

What is the reason for this report?

WebSocket use in App Platform (wss)

Posted on May 16, 2024

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.



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!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Hey!

I haven’t tested this exact setup myself, but from what I understand, App Platform should support wss, as long as everything is going through port 443. That means your backend service (or your Nginx layer) needs to be listening on a public HTTP port that supports WebSocket upgrades, custom ports like 5000 might not work unless handled properly inside your container.

A couple things to double-check:

  • In your App Spec, make sure the backend service is exposing the correct port, probably 80 if Nginx is serving everything.

  • Also make sure that in the App Platform service config, the HTTP port is set to match the one Nginx is listening on.

  • App Platform only supports WebSockets on publicly routable ports, so internal service-to-service traffic might not upgrade correctly unless you’re routing through the public domain.

If you want to rule out Nginx being the issue, you could try exposing the backend directly (without the proxy) just to test WebSocket behavior.

Hope that helps, would be curious to hear what ends up working!

- Bobby

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.