Docker Compose: Setting up Nginx

Before

We have 2 containers/services - backend and frontend running at 8000 & 3000 ports respectively

• frontend -> http://localhost:3000
• backend -> http://localhost:8000

After

We want the frontend to be accessible at localhost and backend at /api path

• frontend -> http://localhost/
• backend -> http://localhost/api

Configuration

Directory Structure

../
  backend/
  frontend/
  nginx/
    Dockerfile
    nginx.conf
  docker-compose.yml

docker-compose.yml

version: '3.6'
services:
  ...

  backend:
    image: django_project
    ports:
      - 8000:8000
    networks:
      - main
    ...

  frontend:
    image: react_project
    ports:
      - 3000:3000
    networks:
      - main
    ...

  nginx:
    container_name: my_nginx_container
    image: nginx
    # We will build our own nginx container/service
    build:
      # a folder "nginx" needs to exist in the same dir as docker-compose.yml
      context: nginx
     # nginx folder should have the dockerfile to build the nginx container
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      # frontend & backend will be referenceable in nginx.conf for setting upstreams
      - backend
      - frontend
    networks:
      - main
    command: [nginx-debug, '-g', 'daemon off;']

networks:
  main:

Dockerfile

FROM nginx:stable-alpine

# we remove the default ngnix config
RUN rm /etc/nginx/conf.d/default.conf

# we replace it / copy our custom nginx config
ADD ./nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

upstream frontend_server {
  server frontend:3000;
}

upstream backend_server {
  server backend:8000;
}

server {

  listen 80;
  # domain = localhost
  server_name localhost;

  server_tokens off;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  client_max_body_size 100M;

  # localhost will take to localhost:3000 or the frontend container
  location / {
      proxy_pass http://frontend;
  }

  # localhost/api will take to localhost:8000 or the backend container
  location /api {
    proxy_pass http://backend;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
    proxy_connect_timeout       70s;
    proxy_send_timeout          86400;
    proxy_read_timeout          86400;
    send_timeout                86400;
  }

}

That's it!