Skip to content

Invalid SockJS path 'XXX' required to have 3 path segments.

๊ตฌ๊ธ€์— Invalid SockJS path ๋ผ๋Š” ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด ์ด์™€ ๊ฐ™์€ ์˜ค๋ฅ˜ ๋กœ๊ทธ์— ๋Œ€ํ•œ ์กฐ์น˜๋กœ Stomp ํด๋ผ์ด์–ธํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ผ๋Š” ๋‹ต๋ณ€์ด๋‚˜ ์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ์— ์งˆ๋ฌธํ•˜๋ผ๋Š” ๋‹ต๋ณ€์„ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์•„๋ฌดํŠผ ์œ„ ์ƒํ™ฉ์— ๋Œ€ํ•œ ์›์ธ์€ ๋ช…ํ™•ํžˆ ์•Œ ์ˆ˜ ์—†๋Š” ์ƒํ™ฉ์—์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ตฌ์กฐ์—์„œ ํ•ด๋‹น ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

  1. Nginx Websocket Proxy
  2. Spring WebSocket with Stomp + SockJS
  3. sockjs-client@1.6.1
  4. @stomp/stompjs@7.0.0

์ด์Šˆ ํŒŒ์•… โ€‹

nginx.conf์™€ ๊ฐ™์ด ์—”์ง„์—‘์Šค์—์„œ ์›น์†Œ์ผ“ ์ฃผ์†Œ ํŒจํ„ด์— ๋Œ€ํ•ด ๋ฐฑ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์œผ๋กœ์˜ ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ ๊ตฌ์„ฑ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ํ•ด๋‘” ์ƒํƒœ์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  Stomp ๋ฐฉ์‹์˜ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์—”๋“œํฌ์ธํŠธ๋Š” /ws/stomp ๋กœ ์ •์˜๋˜์–ด์žˆ์—ˆ๋‹ค. ๋ณธ๋ž˜ /ws ๋Š” ์ผ๋ฐ˜์ ์ธ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ์„ ์ˆ˜ํ–‰ํ•˜๊ณ  /ws/stmop๋กœ ์‹œ์ž‘๋˜๋Š” ๊ฒƒ์€ Stomp๋กœ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ์˜๋„ํ•œ ๊ฒƒ์ด๋‹ค.

txt
http {
    upstream backend {
        server app:8080;
        keepalive 128;
    }

    server {
        location /ws/ {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # hop-by-hop
            proxy_http_version 1.1;
            proxy_set_header Connection "upgrade";
            proxy_set_header Upgrade $http_upgrade;
            proxy_read_timeout 65s;
        }
    }
}

Vite ๊ฐœ๋ฐœ ์„œ๋ฒ„์—์„œ์˜ Proxy ๊ตฌ์„ฑ์˜ ๊ฒฝ์šฐ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ Stomp ๋ฐฉ์‹์˜ ์›น์†Œ์ผ“ ์—ฐ๊ฒฐ์„ ์ˆ˜ํ–‰๋œ๋‹ค.

ํ•˜์ง€๋งŒ, ์—”์ง„์—‘์Šค์™€ ํ•จ๊ป˜ ๋™์ž‘์ค‘์ธ ๋ฐฐํฌ ํ™˜๊ฒฝ์—์„œ๋Š” Stomp ํด๋ผ์ด์–ธํŠธ๊ฐ€ SockJS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ๊ฒฐ์„ ์ˆ˜ํ–‰ํ•˜๋ ค๊ณ  ํ• ๋•Œ /ws/stomp/info?t=0 ์—”๋“œํฌ์ธํŠธ์— ๋Œ€ํ•ด 404 ์‘๋‹ต์„ ๋ฐ›๊ฒŒ๋˜๊ณ  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋กœ๊ทธ์—๋Š” Invalid SockJS path ...๊ฐ€ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ๋‹ค.

์†”๋ฃจ์…˜ โ€‹

์ด๋ฆฌ์ €๋ฆฌ ์‹œ๋„ํ•ด๋ณธ ๊ฒฐ๊ณผ ํ•ด๊ฒฐ์ฑ…์€ ์ผ๋ฐ˜์ ์ธ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ๊ณผ Stomp ๋ฐฉ์‹์˜ ์—ฐ๊ฒฐ์„ ์•„์˜ˆ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. /ws/ ์ด์™ธ์— /ws-stomp/๋กœ Stomp ๋ฐฉ์‹์˜ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ์„ ์œ„ํ•œ ๋ณ„๋„์˜ ์—”๋“œํฌ์ธํŠธ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๊ณ  ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ ๊ตฌ์„ฑ์„ ํ•˜๊ณ ๋‚˜๋‹ˆ ํ•ด๋‹น ์ฆ์ƒ์€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜๋‹ค.

txt
http {
    upstream backend {
        server app:8080;
        keepalive 128;
    }

    server {
        location ~ ^/(ws|ws-stomp)/ {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # hop-by-hop
            proxy_http_version 1.1;
            proxy_set_header Connection "upgrade";
            proxy_set_header Upgrade $http_upgrade;
            proxy_read_timeout 65s;
        }
    }
}

์•„๋ฌดํŠผ ์ •ํ™•ํ•œ ์›์ธ์— ๋Œ€ํ•ด์„œ๋Š” ๋ณ„๋„๋กœ ์ฐพ์•„๋ณด์•„์•ผ๊ฒ ์ง€๋งŒ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ธฐ๊ณ ์ž ํ•œ๋‹ค.

Released under the MIT License.