Django 静的ファイルをアプリケーション毎に管理する

2018/11/3（4年前） Django, Python

Django 静的ファイルをアプリケーション毎に配置します。静的ファイルとは、以下のものを指しています。

画像 (img)
Javascript (js)
スタイルシート (css)

アプリケーション毎とは、startapp コマンドで作成するアプリケーションを指しています。

アプリケーション毎に静的ファイルを別ディレクトリで管理し、デプロイ時にそれを一箇所に集めます。

「それって、何が嬉しいの？」と思うかもしれませんが、アプリケーション毎に管理することによって、メンテナンス性が上がるんです。（と私は思っています。）

もう一つのやり方としては、最初から一箇所で管理する方法もありますが、私の経験上、メンテナンス性が下がります。また、Django Admin やサードパーティーの静的ファイルの取り扱いに困るので、あまりお勧めしません。

Managing static files (e.g. images, JavaScript, CSS) | Django documentation | Django

Contents

1 バージョン
2 インストール
- 2.1 Python のインストール
- 2.2 Django のインストール
3 実装
4 動作確認
- 4.1 アプリケーション毎の静的ファイルを収集
5 まとめ
- 5.1 テンプレートでの実装方法
- 5.2 mod_wsgi 指定方法

バージョン

CentOS 7.5.1804
Python 3.6.4
Django 2.1.2

インストール

まずはじめに環境構築をしていきます。

Python のインストール

$ sudo yum install https://centos7.iuscommunity.org/ius-release.rpm
$ sudo yum install python36u python36u-libs python36u-devel python36u-pip

Python 3 をインストールします。

Django のインストール

$ sudo pip install --upgrade django

Django をインストールします。

実装

環境構築が完了したら、次は実装をします。

startproject, startapp

$ django-admin startproject dj_static
$ cd dj_static/
$ python3.6 manage.py startapp myapp1
$ python3.6 manage.py startapp myapp2

Django のコマンドを使用して、プロジェクトとアプリケーションを２つ作成します。

settings.py

INSTALLED_APPS = [
    ...
    'myapp1.apps.Myapp1Config',
    'myapp2.apps.Myapp2Config',
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

startproject で作成された settings.py を編集します。

ここでのポイントは、STATIC_ROOT です。アプリケーション毎の静的ファイルは、デプロイ時に collectstatic コマンドで一箇所に集めます。この時の保存先は STATIC_ROOT で指定するパスになります。

本番環境で mod_wsgi を利用する場合、Alias にこのパスを指定すれば OK です。

静的ファイルの配置

startapp でアプリケーションを２つ作成しました。それぞれに static ディレクトリを作成し、css ファイルを作成します。

myapp1.css

$ mkdir -p myapp1/static/myapp1/css
$ touch myapp1/static/myapp1/css/myapp1.css

myapp2.css

$ mkdir -p myapp2/static/myapp2/css
$ touch myapp2/static/myapp2/css/myapp2.css

tree

$ tree
.
|-- dj_static
|   |-- __init__.py
|   |-- settings.py
|   |-- static
|   |-- urls.py
|   `-- wsgi.py
|-- manage.py
|-- myapp1
|   |-- admin.py
|   |-- apps.py
|   |-- __init__.py
|   |-- migrations
|   |   `-- __init__.py
|   |-- models.py
|   |-- static
|   |   `-- css
|   |       `-- myapp1.css
|   |-- tests.py
|   `-- views.py
`-- myapp2
    |-- admin.py
    |-- apps.py
    |-- __init__.py
    |-- migrations
    |   `-- __init__.py
    |-- models.py
    |-- static
    |   `-- css
    |       `-- myapp2.css
    |-- tests.py
    `-- views.py

10 directories, 21 files

最終的なファイル構成はこのようになりました。

動作確認

それでは動作確認をしていきます。

アプリケーション毎の静的ファイルを収集

$ python3.6 manage.py collectstatic

121 static files copied to '/home/vagrant/dj_static/static'.
$ tree static/
static/
├── admin
│   ├── css
...
├── myapp1
│   └── css
│       └── myapp1.css
└── myapp2
    └── css
        └── myapp2.css

18 directories, 121 files

アプリケーション毎の静的ファイルを収集するには、collectstatic コマンドを使います。

私が作成したファイルは２つだけですが、Django Admin の大量の静的ファイルも collect されました。このことから、collectstatic は settings.py の INSTALLED_APPS で定義しているアプリケーションの static を全て collect するものと思われます。

まとめ

Django 静的ファイルをアプリケーション毎に管理しました。

もちろん、このままではあまり意味がないので、テンプレートで実装したり、本番環境用にmod_wsgi に指定したりしてください。

テンプレートでの実装方法

{% load static %}
<link rel="stylesheet" href="{% static 'myapp1/css/myapp1.css' %}">

mod_wsgi 指定方法

Alias /static/ /home/vagrant/dj_static/static/