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.