Nginx serving angular static files

Question

I am configuring to change the deployment of the angular project deployed in nginx. The default files are hosting at /usr/share/nginx/html which works when i access from localhost. However, i will like to define the /dev or /prod at the URL which will looks like: localhost/dev or localhost/prod but when i change the nginx configuration it does not work cause it keep looks for file at /usr/share/nginx/html/dev

How could i rewrite the URL to point to /usr/share/nginx/html where the static files are located?

current nginx location config:

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location /dev/ {
        root   /usr/share/nginx/html;
        #index  index.html index.htm;
    }
}

error:

2021/09/14 01:43:34 [error] 75#75: *7 "/usr/share/nginx/html/dev/index.html" is not found (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /dev/ HTTP/1.1", host: "localhost:4201"

i have tried changing the config but I face a forbidden issue config:

    location /dev/ {
        #root   /usr/share/nginx/html;
        #index  index.html index.htm;
        alias /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

error:

 2021/09/14 02:11:45 [error] 92#92: *10 directory index of "/usr/share/nginx/html" is forbidden, client: 172.18.0.1, server: localhost, request: "GET /dev/ HTTP/1.1", host: "localhost:4201"

score 1 · Accepted Answer · answered Sep 15 '21 at 02:59

I found some resources online that have helped me to troubleshoot and manage to get it up.

if you are facing nginx HTML is forbidden --> https://programmer.group/directory-index-of-usr-share-nginx-html-is-forbidden.html
for alias we need to add the / at the back

location /prod/ {
    alias  /usr/share/nginx/html/dev/;
    try_files $uri $uri/ /index.html;
}

Nginx serving angular static files

1 Answers1