title: Nginx - allow user to hit seperate URIs to reach seperate internal copies of the same React app
body: <p><strong>----- SECOND ATTEMPT ------</strong></p>
  
  <p>The problem and idea is still the same as below, but this is what I have for NGINX now:</p>
  
  <pre><code>    set $QA "http://reactapp-qa:80";
      set $DEV "http://reactapp-dev:80";
      set $PROD "http://reactapp-prod:80";
  
      location /dev {          
  
          rewrite ^/dev(.*)$ /$1 break;
  
          proxy_pass $DEV;
  
      }
  
      location /qa {          
  
          rewrite ^/qa(.*)$ /$1 break;
  
          proxy_pass $QA;
  
      }
  
      #reactapp
      location / {          
  
          rewrite /(.*) /$1 break;
  
          proxy_pass $PROD;
      }
  </code></pre>
  
  <p>My / location works great</p>
  
  <p>The other locations load the header and some page elements from the app but do not trigger react axios api calls like the / location does, so they fail.</p>
  
  <p>I feel like I am much closer, just need to figure out what is happening with the axios calls.</p>
  
  <p><strong>----- ORIGINAL POST ------</strong></p>
  
  <p><strong>PROBLEM SUMMARY</strong></p>
  
  <p>We have a React app in a container and nginx in another container in the host. </p>
  
  <p>The configuration works now but we want to make it work a little differently - we want three seperate copies of the React app in their own containers to be reachable from different addresses - but are having problems understanding what we need to do to make it work.</p>
  
  <p><strong>BACKGROUND</strong></p>
  
  <p>The app is using React/Dotnetcore app in a stack in a host in Rancher 1.6.</p>
  
  <p>I am not a React Developer but can talk to the one who wrote the app Monday! We also inherited Nginx and i've been learning to use it by trial by fire.</p>
  
  <p><strong>CONFIGURATION EXAMPLES</strong></p>
  
  <p>Here is our NGINX location block for our currently functioning configuration. This all works great as outlined in the Actual and Expected Results section below:</p>
  
  <pre><code>set $ReactAppDev_url "http://reactapp-development:80";
  set $ReactAppQA_url "http://reactapp-qa:80";
  set $ReactAppProd_url "http://reactapp-production:80";
  
  location / {          
  
      rewrite /(.*) /$1 break;
  
      proxy_set_header Authorization $http_authorization;
      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-Host $server_name;
      proxy_set_header X-Forwarded-Proto https;
  
      resolver {{DNS_RESOLVER}} valid=30s;
      proxy_pass $ReactAppDev_url;
  
  }
  </code></pre>
  
  <p>I'm sure what i've tried as a start is probably going about things the wrong way but replacing the / location blocks with /production was my first attempt. I don't really think I understand how it all fits together despite reading a handful of articles and nginx official docs about the rewrite module and locations:</p>
  
  <pre><code>set $ReactAppDev_url "http://reactapp-development:80";
  set $ReactAppQA_url "http://reactapp-qa:80";
  set $ReactAppProd_url "http://reactapp-production:80";
  
  location /production {          
  
      rewrite /production/(.*) /$1 break;
  
      proxy_set_header Authorization $http_authorization;
      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-Host $server_name;
      proxy_set_header X-Forwarded-Proto https;
  
      resolver {{DNS_RESOLVER}} valid=30s;
      proxy_pass $ReactAppProd_url;
  }
  
  location /dev {...same as above but dev in rewrite and proxy_pass $ReactAppDev_url}
  
  location /qa {...same as above but qa in rewrite and proxy_pass $ReactAppQA_url}          
  </code></pre>
  
  <p>This resulted in the page not working:</p>
  
  <pre><code>[error] 29#29: *5 directory index of "/" is forbidden, client: , server: localhost, request: "GET / HTTP/1.1", host: ""
  1/19/2019 8:01:52 PM - - [20/Jan/2019:03:01:52 +0000] "GET / HTTP/1.1" 403 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
  </code></pre>
  
  <p><strong>ACTUAL AND EXPECTED RESULTS</strong></p>
  
  <p>Here is what a user does to interact with the site now - this all functions:</p>
  
  <ul>
  <li>User hits <a href="https://www.servername.com/" rel="nofollow noreferrer">https://www.servername.com/</a> and the React app shows a login page.</li>
  <li>User enters login credentials and React app detects identity</li>
  <li>If identity is good React app displays <a href="https://www.servername.com/request" rel="nofollow noreferrer">https://www.servername.com/request</a> with request data </li>
  </ul>
  
  <p>I am trying to make it so that the user can access one of three uris and be routed to different internal services depending on which uri is hit: </p>
  
  <ul>
  <li>User hits <a href="https://www.servername.com/development" rel="nofollow noreferrer">https://www.servername.com/development</a>> location block above functions </li>
  <li>User hits <a href="https://www.servername.com/qa" rel="nofollow noreferrer">https://www.servername.com/qa</a>> location block above functions but proxy_pass directive uses ReactAppQA_url instead</li>
  <li>User hits <a href="https://www.servername.com/production" rel="nofollow noreferrer">https://www.servername.com/production</a>> location block above functions but proxy_pass directive uses ReactAppProduction_url instead</li>
  <li>Each url is a copy of the app just at a different internal rancher service; user enters login credentials, app detects identity</li>
  <li>If identity is good app opens www.servername.com/request</li>
  </ul>
  
  <p>I'm not sure if this gets configured in Nginx or if the React app itself would need configuration to enable users to reach /development, /qa, /production.</p>
  
  <p>Would anyone be so kind as to offer any suggestions about how we might be able to configure this?</p>