前回の記事では簡単な日記アプリを作りましたが、CSSが配信されていなかったので、今回はその部分を修正していきます。

つくったもの

cssが適用されたページを表示したいと思います。

コンテナを起動

$ docker-compose up -d
$ docker-compose exec web bash

settings.pyを開いて、静的ファイルの置き場所を指定します。

conf/settings.py

# 静的ファイルの配信
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

collectstaticを行い、静的ファイルを指定した場所に集めます。

$ python manage.py collectstatic

今、webコンテナの中でcollectstaticを実行したので、webコンテナ内にstaticフォルダが作成され、静的ファイルはその中に格納されました。下の図で言うと①です。

実は、docker-compose.ymlにボリュームマウントを記述しておいたので、作成したstaticフォルダはホストにもコピーされます。上の図の②です。

docker-compose.yml

services:
  web:
    volumes:
      - './web:/code'

そして、staticフォルダはnginxコンテナにもマウントしているので、静的ファイルはnginxコンテナにもコピーされます。上の図の③です。

docker-compose.yml

services:
  nginx:
    volumes:
      - './web/static:/static'

さらにnginxコンテナにはguicornの設定ファイルがあり、静的ファイルの配信先として先ほどコピーされたstaticフォルダが指定されています。

nginx/conf/gunicorn.conf

location /static {
    alias /static/;
}

以上より、静的ファイルはnginxから配信されるようになります……というのが、私の理解なのですが、どうでしょうか…。間違っていたらご指摘いただけると嬉しいですm(_ _)m

localhost:80/adminにアクセスすると、今度はcssが適用されたページが表示されると思います。