Webpack Dev Server with NGINX proxy_pass

Question

webpack-dev-server을 Docker 컨테이너에서 실행하고 NGINX 호스트를 통해 액세스하려고합니다. 처음에는 index.html이로드되지만 dev 서버에 대한 웹 소켓 연결은 연결할 수 없습니다.

VM47 : 'WS : //example.com/sockjs-node/834/izehemiu/websocket'35 웹 소켓 연결 실패 : 웹 소켓 핸드 셰이크 중에 오류 : 예기치 않은 응답 코드 : 400

I 다음 설정을 사용합니다.

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

upstream webpack_dev_server { 
    server node; 
} 

server { 
    server_name _; 
    listen 80; 
    root /webpack_dev_server; 

    location/{ 
    proxy_pass http://webpack_dev_server; 
    } 

    location /sockjs-node/ { 
    proxy_pass http://webpack_dev_server/sockjs-node/; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $host; # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass 

    proxy_http_version 1.1; # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version 

    # WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $connection_upgrade; 
    } 
} 

Answer 1

프록시 패스는 웹팩-DEV-서버 컨테이너의 IP와 포트해야하며, 당신은 당신의 웹팩-dev에 미들웨어에 설문 조사를 추가하는 것을 잊지 마세요 또한 proxy_redirect off;

location /sockjs-node { 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $remote_addr; 
    proxy_set_header Host $host; 

    proxy_pass http://node:8080; 

    proxy_redirect off; 

    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
} 

필요

watchOptions: { 
    aggregateTimeout: 300, 
    poll: 1000 
    }