使用 Nginx 和 Docker 向 CRA 開發服務器使用 proxy_pass 時出現 Websocket 錯誤

Question

我正在嘗試將 Nginx 中的proxy_pass傳遞到位於localhost:3000的 React 開發服務器。 它目前可以工作，但我在控制台中看到一個錯誤，我不確定這會導致任何問題：

WebSocketClient.js:16 WebSocket 連接到 'ws://localhost/ws' 失敗：

Nginx.conf ：

upstream backend {
    server backend:8000;
}

upstream frontend {
    server frontend:3000;
}

server {
    listen 80;
    
    location / {
        proxy_pass http://frontend$request_uri;
        proxy_set_header Host $http_host;
    }
    
    location /api/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }

    location /admin/ {
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    }
}

我嘗試將WDS_SOCKET_PORT=0添加到前端.env文件中，還嘗試添加：

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

...正如其他 SO 帖子中所建議的那樣。 都沒有奏效。

這是什么錯誤？ 我該如何解決？

Answer 1

我通過在變量中添加更多來解決這個問題

environment:
  - WDS_SOCKET_PORT=443

也許它可以幫助你，但如果你沒有代理，請在 docker-compose.yml 中使用 WDS_SOCKET_PORT=0

Answer 2

嘗試這個：

environment:
  - WDS_SOCKET_PORT=443

這個對我有用