Reverse proxy for react contaiener - reactjs

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.