Nginx config to serve react app from sub-folder - reactjs

Question

I have a create-react-app that I built, created npm run dist and copied the resulting dist files to /var/www/html/build/
Here is my nginx config:
server{
listen 9095;
server_name <hostname>;
access_log /var/log/nginx/nginx.pass.access.log;
error_log /var/log/nginx/nginx.pass.error.log;
root /var/www/html/build/;
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
}
With this, I can access http://hostname:9095.
What I actually need is to serve the same site with http://hostname:9095/pass (or /PASS) (and not /)
I have tried various re-write config but I can't seem to figure this out.. Help appreciated

Answer 1

The format of a rewrite expression is rewrite <regex> <replacement> [flag];. The simplest way to redirect /pass or /PASS to your /var/www/html/build/index.html page is as follows.
location ~* ^/pass$ {
rewrite ^/(.*)$ /index.html break;
root /var/www/html/build;
index index.html;
}
The location ~* ^/pass directive is a case-insensitive regular expression match against the /pass URI. The ^ symbol ensures the regex matches only the /pass uri, and not something like /some/dir/pass, while the $ symbol ensures a url like /password is not matched as well.
Note, however, that this regex will match /pAsS, /PAss, and /pasS. In other words, it really is case-insensitive. If you wish to match only /pass or /PASS, you should modify the regex accordingly.
Better yet, you can completely circumvent regex URI matching by using an exact URI match.
location = /pass {
...
}
Using an exact match like this speeds up request processing because regular expressions do not need to be parsed.
To match /PASS, you could then simply define another exact location match block.
location = /PASS {
...
}
This then frees up your main location block for your primary server content.
location / {
root /var/somewhere/else;
index index.html;
}
Edit: After writing this, I came across the alias directive, which also seems promising. I haven't used it myself (I've always used rewrites for this kind of thing), but it's something else to explore as well.