NGINX How to rewrite a pathname but not files? - nginx

Question

I have a NGINX server that serves a UI at /. The UI is running on localhost:8081 and the server runs on localhost:8080.
I need any pathname that is entered to be passed to the root of the UI.
For example:
localhost:8080/search should proxy_pass to localhost:8081
but files should not be changed:
localhost:8080/main.css => localhost:8081/main.css
This works but isn't dynamic
I tried to use a separate location for each pathname however I want the configuration to be dynamic for future development.
location / {
proxy_pass http://localhost:8081;
}
location /search {
proxy_pass http://localhost:8081/;
}
location /foobar {
proxy_pass http://localhost:8081/;
}
File name handler
I tried catching the file names but you can't proxy_pass within a regex location block.
location ~* \.(.*?)$ {
proxy_pass http://localhost:8081/;
}
try_files
I tried using try_files but nginx didn't serve anything (gave me a prompt to set up nginx)
location / {
try_files $uri $uri/ #app;
}
location #app {
proxy_pass http://localhost:8081;
}
My Nginx config looks like this without the location blocks
worker_processes 1;
error_log /usr/local/etc/nginx/logs/error.log notice;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
log_format main '[$time_local] $remote_addr - "$request" '
'$status "$http_referer" => "$proxy_host" $uri';
log_format log_server escape=json '$request_body';
access_log /usr/local/etc/nginx/logs/access.log main;
proxy_max_temp_file_size 0;
proxy_buffering off;
sendfile on;
keepalive_timeout 65;
gzip on;
server {
listen 8080;
server_name localhost;
rewrite_log on;
add_header 'Access-Control-Allow-Origin' 'http://localhost';
add_header 'Access-Control-Allow_Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,Keep-Alive,User-Agent,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
location / {
# stuff from above + headers
}
}
}
I am using webpack dev server for local development however the final bundle has the structure:
/root
bundle.js
main.css
index.html
cd6c777f1945164224dee082abaea03a.woff2
etc...