404 ao servir arquivos estáticos com o docker + nginx + django / angularjs

Question

Estou seguindo a configuração dada em este repositório . Decidi manter a configuração do docker e o código real em repositórios separados - eu clonaria o repositório de código usando o Dockerfile. Estou usando um docker-machine (localmente, usando o driver do Virtualbox) e o docker-compose setup.

A estrutura de diretório do repositório de código é aproximadamente a seguinte -:

|-- 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

O arquivo docker-compose.yml é quase o mesmo do repositório que listei acima, com a menor diferença que montei em django no volume .:/root - sem o qual um erro [8] System error: no file or directory estava sendo gerado. Isso provavelmente ocorreu porque /usr/src/app não existe antes da clonagem (para referência, este é o arquivo original). O Dockerfile (para o serviço django ) tem o seguinte -:

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 [email protected]: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", "-"]

E, finalmente, o nginx.conf para veicular os arquivos estáticos é o seguinte -:

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;
        }
    }
}

No entanto, não consigo fazer com que o nginx veicule os arquivos estáticos - todos eles retornam um 404. Gostaria de saber se a vinculação entre os serviços de contêiner nginx e django (conforme definido em docker-compose.yml ) estava incorreta , mas não parece ser isso. Também inspecionei o arquivo /etc/hosts no contêiner nginx , para vincular cria entradas de hostfile.

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

Não tenho certeza se isso está correto, pois há apenas três contêineres, mas um monte de entradas no arquivo hosts, algumas das quais são duplicatas. Isso é um comportamento reproduzível - recebo esse arquivo exato toda vez que eu construo e executo o contêiner usando o docker-compose. Os logs que compõem o docker para nginx confirmam os 404s.

Todos os ponteiros seriam muito apreciados.

    

Answer 1

Parece que a configuração do docker-compose não estava correta. A razão pela qual o nginx jogou esses 404s foi porque não tinha acesso a /usr/src/app/defsec-exam-app/static .

Aqui está a configuração correta do docker-compose -:

# 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 obtém os volumes do serviço django. E eu expus usr/src/app como um volume. Isso parece fazer o truque. Estou aberto a sugestões, se houver!

Além disso, aqui está a nova configuração do nginx -:

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;
        }
    }
}

Nota: Eu tive que adicionar o django admin css / js / img ao repositório docker / deployment separadamente, para que o django admin funcionasse corretamente. (Um simples comando ADD no django Dockerfile faz o truque)