Hot top-up site (webpack-dev-server) behind nginx reserve proxy docker

I try to configure a nginx container as a proxy for my development site that runs on webpack-dev-server. Unfortunately, I have the problem of loading static files (404 not found).

When the request reaches the index.html file of the proxy server, try to find the static files at http: // localhost: 8081 / static / js / bundle.js, which is not the actual location.

Here is my index.html:





  
  
  
  
  
  Energy plan



  
  

Here is my nginx configuration:

server {
listen 80;
servername localhost;
error_log /var/log/nginx/nginx_error.log warn;

location / energy plan / {
resolve 127.0.0.11 ipv6 = off;
proxy_pass http: //host.docker.internal: 3000 /;

proxy_http_version 1.1;
proxy_set_header Host $ host;
proxy_set_header X-Real-IP $ remote_addr;
proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $ schema;
proxy_set_header X-Forwarded-Host $ host;
proxy_set_header X-Forwarded-Port $ server_port;
proxy_cache_bypass $ http_upgrade;
proxy_set_header Upgrade $ http_upgrade;
proxy_set_header Connection "update";
}

Location / {
root / usr / share / nginx / html;
index index.html index.htm;
}

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

}