404 when serving static files with docker+nginx+django/angularjs

I'm following the configuration given at this repository. I decided to keep my docker configuration and actual code in separate repositories - I'd clone the code repo using the Dockerfile. I'm using a docker-machine (locally, using the Virtualbox driver) and docker-compose setup.

The code repo's directory structure is roughly as follows -:

|-- bower.json
|-- CONTRIBUTORS
|-- defsec
|   |-- defsec
|   |   |-- aws_settings.py
|   |   |-- heroku_settings.py
|   |   |-- __init__.py
|   |   |-- settings.py
|   |   |-- urls.py
|   |   |-- views.py
|   |   `-- wsgi.py
|   |-- manage.py
|   |-- quiz_restful
|   |   |-- __init__.py
|   |   |-- permissions.py
|   |   |-- serializers.py
|   |   |-- services.py
|   |   |-- tests.py
|   |   `-- views.py
|   `-- users
|       |-- __init__.py
|       |-- models.py
|       |-- permissions.py
|       |-- serializers.py
|       `-- views.py
|-- extras
|-- gulpfile.js
|-- package.json
|-- Procfile
|-- README.md
|-- requirements.txt
|-- scripts
|   `-- postInstall.sh
|-- static
|   |-- javascripts
|   |   |-- app.js
|   |   |-- controllers
|   |   |   `-- controllers.js
|   |   |-- directives
|   |   |   `-- directives.js
|   |   `-- services
|   |       `-- services.js
|   |-- partials
|   |   |-- eval.html
|   |   |-- exam.html
|   |   |-- exam-partials
|   |   |   |-- exam-view.html
|   |   |   `-- sidebar.html
|   |   |-- login.html
|   |   `-- register.html
|   `-- stylesheets
|       `-- styles.css
|-- templates
|   |-- index.html
|   |-- javascripts.html
|   |-- navbar.html
|   `-- stylesheets.html

The docker-compose.yml file is almost the same as that of the repository I listed above, with the minor difference that I mounted django on volume .:/root - without which a [8] System error: no file or directory error was being thrown. This was probably because /usr/src/app does not exist before the cloning (for reference, this is the original file). The Dockerfile (for the django service) has the following -:

FROM ubuntu:14.04

ENV DJANGO_CONFIGURATION Docker

# First, we need to get git, and clone our repository
# Additionally, get everything else here too, such as nodejs and npm

RUN apt-get update
RUN apt-get install -y ca-certificates git-core ssh nodejs npm python-pip libpq-dev python-dev
RUN ln -s /usr/bin/nodejs /usr/bin/node

ENV HOME /root

# Add custom ssh keypair - usually Bitbucket deployment keys
ADD ssh/ /root/.ssh/

