在docker上提供角度应用程序时出现Nginx错误

Question

I have built by angular app using ng build

Now I cd to the dist/iDot folder and run

docker run -d -p 8080:80 -v $(pwd):/usr/share/nginx/html nginx:alpine

but when I access the url it shows nginx 403 Forbidden error.

I have chmod 777 dist folder and files and didn't seem to have any affect.

Dist Folder

garg10may@GCES15511:~/iDot/frontend/dist$ ls
iDot
garg10may@GCES15511:~/iDot/frontend/dist$ ls -ltrh iDot/
total 21M
-rwxrwxrwx 1 garg10may garg10may  49K May  3 18:02 main.js
-rwxrwxrwx 1 garg10may garg10may 284K May  3 18:02 es2015-polyfills.js
-rwxrwxrwx 1 garg10may garg10may 767K May  3 18:02 styles.js
-rwxrwxrwx 1 garg10may garg10may 6.1K May  3 18:02 runtime.js
-rwxrwxrwx 1 garg10may garg10may 236K May  3 18:02 polyfills.js
-rwxrwxrwx 1 garg10may garg10may 207K May  3 18:02 es2015-polyfills.js.map
-rwxrwxrwx 1 garg10may garg10may 8.9M May  3 18:02 vendor.js
-rwxrwxrwx 1 garg10may garg10may  28K May  3 18:02 main.js.map
-rwxrwxrwx 1 garg10may garg10may 6.1K May  3 18:02 runtime.js.map
-rwxrwxrwx 1 garg10may garg10may 235K May  3 18:02 polyfills.js.map
-rwxrwxrwx 1 garg10may garg10may 820K May  3 18:02 styles.js.map
-rwxrwxrwx 1 garg10may garg10may 9.4M May  3 18:02 vendor.js.map
-rwxrwxrwx 1 garg10may garg10may  829 May  3 18:02 index.html
-rwxrwxrwx 1 garg10may garg10may 5.4K May  3 18:02 favicon.ico

Container is running fine

garg10may@GCES15511:~/iDot/frontend$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
fcd8af3018e6        nginx:alpine        "nginx -g 'daemon of…"   10 minutes ago      Up 10 minutes       0.0.0.0:8080->80/tcp     wonderful_shockley
5e1e49e7cc24        idot                "java -Djava.securit…"   6 hours ago         Up 6 hours          0.0.0.0:8081->8081/tcp   idot
69a43bc460e1        mysql:5.7           "docker-entrypoint.s…"   6 hours ago         Up 6 hours          3306/tcp, 33060/tcp      idb

docker logs {container}

2019/05/03 12:54:34 [error] 7#7: *1 directory index of "/usr/share/nginx/html/" is forbidden, client: 172.17.0.1, server: localhost, request: "GET / HTTP/1.1", host: "localhost:8080"
172.17.0.1 - - [03/May/2019:12:54:34 +0000] "GET / HTTP/1.1" 403 556 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36" "-"

Try 1:

garg10may@GCES15511:~/iDot/frontend/dist/iDot$ ls
es2015-polyfills.js      favicon.ico  main.js      polyfills.js      runtime.js      styles.js      vendor.js
es2015-polyfills.js.map  index.html   main.js.map  polyfills.js.map  runtime.js.map  styles.js.map  vendor.js.map
garg10may@GCES15511:~/iDot/frontend/dist/iDot$ cd ..
garg10may@GCES15511:~/iDot/frontend/dist$ docker run -d -p 8080:80 -v $(pwd)/iDot:/usr/share/nginx/html nginx:alpine
21910db703790152bf622ce01b2c814a224f1054e103e1d6b62c4b71fd47d542
garg10may@GCES15511:~/iDot/frontend/dist$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
21910db70379        nginx:alpine        "nginx -g 'daemon of…"   3 seconds ago       Up 1 second         0.0.0.0:8080->80/tcp     ecstatic_germain
5e1e49e7cc24        idot                "java -Djava.securit…"   7 hours ago         Up 7 hours          0.0.0.0:8081->8081/tcp   idot
69a43bc460e1        mysql:5.7           "docker-entrypoint.s…"   7 hours ago         Up 7 hours          3306/tcp, 33060/tcp      idb
garg10may@GCES15511:~/iDot/frontend/dist$ docker exec -it ecstatic_germain ls -l /usr/share/nginx/html/
total 0
drwxr-xr-x    2 root     root            40 May  3 12:47 iDot
garg10may@GCES15511:~/iDot/frontend/dist$ docker exec -it ecstatic_germain ls -l /usr/share/nginx/html/iDot
total 0
garg10may@GCES15511:~/iDot/frontend/dist$

Answer 1

I think in the dist folder there will be another folder with the application name, you need to provide that folder on volume mapping to nginx image. cd into your application name folder and run the same command, it will work

Answer 2

Mount the iDot directory instead -

$ cd ~/iDot/frontend/dist
$ docker run -d -p 8080:80 -v $(pwd)/iDot:/usr/share/nginx/html nginx:alpine

You might be getting a 403 because nginx is unable to get an readable/executable index.html file at the document root.

For more information try doing a docker exec into the container -

$ docker exec -it 88c73dc32cad ls -l /usr/share/nginx/html/