How to Proxy Pass from / to /index.html

Question

I'm currently working on a JS Project, that uses the url path. Now if I go on my website with example.com/, the JavaScript won't work, because I actually need example.com/index.html.

I'm already using an reverse proxy to proxy pass to two different docker containers. So my idea was to pass the request to example.com/index.html when example.com/ is called. But I can't figure out the regex stuff to achieve this goal.

My old config:

server {
listen       80;
server_name  example.com;

# allow large uploads of files - refer to nginx documentation
client_max_body_size 1G;

# optimize downloading files larger than 1G - refer to nginx doc 
before adjusting
#proxy_max_temp_file_size 2G;

location / {
    proxy_pass http://structure.example:80;
}

location /cdn {
    proxy_pass http://content.example:80;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

Stuff I tried:

    server {
listen       80;
server_name  example.com;

# allow large uploads of files - refer to nginx documentation
client_max_body_size 1G;

# optimize downloading files larger than 1G - refer to nginx doc 
before adjusting
#proxy_max_temp_file_size 2G;

location / {
    proxy_pass http://structure.nocms:80/index.html;
}

location ~* \S+ {
    proxy_pass http://structure.nocms:80;
}

location /cdn {
    proxy_pass http://content.nocms:80;
}



error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

Solution 1

Below config should work for you

server {
listen       80;
server_name  example.com;

# allow large uploads of files - refer to nginx documentation
client_max_body_size 1G;

# optimize downloading files larger than 1G - refer to nginx doc 
before adjusting
#proxy_max_temp_file_size 2G;

location = / {
    rewrite ^ /index.html permanent;
}

location / {
    proxy_pass http://structure.example:80;
}

location /cdn {
    proxy_pass http://content.example:80;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

Solution 2

The accepted answer has one disadvantage: going to example.com explicitly redirects to example.com/index.html (that is, returns 301 Moved permanently), which is not always desired.

Instead, I suggest to prepend location / with another directive, location = /, which is designed to the root URL only:

location = / {
    proxy_pass http://structure.nocms:80/index.html;
}

location / {
    proxy_pass http://structure.nocms:80;
}

The above instructs nginx to pass requests to example.com directly to http://structure.nocms:80/index.html, while requesting any other URLs in example.com/* would pass the request to the corresponding URL in the downstream.