Why did Nginx (with vue) write directory index of '/app/' is forbidden? Website not loading, how to fix?

Question

Nginx

Wanted to add header add_header Access-Control-Allow-Origin *; and one more way to the service to get static data and nginx stopped loading the site:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: IPv6 listen already enabled
/docker-entrypoint.sh: Launching /docker -entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready to start up
172.18.0.1 - - [05/Jun/2021:00:19:12 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML , like Gecko) Chrome/90.0.4430.212 Safari/537.36 OPR/76.0.4017.154" "-"
2021/06/05 00:19:12 [error] 23#23: *1 directory index of "/app/" is forbidden , client: 172.18.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:8080"
2021/06/05 09:00:36 [error] 23#23: *4 directory index of "/app/" is forbidden, client: 172.18.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:8080"
172.18.0.1 - - [05/Jun/2021:09:00 :36 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/90.0.4430.212 Safari/537.36OPR/76.0.4017.154" "-"

nginx.conf

user  nginx;
worker_processes  1;
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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
      add_header Access-Control-Allow-Origin *;
    }
  location /static/wavs/ {
     add_header Access-Control-Allow-Origin *;
       proxy_pass http://tts:5000/;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

Dockerfile - did not change

FROM node:lts-alpine as build-stage
RUN npm install -g npm
RUN npm cache clean --force
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build


FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

Answer 1

Look at the error log, usually everything is clear there.