Configure Nginx for React and Flask with Docker-Compose

Question

I am trying to configure multiple Docker containers for a website with Nginx.

I have docker-compose working to spin up each container but I'm having trouble getting the React app to hit the Gunicorn WSGI server for the Flask API's when using Nginx.

Any idea why this might happen? It works fine without Nginx in the picture. Do I need an Nginx conf for the flask app also? Or is it a case of routing requests to the Gunicorn WSGI server from Nginx?

React frontend (container)

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /usr/src/app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx.conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Docker-compose

version: '3.7'

services:
  middleware:
  build: 
      context: ./middleware
      dockerfile: Dockerfile.prod
  command: gunicorn --bind 0.0.0.0:5000 main:app
  ports:
    - 5000:5000
  env_file:
    - ./.env.prod
frontend:
  container_name: frontend
  build:
    context: ./frontend/app
    dockerfile: Dockerfile.prod
  ports:
  - '80:80'

Answer 1

Yes, you need to proxy the traffic in Nginx to the WSGI app, something like

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:/home/sammy/myproject/myproject.sock;
    }
}

read more here

Update

In this particular case, you will need to proxy to Gunicorn which is in a separate container, visible under the name middleware .

Because of that the uwsgi_pass directive should refer to that container:

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass http://middleware:5000;
    }
}

Please mind, that if you're using Gunicorn -it recommends using proxy_pass , not uwsgi_pass .