Nginx Proxy Pass Always Returning 404s - docker

Question

So I'm working on a POC for a micro-frontend architecture. I am using nginx as the driver for this. In my local environment, I'm testing the docker configuration for the projects. Each micro-frontend will be in its own docker container, and they will share a network. The container names are:
micro-fe-parent
micro-fe-react-wc
The goal is to get micro-fe-parent to be able to load content from micro-fe-react-wc via an nginx proxy. My webpack dev server proxy setup works perfectly with my existing code, but with nginx all I'm getting is 404s.
I can shell into the container and use curl to hit the micro-fe-react-wc application directly, and I can manually request any file successfully this way. So the containers can see each other, the docker network is working. Something in the proxy pass is not working. Unfortunately, nginx logs are no help, and it's debugging tools are really lacking.
The goal of the proxy is that any URI it sees that starts with /react-wc, it will remove the /react-wc part and resolve the rest of the URI against the target host. So let's say I have a file called "app.js", the request I would be making from micro-fe-parent would be /react-wc/assets/app.js, and nginx would proxy that to http://micro-fe-react-wc/assets/app.js, preserving most of the URI but removing that one path element.
I've tried everything I can think of to configure this properly.
Here is my nginx.conf:
worker_processes auto;
events {
worker_connections 1024;
multi_accept on;
}
http {
log_format compression '$remote_addr - $remote_user [$time_local] '
'"$request" $status $upstream_addr '
'"$http_referer" "$http_user_agent"';
log_format new_format '[$time_local] $remote_addr - $remote_user - $server_name to: $upstream_addr: $request upstream_response_time $upstream_response_time msec $msec request_time $request_time';
include /etc/nginx/mime.types;
default_type text/plain;
gzip on;
gzip_disable "msie6"
gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gunzip on;
gzip_static always;
gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/xml+rss;
gzip_vary on;
fastcgi_buffers 8 16k;
fastcgi_buffer_size 32k;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
server {
listen 80;
server_name micro-fe-parent;
access_log /var/log/nginx/access.log new_format;
error_log /var/log/nginx/error.log debug;
rewrite_log on;
root /var/www;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /react-wc {
rewrite '^/react-wc(/.*)$' '$1' break;
proxy_pass http://micro-fe-react-wc;
}
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
location ~ ^.+\..+$ {
try_files $uri =404;
}
}
}

Answer 1

So the problem was I wasn't using ^~ to treat it like a regex match, so it was looking for a literal /react-wc path instead of as a matcher on the path.
location ^~ /react-wc {
rewrite '^/react-wc(/.*)$' '$1' break;
proxy_pass http://micro-fe-react-wc;
}