Here's my development setup:
create-react-app, inside dockernpm start in my docker-compose.yml filehttp://localhost:3000/etc/hosts I add 127.0.0.1 domain.localnginx I create the configuration file below: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;
}
}
The problem is that when I go to https://domain.local instead of http://localhost:3000 I lose hot reloading, and I see this error in my console:
webpackHotDevClient.js:60 WebSocket connection to 'wss://domain.local/sockjs-node' failed:
../../Project/node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:60
webpack_require @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:7
webpack_require @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.
How can I solve this?
I am using proxy as well. So the question is how to setup your websocket connection in NGinx.
... hop-by-hop headers including “Upgrade” and “Connection” are not passed from a client to proxied server, therefore in order for the proxied server to know about the client’s intention to switch a protocol to WebSocket, these headers have to be passed explicitly:
location /sockjs-node {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
What they recommend doing is a bit longer.
I place localhost:3000 in previous example for you, but I prefer to use separate upstream directive so as not to mix upstreams and addresses. So the full example (inside http directive) would be:
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;
}
}
Haven't checked your example with cert`s, though.