Nginx Docker container serves 403 Forbidden error despite correct file permissions

I'm running an Angular application inside a Docker container with Nginx as the web server. However, when I try to access the application via localhost:4200 in my browser, Nginx returns a 403 Forbidden error. Here's a breakdown of my setup:

Dockerfile.prod file:

#stage 1, build

FROM node:20-alpine as builder

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build --prod


#stage 2, serve with nginx

FROM nginx:alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=builder /app/dist/halal-eats .

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

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]


Docker commands:

"docker-buildrod": "docker build -t frontend-angularrod -f Dockerfile.prod --
build-arg NODE_ENV=production .",
"docker-runrod": "docker run -it -p 4200:80 --name frontend-angular-prod frontend-
angularrod"


nginx.conf file:

server {
listen 80;

root /usr/share/nginx/html;
index index.html;

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

location = /favicon.ico {
log_not_found off;
access_log off;
}
}


I tried: Through research I found that a common causing issue is that file permissions need to be fixed, according to my research, all file permissions are granted to nginx. the following are file permissions:

/usr/share/nginx/html # ls -l /usr/share/nginx/html
total 140
-rw-r--r-- 1 root root 128761 Apr 6 06:30 3rdpartylicenses.txt
drwxr-xr-x 8 root root 4096 Apr 6 06:30 browser
-rw-r--r-- 1 root root 137 Apr 6 06:30 prerendered-routes.json
drwxr-xr-x 2 root root 4096 Apr 6 06:30 server


Additional Information: OS: Windows My index file inside dist\project-name\broswer is index.csr.html, could that be causing the issue?

here is a snapshot of my file structure:

Continue reading...