configuring django with nginx gunicorn on docker

Question

Good day, I am new to docker and I have a Django app I will like to dockerize, I have searched for tutorials to help me set up my Django app with docker, I followed this article here on test-driven https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/. I get issues making nginx work with my app. here is my code.

my apps docker file:

FROM python:3.8-alpine

ENV PATH="/scripts:${PATH}"

COPY ./requirements.txt /requirements.txt
RUN pip install -r /requirements.txt


RUN mkdir /app
COPY ./testdocker /app
WORKDIR /app
COPY ./scripts /scripts

RUN chmod +x /scripts/*

RUN mkdir -p /vol/web/media
RUN mkdir -p /vol/web/static

RUN adduser -D user
RUN chown -R user:user /vol

RUN chmod -R 755 /vol/web

USER user

nginx docker file:

FROM nginx:1.19.3-alpine

RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/conf.d

RUN mkdir -p /vol/static

my docker-compose file:

version: '3.7'

services:
    app:
        build:
            context: .
        command: sh -c "gunicorn testdocker.wsgi:application --bind 0.0.0.0:8000"
        volumes:
            - static_data:/vol/web
        expose:
            - "8000"
        environment: 
            - SECRET_KEY=MANME1233
            - ALLOWED_HOSTS=127.0.0.1, localhost
    
    nginx:
        build: 
            context: ./nginx
        volumes: 
            - static_data:/vol/static
        ports: 
            - "8080:80"
        depends_on:
            - app

volumes: 
    static_data:


my nginx conf file:

 upstream testapp {
     server app:8000;
 }

    server {
    listen 8080;
    server_name app;
    
    location / {
        proxy_pass http://testapp;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }
  
    location /static {
        alias /vol/static;
    }

}

I can't seem to get nginx to reverse proxy to my web app, upon opening the URL on the browser I get a 404 bad request or address not found. please what am I doing wrong or not doing right?.

Answer 1

@victormazeli It looks like you missed placing your services within the same docker network and I see some misconfiguration in nginx conf file. Try updating your docker-compose.yml as follows:

version: '3.7'

services:
    app:
        build:
            context: .
        command: sh -c "gunicorn testdocker.wsgi:application --bind 0.0.0.0:8000"
        volumes:
            - static_data:/vol/web
        expose:
            - "8000"
        environment: 
            - SECRET_KEY=MANME1233
            - ALLOWED_HOSTS=127.0.0.1, localhost
        networks:
            - main
    
    nginx:
        build: 
            context: ./nginx
        volumes: 
            - static_data:/vol/static
        ports: 
            - "8080:80"
        depends_on:
            - app
        networks:
            - main

volumes: 
    static_data:
networks:
    main:

Then, update your nginx config as follows:

server {
  server_name nginx;
  listen 80;

  location /static {
    alias /vol/static;
  }
  location / {
    proxy_pass http://app:8000/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

}

Another thing to keep in mind here is that you have 2 targets that are being served by the NGINX reverse-proxy:

1. Django project located in testdocker which should be accessible via localhost:8080
2. Static file data which is accessible via localhost:8080/static/[relative_path]

To access the static data, you will need the path relative to /vol/static in nginx service (which is a docker volume mount also mounted to /vol/web in app service). According to app's Dockerfile, the static_data volume should contain 2 directories: media and static. Therefore, if you have say an index.html located in directory /vol/web/static in app service, it should be accessible via localhost:8080/static/static/index.html.

Give this a try and let me know how it works out for you.