# Fix permissions
RUN chmod 600 /root/.ssh/*

# Avoid first connection host confirmation
RUN ssh-keyscan bitbucket.org > /root/.ssh/known_hosts

# Clone the repo
WORKDIR /usr/src/app
RUN git clone git@bitbucket.org:username/defsec-exam-app.git

# Install requirements
WORKDIR /usr/src/app/defsec-exam-app
RUN pip install -r requirements.txt
RUN npm install -g bower
RUN bower --allow-root install

# Remember to perform migrations on your own, and also create DB when needed.
# S3 Storage
...

# DB Settings
...

WORKDIR /usr/src/app/defsec-exam-app/defsec
CMD ["gunicorn", "defsec.wsgi", "-w", "2", "-b", "0.0.0.0:8000", "--log-level", "-"]

And finally, the nginx.conf to serve the static files is as follows -:

worker_processes 1;

events {

    worker_connections 1024;

}

http {

    server {
        listen 80;
        server_name example.org;

        access_log /dev/stdout;
        error_log /dev/stdout info;

        location /static/ {
            alias /usr/src/app/defsec-exam-app/static;
        }

        location /static/javascripts/ {
          default_type text/javascript;
          alias /usr/src/app/defsec-exam-app/static/javascripts/;
        }

        location /static/stylesheets/ {
          default_type text/css;
          alias /usr/src/app/defsec-exam-app/static/stylesheets/;
        }

    location /static/bower_components/ {
      alias /usr/src/app/defsec-exam-app/static/bower_components/;
    }

        location / {
            proxy_pass http://django:8000;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
        }
    }
}

However, I cannot get nginx to serve the static files at all - all of them return a 404. I wondered if the linking between the nginx and django container services (as defined in docker-compose.yml) was incorrect, but it doesn't seem like it. I also inspected the /etc/hosts file in the nginx container, for linking creates hostfile entries.

172.17.0.136    151ca02e891a
127.0.0.1   localhost
::1 localhost ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
172.17.0.134    defsecdocker_django_1 eb900ed9600c
172.17.0.135    defsecdocker_nginx_1 eec99206076a
172.17.0.134    django eb900ed9600c defsecdocker_django_1
172.17.0.134    django_1 eb900ed9600c defsecdocker_django_1
172.17.0.135    nginx eec99206076a defsecdocker_nginx_1
172.17.0.135    nginx_1 eec99206076a defsecdocker_nginx_1
172.17.0.116    defsecdocker_postgres_1
172.17.0.134    defsecdocker_django_1
172.17.0.135    defsecdocker_nginx_1.bridge
172.17.0.136    defsecdocker_nginx_run_10.bridge
172.17.0.135    defsecdocker_nginx_1
172.17.0.136    defsecdocker_nginx_run_10
172.17.0.116    defsecdocker_postgres_1.bridge
172.17.0.134    defsecdocker_django_1.bridge

I'm not sure if this is right, as there are only 3 containers but a hell lot of entries in the hosts file, some of which are duplicates. This is reproducible behaviour - I get this exact file each time I build and run the container using docker-compose. The docker-compose logs for nginx confirm the 404s.

Any pointers would be greatly appreciated.

It would appear that the docker-compose configuration was not correct. The reason nginx threw those 404s was because it had no access to /usr/src/app/defsec-exam-app/static.

Here is the correct docker-compose config -:

# Nginx
nginx:
    build: ./nginx
    volumes_from:
        - django
    links:
        - django
    ports:
        - "80:80"

# This defines a service for the Django app
# Will include the Angular frontend
django:
    build: .
    volumes:
        - .:/root
        - /usr/src/app
    expose:
        - "8000"
    links:
        - postgres

# This defines a service for the Postgres database
postgres:
    image: postgres:latest

volumes_from gets the volumes from the django service. And I have exposed usr/src/app as a volume. This seems to do the trick. I'm open to suggestions, if any!

Additionally, here is the new nginx config -:

worker_processes 1;

events {

    worker_connections 1024;

}

http {

    server {
        listen 80;
        server_name example.org;

        access_log /dev/stdout;
        error_log /dev/stdout info;

        location /static/ {
            alias /usr/src/app/defsec-exam-app/static;
        }

        location /static/javascripts/ {
          default_type text/javascript;
          alias /usr/src/app/defsec-exam-app/static/javascripts/;
        }

        location /static/stylesheets/ {
          default_type text/css;
          alias /usr/src/app/defsec-exam-app/static/stylesheets/;
        }

    location /static/bower_components/ {
      types {
        text/css css;
        text/javascript js;
      }
      alias /usr/src/app/defsec-exam-app/static/bower_components/;
    }

    location /static/partials/ {
      types {
        text/html html;
      }
      alias /usr/src/app/defsec-exam-app/static/partials/;
    }

    location /static/admin/ {
          alias /usr/src/app/defsec-exam-app/static/admin/;
    }

    location /static/admin/css {
      default_type text/css;
      alias /usr/src/app/defsec-exam-app/static/admin/css;
    }

    location /static/admin/js {
      default_type text/javascript;
      alias /usr/src/app/defsec-exam-app/static/admin/js;
    }

    location /static/admin/img {
      types {
        image/png png;
        image/jpeg jpg;
      }
      alias /usr/src/app/defsec-exam-app/static/admin/img;
    }

        location / {
            proxy_pass http://django:8000;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
        }
    }
}

Note: I had to add django admin css/js/img to the docker/deployment repository separately, so that django admin works properly. (A simple ADD command in the django Dockerfile does the trick)