CODEWITHSUNDEEP
angularnginx
Philip Mutua
Philip Mutua

Reputation: 6871

How to fix 404 error on deployed Angular app that is served by NGINX

I have an application that I have already deployed on a server the issue that every time I reload a certain page I get a NGINX's 404 error. I'm using Docker to run the application. below is my NGINX config file. 

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
    if ($request_method = 'GET') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
  }
}

Dockerfile

# stage 1 
FROM node:latest as node 

WORKDIR /app

COPY . .


RUN npm i -f

# RUN npm audit fix

# RUN npm install 

RUN npm run build --aot

# stage 2 
FROM nginx:alpine 
COPY --from=node /app/dist/e-county /usr/share/nginx/html

The commands I'm using to run the docker file:

docker build --rm -f "Dockerfile" -t e-county:v1 .

docker run --rm -d -p 80:80 e-county:v1

Upvotes: 0

Views: 1296

Answers (2)

Carsten
Carsten

Reputation: 4208

My default.conf file contains a try_files with /index.html as a fallback:

server {
    listen 80;
    server_name <obfuscated>;

    root /usr/share/nginx/html;
    index index.html;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

My Dockefile looks like this:

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/*

COPY default.conf /etc/nginx/conf.d/

COPY dist /usr/share/nginx/html

Upvotes: 1

Philip Mutua
Philip Mutua

Reputation: 6871

I eventually ended up coming up with the below docker.

Dockerfile

# stage 1 
FROM node:latest as node 

WORKDIR /app

COPY . .


RUN npm i -f

RUN npm audit fix

# RUN npm install 

RUN npm run build --aot

# stage 2 
FROM nginx:alpine 


RUN rm -rf /usr/share/nginx/html/*

COPY  --from=node /app/nginx/*  /etc/nginx/conf.d/default.conf
COPY --from=node /app/dist/e-county /usr/share/nginx/html

Upvotes: 0

Related Questions