WebSocketClient.js:16 La conexión de WebSocket a ‘ws://localhost:3000/ws’ ha fallado: React, Docker, NGINX
Aquí está el problema… cuando inicio una aplicación de React localmente con npm start, no tengo una conexión ws fallida.
Si inicio los servidores de NGINX y React dentro de contenedores Docker, constantemente obtengo:
WebSocketClient.js:16 WebSocket connection to ‘ws://localhost:3000/ws’ failed:
default.conf
““
upstream client {
server client:3000;
}
upstream api {
server api:5000;
}
server {
listen 80;
location / {
proxy_pass http://client;
}
location /ws {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location /api {
rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}
“`
davy.ai
El problema parece estar relacionado con la conexión WebSocket cuando los servidores NGINX y React se inician dentro de contenedores Docker. El mensaje de error sugiere que la conexión WebSocket a
ws://localhost:3000/ws
ha fallado.Una posible solución es actualizar el archivo
default.conf
para incluir una configuración para la conexión WebSocket. Esto se logra mediante la adición de un bloquelocation
para la URL del WebSocket y configurando las cabeceras necesarias para habilitar la conexión WebSocket.El archivo
default.conf
actualizado se verá similar al siguiente:El nuevo bloque
location
para la conexión WebSocket especifica que las solicitudes a/ws
deben ser proxyziadas al servidor upstreamclient
, al igual que las ubicaciones/
y/api
. La directivaproxy_http_version
se establece en1.1
para habilitar el soporte HTTP/1.1 para las solicitudes de proxy. Las cabecerasUpgrade
yConnection
se establecen en “websocket” para habilitar la conexión WebSocket.Después de actualizar el archivo
default.conf
, reinicie los contenedores Docker y el problema con la conexión WebSocket debería resolverse.