How to serve static content with Nginx and Django Gunicorn when using Traefik

Question

I have a web application (Django based) that is utilising multiple containers:

1. Web Application (Django + Gunicorn)
2. Traefik (acting as the reverse proxy an

Answer 1

If anybody else needs an answer to this, the answer lies in creating a seperate NGINX service and then directing the front end rules to the static location (xyz.com/static), e.g. see below (part of docker-compose.yml):

  nginx:
       image: nginx:alpine
       container_name: nginx_static_files
       restart: always
       volumes:
           - ./default.conf:/etc/nginx/conf.d/default.conf
           - ./saleor/static/:/static
       labels:
           - "traefik.enable=true"
           - "traefik.backend=nginx"
           - "traefik.frontend.rule=Host:xyz.co;PathPrefix:/static"
           - "traefik.port=80"

You also need to ensure that your Nginx config file (default.conf) is appropriately configured:

server {
   listen                      80;
   server_name                 _;
   client_max_body_size        200M;
   set                         $cache_uri $request_uri;

   location                    = /favicon.ico { log_not_found off; access_log off; }
   location                    = /robots.txt  { log_not_found off; access_log off; }
   ignore_invalid_headers      on;
   add_header                  Access-Control-Allow_Origin *;

   location /static {
       autoindex on;
       alias /static;
   }

   location /media {
       autoindex on;
       alias /media;
   }

   access_log                  /var/log/nginx/access.log;
   error_log                   /var/log/nginx/error.log;
}

All credit goes to Pedro Rigotti on the Traefik slack channel for helping me arrive at the solution.

Answer 2

I don't have much idea about Traefik and Docker.

But I can tell you how you can install nginx and use it to serve static files(which is always recommended in order to not choke the django server by serving static files)

Install nginx and follow the steps mentioned to setup nginx .

sudo apt-get install nginx

The site-available file should look something like this:

server {
        listen 80;
        listen [::]:80;

        server_name xyz.com;
        client_max_body_size 20M;

        # xyz.com/media/any_static_asset_file.jpg 
        # when anyone hits the above url then the request comes to this part.
        location /media/ {

                # do make sure that the autoindex is off so that your assets are only accessed when you have proper path

                autoindex off; 

                # this is the folder where your asset files are present.

                alias /var/www/services/media/; 
        }

        # whenever any request comes to xyz.com then this part would handle the request
        location / {
                proxy_pass http://unix:/var/www/services/xyz/django_server.sock;
                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;
        }
}