Nginx config for NextJS + Websocket server

Nginx config for NextJS + Websocket server

worker_processes  1;

events {
  worker_connections  1024;
}

http {

    sendfile off;
    keepalive_timeout 65;

    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    upstream node {
        server 127.0.0.1:3000;
    }

    upstream websocket {
        server 127.0.0.1:3001;
    }

    server {

        listen 3002;

        location / {
            proxy_pass http://node;
            proxy_set_header "Connection" "";
            proxy_http_version 1.1;
        }

        location /ws {
            proxy_pass http://websocket;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header Host $host;
        }

        location /_next/webpack-hmr {
            proxy_pass http://node;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header Host $host;
        }

    }

}

package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "pnpm run \"/^dev:.*/\"",
    "dev:next": "next dev",
    "dev:wss": "PORT=3001 tsx watch src/server/wssDevServer.ts --tsconfig tsconfig.server.json",
    "dev:proxy": "nginx -c $(pwd)/dev.nginx.conf",
    "devproxy:stop": "nginx -s stop",
    "devproxy:reload": "nginx -s reload",
    "...": "the rest of your config",
  }
}

Updated the nginx config - the previous version wouldn't reconnect properly when you had server restarts. Thanks to nikolay on serverfault for the answer: https://serverfault.com/questions/1149750/local-nginx-server-requires-reload-every-time-dev-server-restarts