reverse proxy Nginx does not proxy - docker

Question

I am trying to develop an Nginx reverse proxy using docker-compose. I may not be able to state the problem correctly but I am posting the code and error. When I try to proxy to one service, the proxy works but nothing is displayed on the browser.
Here's my nginx.conf :
worker_processes 1;
events { worker_connections 1024; }
http {
sendfile on;
upstream docker-nginx {
server react-app:80;
}
server {
listen 62106;
server_name http://10.1.40.24;
location /try {
rewrite ^/try(.*)$ $1 break;
proxy_pass http://docker-nginx/;
}
}
}
Here's my docker-compose file:
version: '3.5'
services:
react-app:
build:
context: ./my-app
cache_from:
- nginx:alpine
ports:
- "62101:80"
image: app-react-uat:latest
networks:
my-network:
aliases:
- perfreview
server-app:
build:
context: ./Flask
cache_from:
- python:3-slim
environment:
- ENV = production
- PORT = 62102
ports:
- "62102:62102"
image: flask-py-app-uat:latest
nginx-reverse:
build:
context: ./nginx
cache_from:
- nginx:alpine
ports:
- "62106:62106"
depends_on:
- react-app
networks:
- my-network
networks:
my-network:
Here's the error message:
react-app_1 | 172.28.0.3 - - [03/Sep/2019:04:07:03 +0000] "GET / HTTP/1.0" 200 333 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76. 0.3809.132 Safari/537.36" "-"
nginx-reverse_1 | 10.1.20.45 - - [03/Sep/2019:04:07:03 +0000] "GET /try/ HTTP/1.1" 200 333 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome /76.0.3809.132 Safari/537.36"
nginx-reverse_1 | 2019/09/03 04:07:03 [error] 6#6: *12 open() "/etc/nginx/html/static/css/main.c0c280ad.css" failed (2: No such file or directory), client: 10.1.20.45, server: http:// 10.1.40.24, request: "GET /static/css/main.c0c280ad.css HTTP/1.1", host: "10.1.40.24:62106", referrer: "http://10.1.40.24:62106/try/"
nginx-reverse_1 | 10.1.20.45 - - [03/Sep/2019:04:07:03 +0000] "GET /static/css/main.c0c280ad.css HTTP/1.1" 404 555 "http://10.1.40.24:62106/try/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
nginx-reverse_1 | 2019/09/03 04:07:03 [error] 6#6: *13 open() "/etc/nginx/html/static/js/main.5a0e26e5.js" failed (2: No such file or directory), client: 10.1.20.45, server: http://10 .1.40.24, request: "GET /static/js/main.5a0e26e5.js HTTP/1.1", host: "10.1.40.24:62106", referrer: "http://10.1.40.24:62106/try/"
nginx-reverse_1 | 10.1.20.45 - - [03/Sep/2019:04:07:03 +0000] "GET /static/js/main.5a0e26e5.js HTTP/1.1" 404 555 "http://10.1.40.24:62106/try/" "Mozilla/5.0 (Windows NT 10.0; Win64; x 64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
nginx-reverse_1 | 10.1.20.45 - - [03/Sep/2019:04:07:30 +0000] "GET /static/css/main.c0c280ad.css HTTP/1.1" 404 555 "http://10.1.40.24:62106/try/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
nginx-reverse_1 | 2019/09/03 04:07:30 [error] 6#6: *13 open() "/etc/nginx/html/static/css/main.c0c280ad.css" failed (2: No such file or directory), client: 10.1.20.45, server: http:// 10.1.40.24, request: "GET /static/css/main.c0c280ad.css HTTP/1.1", host: "10.1.40.24:62106", referrer: "http://10.1.40.24:62106/try/"
Any help would be grateful. Thank you!

Answer 1

So, I found out the reason behind the error and a way to solve it. Basically, the files of react-app container were not being shared with the reverse-proxy container. Consequently, I used volumes to come around this and set alias to the location of the mounted part in the location part of the config file. Here's the new nginx.conf:
server {
listen 62106;
server_name http://10.1.40.24;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location /perfreview/ {
alias /usr/share/nginx/html/prs;
proxy_pass http://react-app:80/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Hope this helps someone someday!