reverse proxy Nginx does not proxy

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!

The proxy works perfectly if I remove /try from the location and replace it with / — Naman Shah
– Naman Shah, Commented Sep 3, 2019 at 4:27

Naman Shah · Accepted Answer · 2019-09-04 05:10:49Z

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!

Collectives™ on Stack Overflow

reverse proxy Nginx does not proxy

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related