How to rewrite URI nginx reverse proxy using proxy

I'm trying to use nginx to reverse proxy into kubernetes pods running various web apps. My issue is that I can only proxy when location is set to / and not /someplace

I know the internal IPs are working because both web apps load successfully when I use them with location /, and I can curl the webpages internally.

What I would like to happen

http://ServerIP/app1 to route to http://Pod1IP:3000 http://ServerIP/app2 to route to http://Pod2IP:80

In this manner I could easily run all my apps on the same port.

What I believe is happening http://ServerIP/app1 --> httpL//Pod1IP:3000/app1

I tried solving this by doing a rewrite of the URI like below, that resulted in a blank page loading when I tried to access /app1

server {
listen 80;

location = /app1/ {
  rewrite ^.*$ / break;
  proxy_pass http://10.82.5.80:80;
  }
location / {
  proxy_pass http://10.106.228.213:15672;
  }
}

Any ideas where I messed up?

The webapp I am trying to use is called RabbitMQ UI. To try and debug my situation I curled three different URLs to see what nginx was responding with.

Curling the / loads the correct html page, and it works in the browser.

curl http://10.82.5.80/

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
  <head>
    <title>RabbitMQ Management</title>
    <script src="js/ejs-1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.flot-0.8.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.flot-0.8.1.time.min.js" type="text/javascript"></script>
    <script src="js/sammy-0.7.6.min.js" type="text/javascript"></script>
    <script src="js/json2-2016.10.28.js" type="text/javascript"></script>
    <script src="js/base64.js" type="text/javascript"></script>
    <script src="js/global.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script src="js/prefs.js" type="text/javascript"></script>
    <script src="js/formatters.js" type="text/javascript"></script>
    <script src="js/charts.js" type="text/javascript"></script>

    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>

<!--[if lte IE 8]>
    <script src="js/excanvas.min.js" type="text/javascript"></script>
    <link href="css/evil.css" rel="stylesheet" type="text/css"/>
<![endif]-->
  </head>
  <body>
    <div id="outer"></div>
    <div id="debug"></div>
    <div id="scratch"></div>
  </body>
</html>

Curling /rabbitmq returns not found or Moved Permanently

curl http://10.82.5.80/rabbitmq

<html>
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx/1.10.3 (Ubuntu)</center>
</body>
</html>

Curling the /rabbitmq/ location gives the correct page, but loads a blank in the browser. I think this is because the browser cannot reference the js files present in the html doc?

curl http://10.82.5.80/rabbitmq/

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
  <head>
    <title>RabbitMQ Management</title>
    <script src="js/ejs-1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.flot-0.8.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.flot-0.8.1.time.min.js" type="text/javascript"></script>
    <script src="js/sammy-0.7.6.min.js" type="text/javascript"></script>
    <script src="js/json2-2016.10.28.js" type="text/javascript"></script>
    <script src="js/base64.js" type="text/javascript"></script>
    <script src="js/global.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script src="js/prefs.js" type="text/javascript"></script>
    <script src="js/formatters.js" type="text/javascript"></script>
    <script src="js/charts.js" type="text/javascript"></script>

    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>

<!--[if lte IE 8]>
    <script src="js/excanvas.min.js" type="text/javascript"></script>
    <link href="css/evil.css" rel="stylesheet" type="text/css"/>
<![endif]-->
  </head>
  <body>
    <div id="outer"></div>
    <div id="debug"></div>
    <div id="scratch"></div>
  </body>
</html>

Try adding the URL in your proxy location like this:

location = /app1/ {
  proxy_pass http://10.82.5:80/;
}

Adding a trailing / at the end of the proxy_pass forces nginx to strip the /app1 prefix from your requests while sending it to the backend.

Explanation on how it works on the official nginx page: http://nginx.org/en/docs/http/ngx_http_proxy_module.html?&_ga=1.74997266.187384914.1443061481#proxy_pass

If the proxy_pass directive is specified with a URI, then when a request is passed to the server, the part of a normalized request URI matching the location is replaced by a URI specified in the directive: