Question 81499 in Docker Question posted in
The official documentation can be found here.

Nginx reverse proxy to angular docker container missing static asset files

I have Nginx server running on machine, I set reverse proxy to angular docker app which runs on localhost:4200. Rerouting works well but angular app can’t load static assets. Bellow is part of my conf.d file. If I use location to the root ( / ) everything works well looks like I missing something :(.

`

  location /auth {
      
      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;

      proxy_pass          http://localhost:4200/;
      proxy_read_timeout  90;

  
        }

`

I tried to set basehref in angular app to /auth but it doesn’t work.

Tags:

2

Answers


  1. 0

    You don’t need angular container to reverse the traffic, You can use multi stage option in Dockerfile to compile the angular project and copy the dist files into nginx container.

    Dockerfile

    FROM node:14.15.1 AS build
   
RUN apt-get update && apt-get install -y ca-certificates
    
#Google Chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | 
apt-key add - && 
echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > 
/etc/apt/sources.list.d/google.list && 
apt-get update && 
apt-get install -y google-chrome-stable xvfb
    
#Define the working directory of a Docker container
WORKDIR /usr/src/app
    
#Copy package.json file in to working directory
COPY package.json ./
    
#Install dependency library from package.json 
RUN npm install
    
#Copy project from local directory to working directory
COPY . .
    
#Default build configuration.
ARG CONFIGURATION=staging
    
#Run application with staging environment
RUN npm run build:$CONFIGURATION
    
FROM nginx:latest
    
#Remove default nginx file
RUN rm -rf /usr/share/nginx/html/*
    
#Copy nginx config file
COPY /nginx.conf /etc/nginx/conf.d/default.conf
    
#Copy compiled project files in to nginx path container 
COPY --from=build /usr/src/app/dist/* /usr/share/nginx/html

EXPOSE 4200

    You should add blow configuration into nginx container.

    nginx.conf

    server {
    listen       4200;
    server_name  example.com;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
    Login or Signup to reply.
  2. 0

    I struggled with this as well and it seems when you change the location to something other than root, it will try to grab assets from the reverse proxy itself at /etc/nginx/html/assets/img/example.png

    Assuming you store your statics in the assets folder, I believe adding this may fix it:

        location ~* "^/assets.*?$" {
        # Comment out below to debug http referer and adjust the IF statement as needed
        # add_header X-referer-test "$http_referer";

        if ($http_referer ~ /auth/) {
            proxy_pass http://localhost:4200;
        }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search