title: Azure Web App Service + Docker Compose + NGINX Reverse Proxy -- 502 Error in Deployment
body: <p>as the title states, I have created a full stack application that uses FastAPI as the backend, and ReactJS as the frontend. I also have a third container for my Nginx reverse proxy. Reason I have this third container is so that I can make calls to my backend from the client's browser using the service/container names I create in the docker-compose.yaml file.</p>
  <p>I then use the compose file to build and run all 3 of those containers. When I am working locally, everything works great at the localhost endpoint on my browser. However, when I try to deploy to Azure Web App Service, I am only able to load the frontend (React) home page. When I open the console, I receive an error saying 502 (Bad Gateway).</p>
  <p>Below is a snippet of my ReactJS code that makes a post request for authentication</p>
  <pre><code>import React, { useEffect, useContext } from 'react';
  import { Redirect, Route } from 'react-router-dom';
  import Cookies from 'js-cookie';
  import { AuthContext } from './contexts/AuthContext';
  
  const PrivateRoute = ({ component: Component, ...rest }) =&gt; {
    // Import the functions to set states
    const { isAuthenticated, setIsAuthenticated, setUsername } =
      useContext(AuthContext);
  
    // Read in the access token; if not available, make empty string
    const accessToken =
      Cookies.get('access_token') == null ? '' : Cookies.get('access_token');
  
    // Create the use effect function to generate the component
    useEffect(() =&gt; {
      fetch(`${window.location.protocol}//${window.location.hostname}/backend/auth/validate_token`, {
        method: 'POST',
        mode: 'cors',
        credentials: 'include',
        headers: {
          Accept: 'application/json',
        },
        body: JSON.stringify({
          token: accessToken,
        }),
      })
        .then((response) =&gt; {
          return response.json();
        })
        .then((response) =&gt; {
          // Set the view based on the return
          if (response) {
            setIsAuthenticated(true);
            setUsername(response.username);
          } else {
            setIsAuthenticated(false);
          }
        });
    });
  
    return (
      &lt;&gt;
        &lt;Route
          {...rest}
          render={() =&gt; {
            if (isAuthenticated) {
              return &lt;Component {...rest} /&gt;;
            } else {
              return &lt;Redirect to='/login' /&gt;;
            }
          }}
        /&gt;
      &lt;/&gt;
    );
  };
  
  export { PrivateRoute };
  </code></pre>
  <p>Below is my docker compose file</p>
  <pre><code>version: &quot;3&quot;
  services:
      reverse-proxy:
          container_name: reverse-proxy
          build:
              context: ./proxy
              dockerfile: Dockerfile
          image: ilecontainerregistry.azurecr.io/proxy:latest
          ports:
              - 80:80
              - 443:443
          depends_on:
              - frontend
              - backend
      frontend:
          container_name: frontend
          domainname: &quot;usps-ile&quot;
          # Remove the build command for configuration file in azure web app service
          build:
              context: ./frontend
              dockerfile: Dockerfile
          image: ilecontainerregistry.azurecr.io/frontend:latest
          ports:
              - 8080:80
          env_file:
              - ./frontend/.env
      backend:
          container_name: backend
          domainname: &quot;usps-ile&quot;
          # Remove the build command for configuration file in azure web app service
          build:
              context: ./backend
              dockerfile: Dockerfile
          image: ilecontainerregistry.azurecr.io/backend:latest
          ports:
              - 3000:3000
          env_file:
              - ./backend/app/.env
  </code></pre>
  <p>Below is my dockerfile for the nginx container</p>
  <pre><code>FROM nginx:latest
  
  COPY nginx.conf /etc/nginx/
  </code></pre>
  <p>And lastly, here is my nginx.conf file</p>
  <pre><code>events {
      worker_connections 1024;
  }
  
  http {
  
      upstream backend{
          server backend:3000;
      }
  
      server {
  
          listen 80;
          listen 443;
          server_name _;
  
          location / {
              proxy_pass http://frontend:80/;
          }
  
          location /backend/ {
              proxy_pass http://backend/;
          }
      }
  }
  </code></pre>
  <p>Below is a snippet from the FastAPI backend for the authentication post route in Python</p>
  <pre><code>@auth_router.post(&quot;auth/validate_token&quot;, tags=[&quot;Auth&quot;])
  async def validate_token(token: Token):
      '''
      This function is responsible for
      reading in the token in an object
      and validating if it is still valid
      '''
  
      try:
  
          # Get the access token from the request cookie
          authorization: str = token.token
  
          # Split the access token on the space &quot;Bearer&quot; &quot;xxxxxxxxx-token&quot;
          scheme, access_token = get_authorization_scheme_param(authorization)
  
          # Decode the token and check if it is valid
          decoded_token = jwt.decode(
              token=access_token,
              key=os.getenv(&quot;SECRET_KEY&quot;),
              algorithms=[os.getenv(&quot;ALGORITHM&quot;)]
          )
  
          return decoded_token
      except Exception as e:
          return False
  
  </code></pre>
  <p>Thank you in advance!</p>