How to configure multiple nested subdirectories in Nginx using wildcards?

Question

👋

Sorry if this was asked before. I've searched, but couldn't find anything close to what I'm trying to accomplish and I would appreciate any indication that could get me closer to solving this. 😊

I have the following server setup:

• domain.com - Serves a WordPress site proxy passed to php-fpm.

• domain.com/{directory}/{subdirectory} - Serves static HTML files for all the {subdirectories} I've placed inside {directory}. See location block below (placed above the / location with the PHP proxy pass):

  location ^~ /my_dir {
      alias /var/www/domain.com/my_dir;
      index index.html index.htm;
  }
  

Pretty basic so far.

Problem:

However, one of the directory inside {my_dir} is a Vue app that's using front-end routing. All works fine until the browser is refreshed and Nginx returns 404 due to the fact that there's no domain.com/{my_dir}/{vue_app_dir}/{vue_path} available. In order to fix this, I would have to redirect any server request from {vue_path} to {vue_app_dir}/index.html.

I've tried multiple combinations of server blocks above the one I posted earlier but with no success. 😫

Again, I'm sorry if this was answered before.

Answer 1

Assuming that my_dir in the location directive and the alias directive are the same name, you can use root instead. See this document for details.

You can add another location for the Vue app, and include a try_files statement to avoid the 404 responses. See this document for details.

For example:

location ^~ /my_dir {
    root /var/www/domain.com;
    index index.html index.htm;
}
location ^~ /my_dir/vue_app {
    root /var/www/domain.com;
    index index.html index.htm;
    try_files $uri $uri/ /my_dir/vue_app/index.html;
}