Angular, Nginx, Docker results in 404 error on page refresh

Question

I have an angular application, and using nginx on docker container. When I run the application then the localhost works fine, and it redirects to localhost/auth but when I refresh the browser with localhost/auth in address then it gives error 404. I had followed other forums like 404 Error on page refresh with Angular 7, NGINX and Docker, Angular Nginx Docker 404 also but still same problem exists.

DockerFile

FROM node:alpine as builder

WORKDIR /app
# Install app dependencies
COPY . /app/
RUN cd /app && yarn install
RUN cd /app && yarn build:aot:dev

COPY ./nginx.conf /etc/nginx/nginx.conf

# STEP 2 build a small nginx image with static website
FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist/apps/martor /usr/share/nginx/html
RUN ls /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    include /etc/nginx/conf.d/*.conf;
    server {
    listen       80;
    server_name localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    error_page 403 404 /index.html;
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ index.html;
        index  index.html index.html;


        # Allo CORS
        if ($request_method ~* "(GET|POST|PUT|DELETE|PATCH|OPTIONS)") {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT, PATCH, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, x-access-token,access-control-allow-origin,access-control-allow-credentials,access-control-allow-headers';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
    }

    #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;
    }
    }
}

Answer 1

I believe you forget the /index.html (note the '/') in the try_files line. So when accessing localhost/auth, nginx try to resolve /usr/share/nginx/html/auth/index.html instead of /usr/share/nginx/html/index.html.

Try replacing

try_files $uri $uri/ index.html;

by

try_files $uri $uri/ /index.html;