Django container - serving static files

Question

I'm trying to put my API made with django-rest-framework into a docker container.

Everything seems to works except that I can't access to my static files.

Here is my settings.py:

MEDIA_URL = '/uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

My urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    path('api/bookmakers/', include('bookmakers.urls')),
    path('api/pronostics/', include('pronostics.urls')),
    path('api/', include('authentication.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

My Dockerfile

FROM python:3.6

ENV PYTHONUNBUFFERED 1

RUN mkdir /code

WORKDIR /code

ADD requirements.txt /code/

RUN apt-get update && apt-get install -y locales && rm -rf /var/lib/apt/lists/* \
&& localedef -i fr_FR -c -f UTF-8 -A /usr/share/locale/locale.alias fr_FR.UTF-8

ENV LANG fr_FR.UTF-8
ENV LANGUAGE fr_FR
ENV LC_ALL fr_FR.UTF-8

RUN python --version

RUN pip install --upgrade pip

RUN pip install -r requirements.txt

ADD . /code/

COPY docker-entrypoint.sh /code/

ENTRYPOINT ["/code/docker-entrypoint.sh"]

And finally my docker-compose.yml

version: '3.1'

services:
    db:
      image: postgres
      container_name: nyl2pronos-db
      restart: always
      environment:
        POSTGRES_PASSWORD: password
        POSTGRES_DB: nyl2pronos


    website:
        container_name: nyl2pronos-website
        image: nyl2pronos-website
        build:
          context: nyl2pronos_webapp
          dockerfile: Dockerfile
        ports:
            - 3000:80

    api:
        container_name: nyl2pronos-api
        build:
            context: nyl2pronos_api
            dockerfile: Dockerfile
        image: nyl2pronos-api
        restart: always
        ports:
            - 8000:8000
        depends_on:
            - db
        environment:
            - DJANGO_PRODUCTION=1

So once I go to the url: http://localhost:8000/admin/, I can login but there is no css because the static files don't load.

GET http://localhost:8000/static/admin/css/forms.css net::ERR_ABORTED 40

If you see another mistake, don't hesitate, just tell me.

Thank you in advance!

Answer 1

If you are using Gunicorn or any production grade django server, they usually does not serve static contents. There are alternative ways to serve them. One of them is using whitenoise. You can try like this:

pip install whitenoise

And add a new middleware:

MIDDLEWARE = [
  # 'django.middleware.security.SecurityMiddleware',
  'whitenoise.middleware.WhiteNoiseMiddleware',
  # ...
]

Another way is to use NGINX. I would suggest you can do it like this

# inside config/nginx/conf.conf  in source code

upstream web {  
  ip_hash;
  server web:8000;
}

server {

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

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

    location / {
        proxy_pass http://web/;
    }
    listen 8000;  
    server_name localhost;
}

Now update your docker compose to add NGINX and the configuration given above:

db:
  image: postgres
  container_name: nyl2pronos-db
  restart: always
  environment:
    POSTGRES_PASSWORD: password
    POSTGRES_DB: nyl2pronos


website:
    container_name: nyl2pronos-website
    image: nyl2pronos-website
    build:
      context: nyl2pronos_webapp
      dockerfile: Dockerfile
    ports:
        - 3000:80

api:
    container_name: nyl2pronos-api
    build:
        context: nyl2pronos_api
        dockerfile: Dockerfile
    image: nyl2pronos-api
    restart: always
    ports:
        - 8000:8000
    depends_on:
        - db
    environment:
        - DJANGO_PRODUCTION=1

nginx:
    image: nginx:latest
    container_name: nz01
    ports:
       - "8000:8000"
    volumes:
       - ./src:/src  # for syncing with django source code
       - ./config/nginx:/etc/nginx/conf.d
    depends_on:
      - nyl2pronos-api

For more details, you can check my repository here: https://github.com/ruddra/docker-django or you can check this post on how I configure NGINX.