React的nginx配置文件

发表于： 2022年7月19日 2022年7月19日
分类： Javascript

upstream frontend {
    server client:3000;
}

upstream backend {
    server api:5000;
}

server {
    listen 80;

    location / {
        proxy_pass http://frontend;
    }

    location /ws {
        proxy_pass http://frontend;
        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://backend;
    }
}

I was facing the same issue, but with WDS_SOCKET_PORT=0 it worked for me. No web socket error in the console anymore and hot reload also working.

My default.conf currently looks like this:

upstream frontend {
server client:3000;
}

upstream backend {
server api:5000;
}

server {
listen 80;

location / {
proxy_pass http://frontend;
}

location /ws {
proxy_pass http://frontend;
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://backend;
}
}
My docker-compose file looks like this:

version: ‘3’
services:
client:
build:
dockerfile: Dockerfile.dev
context: ./client
volumes:
– /app/node_modules
– ./client:/app
environment:
# Fixes bug where websocket connection is fixed to default port 3000
– WDS_SOCKET_PORT=0
… other services
On which system are you running the project? I don’t have hot reload on windows 10. On macOS everything works with the same config.

原文 https://github.com/facebook/create-react-app/issues/11779

admin

1011