Getting Forbidden 403 error with nginx docker container when serving static files

Question

I am trying to run my angular-cli project with nginx docker container in development mode. Here is the complete boilerplate code.

To avoid every time rebuilding the complete docker image whenever the source code is changed, I am using volumes in my docker compose file and mapping my dist/{project-name} path with container's usr/share/nginx/html path, and then finally running the Angular project in host machine with ng build --watch

But using volumes seems to be causing file read issues to the nginx and it is unable to read index.html

dev.dockerfile:

FROM nginx:alpine
LABEL author="Saurabh Palatkar"
COPY nginx.conf /etc/nginx/nginx.conf

COPY /dist/ng-docker /usr/share/nginx/html
RUN ls /usr/share/nginx/html
RUN ps aux | grep nginx
RUN chown -R root:root /usr/share/nginx/html/index.html
RUN chmod -R 755 /usr/share/nginx/html
RUN ls -al /usr
RUN chmod o+x /usr
RUN chmod o+x /usr/share
RUN chmod o+x /usr/share/nginx
RUN chmod o+x /usr/share/nginx/html
# RUN ls /usr/share/nginx/html
# RUN ls /etc/nginx
EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]

docker-compose.dev.yml:

version: "2.0"

services:

      angular-nginx-docker:
        image: ng-docker-dev
        build: 
          context: .
          dockerfile: .docker/dev.dockerfile
        environment:
          NODE_ENV: development
        volumes: 
          - "/dist/ng-docker:/usr/share/nginx/html"
        ports:
          - 8080:80
        command: [nginx-debug, '-g', 'daemon off;']

However, I am able to serve my Angular static files through nginx docker container in prod mode (The only difference I see is, I am not using volumes) docker-compose.yml:

version: "2.0"

services:
  angular-nginx-docker:
    image: ng-docker-prod
    build: 
      context: .
      dockerfile: .docker/prod.dockerfile
    environment:
      NODE_ENV: production
    ports:
      - 80:80
      - 443:443
      - 9229:9229
    command: [nginx, '-g', 'daemon off;']

prod.dockerfile:

FROM node:latest as angular-built
WORKDIR /usr/src/app
RUN npm i -g @angular/cli
COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm install --silent
COPY . .
RUN ng build --prod --build-optimizer

FROM nginx:alpine
LABEL author="Saurabh Palatkar"
COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=angular-built /usr/src/app/dist/ng-docker /usr/share/nginx/html

EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]

Miq Miq · Accepted Answer · 2018-06-27T08:17:12

When using volumes, docker will use the host system file permission mode. I suspect, that your static files on your host, (which you map) does not have permissions to be read by root.

Executing chmod in the dockerfile will do nothing, since the files are not in there during build (volumes are mapped on the container run).

I would suggest running chmod -R o+rx /dist/ng-docker on the host so every user - including root - on the could read them. If you do not want this, try setting up ACLs specially for root (uid: 0) or modify the container to have a user, which will run nginx, with this same uid and guid as you have.

Getting Forbidden 403 error with nginx docker container when serving static files

1 Answers