Reverse proxy for react contaiener

Question

I have 2 running docker containers. N1 with react app, N2 with nginx for reverse proxy.

Docker command

docker run -d --name app3 -p 3000:3000 testApp

started react container, and now it is accessible on 192.168.1.103:3000 (host is linux server on local.network) react app is test app and it opens fine on port 3000.

Now I want to open it using

192.168.1.103/app3

For that in Nginx container I prepared config

location /app3/ {
        proxy_pass http://192.168.1.103:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

Then I've restarted nginx and now when I open 192.168.1.103/app3 I see white page and if I inspect it I see in body You need to enable JavaScript to run this app. But my browser is OK because second ago I opened the same app on port 3000 and it opened perfectly.

How can I fix this problem?

Answer 1

Maybe you can docker-compose in same docker.network or when you running both of your app you can running in same docker.network.

Than after that in your nginx config you can make this:

location /app3/ {
        rewrite /app3/(.*) /$1 break;
        proxy_pass http://app3:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

And don't forget to expose port 80 and 443 when you running nginx container.