Aquí está mi configuración de desarrollo:
create-react-app , dentro de la ventana acoplablenpm start en mi archivo docker-compose.ymlhttp://localhost:3000/etc/hosts agrego 127.0.0.1 domain.localnginx creo el archivo de configuración a continuación: server { listen 80; server_name domain.local; return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name domain.local; ssl_certificate /Temp/Project/Certificate.pem; ssl_certificate_key /Temp/Project/Key.pem; location / { proxy_pass http://localhost:3000; } } El problema es que cuando voy a https://domain.local en lugar de http://localhost:3000 pierdo la recarga en caliente y veo este error en mi consola:
webpackHotDevClient.js:60 Falló la conexión de WebSocket a 'wss://domain.local/sockjs-node':
../../Project/node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:60
webpack_require @ bootstrap:851
fn @ arranque: 150
1 @ índice.js:7
webpack_require @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ arranque: 32
(anónimo) @ main.chunk.js:1
webpackHotDevClient.js:76 El servidor de desarrollo se ha desconectado.
Actualice la página si es necesario.
¿Como puedo resolver esto?
Estoy usando proxy también. Entonces, la pregunta es cómo configurar su conexión websocket en NGinx.
... los encabezados de salto por salto que incluyen "Actualización" y "Conexión" no se pasan de un cliente a un servidor proxy, por lo tanto, para que el servidor proxy conozca la intención del cliente de cambiar un protocolo a WebSocket, estos encabezados tienen para ser pasado explícitamente:
location /sockjs-node { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }Lo que recomiendan hacer es un poco más.
localhost:3000 en el ejemplo anterior para usted, pero prefiero usar una directiva upstream separada para no mezclar upstreams y direcciones. Así que el ejemplo completo (dentro de la directiva http ) sería:
upstream front { server localhost:3000; } map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 80; server_name domain.local; return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name domain.local; ssl_certificate /Temp/Project/Certificate.pem; ssl_certificate_key /Temp/Project/Key.pem; location / { proxy_pass http://front; } location /sockjs-node { proxy_pass http://front; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_set_header Host $host; } }Sin embargo, no he verificado su ejemplo con cert`s.