Websocket connection failed - Jhipster Vue for production with secure connection

Question

My build version is Jhipster 7.9.3, monolith, with Vue and websocket. I want to run my application in secure connection via SSL/https.

I had run the server (backend) using gradlew -Pprod -x webapp --spring.profiles.active=prod,tls and for the front-end using nginx reverse proxy with a secure connection https (ssl/letsencrypt).

Now the problem is, there is error with websocket connection; WebSocket connection to 'wss://localhost:9060/ws' failed, as according to the documentation when the frontend is secure, it also the same with the backend. The backend is also secured, but it seems the WSS is not accessible

console log;

Production log:

GET https://app.mydomain.com/api/account 401 (Unauthorized) (anonymous) @ xhr.js:220 t.exports @ xhr.js:16 tracker.service.ts:39 Tue Sep 20 2022 19:37:41 GMT+0800 ( Time) 'Opening Web Socket...' abstract-xhr.js:132 POST https://app.mydomain.com/websocket/tracker/692/aruisji5/xhr?access_token=bla bla bla 405 (Not Allowed) Uncaught SyntaxError: Unexpected token '<' (at jsonp?access_token=ebla bla bla tracker.service.ts:39 Tue Sep 20 2022 19:37:43 GMT+0800 ( Time) 'Connection closed to undefined' tracker.service.ts:39 Tue Sep 20 2022 19:37:43 GMT+0800 (Time) 'STOMP: scheduling reconnection in 5000ms' tracker.service.ts:39 Tue Sep 20 2022 19:37:48 GMT+0800 (Time) 'Opening Web Socket...' websocket.js:6 WebSocket connection to 'wss://app.mydomain.com/websocket/tracker/629/qbujjtrn/websocket?access_token=bla bla bla token bla bla failed: POST https://app.mydomain.com/websocket/tracker/629/xqnxz0w0/xhr_streaming?access_token=bla bla bla token bla bla bla 405 (Not Allowed)

Dev console log:

xhr.js:220 GET https://localhost:9000/management/info 502 (Bad Gateway) WebSocketClient.js:16 WebSocket connection to 'wss://localhost:9060/ws' failed: WebSocketClient @ WebSocketClient.js:16 initSocket @ socket.js:24 (anonymous) @ socket.js:48 index.js:561 [webpack-dev-server] Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

For now, I run my production build using a secure connection for the frontend and backend but with websocket error still there.

EDIT: The error from console in production is the same with dev build, So I am using example from the dev console.

Answer 1

I am updating this post with the current solution I have right now. The first problem I have is to use NGINX server and secure connection using SSL/TLS. I am using AWS amazon ec2 ubuntu and reconfigured the nginx block like this and it is working. The websocket is working now, just to make sure to set up the proxy;

server {
    listen      [::]:80;
    listen      80;
    server_name test.yourserver.com;

    root /var/www/test.yourserver.com/html;
    index index.html index.htm index.nginx-debian.html;

    access_log  /var/log/nginx/test.yourserver.com-access.log;
    error_log   /var/log/nginx/test.yourserver.com-error.log;

    location /api {
        proxy_pass https://localhost:8080/api;
    }

    location /i18n {
        proxy_pass https://localhost:8080/i18n;
    }

    location /content {
        proxy_pass https://localhost:8080/content;
    }

    location /app {
        proxy_pass https://localhost:8080/app;
    }

    location /swagger-ui {
        proxy_pass https://localhost:8080/swagger-ui;
    }

    location /test {
        proxy_pass https://localhost:8080/test;
    }

    location /management {
        proxy_pass https://localhost:8080/management;
    }

    location /swagger-resources {
        proxy_pass https://localhost:8080/swagger-resources;
    }

    location /v2 {
        proxy_pass https://localhost:8080/v2;
    }

    location /auth {
        proxy_pass https://localhost:8080/auth;
    }

    location /websocket {
        proxy_pass https://localhost:8080/websocket;
        proxy_http_version 1.1;
        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_pass_header X-XSRF-TOKEN;
        proxy_set_header X-NginX-Proxy true;
    }

    location / {
        try_files $uri $uri/ /index.html;
    } 
}