CODEWITHSUNDEEP
dockernginxproxydocker-compose
DeVolt
DeVolt

Reputation: 341

Nginx reverse-proxy not serving static files

I tried to start some services via docker-compose. One of them is a nginx reverse-proxy, handling different paths. One path ("/react") is to a containerized react_app with a nginx on port 80. Solely, the reverse-proxy is working correctly. Also, if I server the nginx of the react_app on port 80, all work's fine. Combining both without changing anything in the config leads to 404 for static files like css and js.

Setup #1
Correct forward for path /test to Google.

docker-compose.yml

version: "3"

services:
  #react_app:
  #  container_name: react_app
  #  image: react_image
  #  build: .
  reverse-proxy:
    image: nginx:latest
    container_name: reverse-proxy
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - '80:80'

nginx.conf (reverse-proxy)

location /test {
    proxy_pass http://www.google.com/;
}

Setup #2
No reverse proxy. Correct answer from nginx inside of container react_app.

docker-compose.yml

version: "3"

services:
  react_app:
    container_name: react_app
    image: react_image
    build: .
  #reverse-proxy:
  #  image: nginx:latest
  #  container_name: reverse-proxy
  #  volumes:
  #   - ./nginx.conf:/etc/nginx/nginx.conf
  #  ports:
  #    - '80:80'

Setup #3 (not working!)
Reverse proxy and React App with nginx. Loads index.html, but fails so load files in /static

nginx.conf (reverse-proxy)

location /react {
    proxy_pass http://react_app/;
}

docker-compose.yml

version: "3"

services:
  react_app:
    container_name: react_app
    image: react_image
    build: .
  reverse-proxy:
    image: nginx:latest
    container_name: reverse-proxy
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - '80:80'

Activating both systems leads to failing static content. It seems to me that the reverse-proxy tries to server the files, but fails (for good reason), because there is no log entry in reac_app's nginx. Here's the config from the reac_app nginx, perhaps I'm missing something out.

nginx.conf (inside react_app container)

events {}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        location / {
            try_files $uri /index.html;
        }
    }
}

--> Update

This is a rather unsatisfying workaround - but it works. Although now reacts routing is messed up. I cannot reach /react/login

http {
    server {
        server_name services;

        location /react {
            proxy_pass http://react_app/;
        }

        location /static/css {
            proxy_pass http://react_app/static/css;
            add_header  Content-Type    text/css;

        }
        location /static/js {
            proxy_pass http://react_app/statics/js;
            add_header  Content-Type    application/x-javascript;
        }
    }
}

Upvotes: 4

Views: 7026

Answers (1)

ksaliya
ksaliya

Reputation: 192

If you check the paths of the missing static files in your browser, you'll notice their relative paths are not what you expect. You can fix this by adding sub filters inside your nginx reverse proxy configuration.

http {
    server {
        server_name services;

        location /react {
            proxy_pass http://react_app/;

            ######## Add the following ##########
            sub_filter 'action="/'  'action="/react/';
            sub_filter 'href="/'  'href="/react/';
            sub_filter 'src="/'  'src="/react/';
            sub_filter_once off;
            #####################################
        }
    }
}

This will update the relative paths to your static files.

Upvotes: 6

Related Questions