投稿日：2018年3月7日   ｜  最終更新日: 2018年3月9日

ConoHaVPSに設置したDjangoの管理画面にCSSを適用

VPS

ConoHaVPSにセットアップしたDjangoの管理画面にCSSを適用します。

Djangoで静的ファイルを使う

前回は、Djangoのプロジェクトのモデルを使い、テーブルを作成しました。今回は、Djangoで静的ファイルを使用可能して、管理画面にCSSを適用します。

静的ファイル

サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために以下のファイルを提供します。

• 画像
• JavaScript
• CSS

Djangoでは、これらのファイルを “静的 (static) ファイル” と呼びます。

Djangoでは、静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくすることができます。そのためにdjango.contrib.staticfilesを利用します。

簡易サーバと本番環境の違い

Django使って最初に躓くのがこの「static files （静的ファイル）」の扱いです。Djangoの簡易サーバは便利に使えますが、そのままApacheなどの本番環境で扱おうとすると思ったとおり動きません。例えば、簡易サーバでDjangoを起動すると、特に何もしなくても管理画面にCSSが適用されます。しかし、本番環境ではセキュリティの都合上、静的ファイルの設置場所とその設定を決めなければいけません。

簡易サーバ

開発中はプロジェクトディレクトリにて、次のコマンドで簡易サーバ利用をします。

python manage.py runserver

※settings.py : DEBUG=”Ture” のケース

• 簡易サーバは、あくまでも開発中が前提
• 各アプリの「static files 」は、直接アクセス可にしてくれる
• DEBUG=”False” か —nostatic の時は、別の動作
• admin が使う「/static/admin/」ディレクトリは、公開されておりアクセス可能

本番環境で静的ファイルを使うには？

簡易サーバでは「static files」の自動公開機能を使えますが、本番のサーバーではそうは行きません。各アプリ中の「/static/」を一カ所に集めて、Webサーバーで公開する手順を踏みます。

• STATIC_ROOTをApacheなどのWebサーバで「STATIC_URL」名で公開
• settings.pyの STATIC_ROOT で static files を集めるディレクトリを指定
• python manage.py collectstaticコマンドで、一カ所に集める

以下のコマンドで、各アプリの「/static/」を「STATIC_ROOT」に集めます。

python manage.py collectstatic

作業の流れ

投票アプリを制作します。そのために、投票項目が格納されているQuestionテーブル(モデル)と、Questionの投票項目のテキストなどを格納するChoiceテーブル(モデル)を作成します。

• 管理サイトにログインできるスーパーユーザを作成
• Djangoプロジェクトにstaticディレクトリ作成
• staticディレクトリの所有者変更
• apacheの設定ファイル（httpd.conf）の変更
• settings.pyの変更
• コマンドで静的ファイル集約

準備

以下の準備を行います。

ConoHaVPSの準備

①ConoHaをレンタルします。

→ConoHaVPSをレンタルしてみる

②ConoHaにroot以外のユーザを作ります。

→ConoHaのroot以外のユーザを作る

③ConoHaにSSH接続するための設定を行います。

→ConoHaのSSH接続

④ConoHaへのrootログインを禁止します。

→rootからのログインを禁止

⑤ConoHaのportを22から変更します。

→SSH接続するportを22から変更

⑥ConoHaVPSへApacheをインストールしてスタートページを表示します。

→ConoHaのVPSにApacheインストール

Python・Djangoの準備

①ConoHaVPSへPython3をインストールします。

→ConoHaのVPSにPython3環境を作る

②ConoHaVPSへPython3をインストールします。

→ConoHaのVPSにPython3環境を作る

③ConoHaVPSへWSGIをインストールします。

→ConoHaのVPSにApacheでPythonWebアプリを作る（WSGI）

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

→ConoHaのVPSにDjango環境を作る

⑤Djangoのデータベース接続・初期化します。

→ConoHaでDjangoのデータベース接続・初期化

⑥Djangoのプロジェクトにアプリケーションを作成します。

→ConoHaでDjangoのアプリケーション作成

⑥Djangoのモデルを作成し、テーブルを追加します。

→ConoHaでDjangoのモデル作成

必要なもの

レンタルサーバ	ConoHaのVPSサーバ
独自ドメイン	ムームードメインで、独自ドメインのみ取得。2年契約で（2,000〜3,000円）くらい？

ConoHaVPSの環境

アプリケーションサーバ　OS	CentOS7.4
Apache	2.4.6 (CentOS)
Python	3.6.4
mod-wsgi	4.5.24
Django	2.0.2
mysqlclient	1.3.12
PyMySQL	0.8.0

クライアントPC

操作開発用のクライアントPCを用意します。windowsでもmacでも可能ですが、今回はubuntuを利用します。

OS	Ubuntu 16.04.1 LTS　64bit

管理画面（Admin）を利用する

すでにtest_djangoプロジェクトが作成済みとします。今回は、Djangoの管理サイトを利用可能にします。管理サイトがデフォルトで付いてきます。

プロジェクト名	test_django
アプリケーション名	polls

①VPSにログインします。

②前回作った仮想環境を起動します。

cd
. test_django/bin/activate

③管理サイトにログインできるスーパーユーザを作成します。

python manage.py createsuperuser

対話形式でユーザーID・メールアドレス・パスワードを設定します。

④スーパーユーザができたら、実際にログインしてみます。以下のURLでアクセスします。

http://VPSのグローバルIPアドレス/admin

OR

http://VPSに設定した独自ドメイン/admin

以下の画面が出力されれば成功です。※この時点では、管理画面にcssが適用されていません。

staticディレクトリの設定

①プロジェクトディレクトリへ移動します。

cd /var/www/cgi-bin/test_django/

②プロジェクトディレクトリ直下に、staticディレクトリを作成します。

sudo mkdir static
cd static/
sudo mkdir admin css fonts js
cd ../

以下のような構成になります。

③staticディレクトリとそれ以下のディレクトリの所有者を、Webサーバーの管理者に変更します。

sudo chown -R webadmin01:webadmin01 static

④Apache側の設定を以下のようにします。

sudo vi /etc/httpd/conf.d/httpd.conf

Apacheの設定ファイルを「conf」ディレクトリにまとめている場合は以下のように編集します。Apacheで導入する際には、静的ファイルの設定を別途行う必要があります。

sudo vi /etc/httpd/conf/httpd.conf

最下行付近に以下の記述を追加します。

IncludeOptional *.conf

Alias /static/ /var/www/cgi-bin/test_django/static/
<Directory /var/www/cgi-bin/test_django/static/>
  Require all granted
</Directory>

LoadModule wsgi_module /home/username/test_django/lib/python3.6/site-packages/mod_wsgi/server/mod_wsgi-py36.cpython-36m-x86_64-linux-gnu.so
WSGIPythonPath /var/www/cgi-bin/test_django
WSGIScriptAlias /test_django /var/www/cgi-bin/test_django/test_django/wsgi.py

<Directory /var/www/cgi-bin/test_django/test_django1>
<Files wsgi.py>
Require all granted
</Files>
</Directory>

settings.pyの設定、静的ファイルの集約

①Djangoプロジェクト(test_django)のsettings.pyを編集します。

sudo vi pj1/settings.py

django.contrib.staticfilesを追加します。（※最初から設定されています。）

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'polls.apps.PollsConfig',
]

DEBUGの項目をFalseに変更します。

DEBUG = True
↓
DEBUG = False

staticファイルを置く場所を指定します。最後の行に以下を追加します。

STATICFILES_DIRS=(
    os.path.join(BASE_DIR, "static/"),
)

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

これでプロジェクト直下にstaticというディレクトリを作ることでstaticファイルを作ることが出来ました。

②以下のコマンドを実行すると、test_django/static配下に静的ファイルが集約されます。

python manage.py collectstatic

③Apacheを再起動します。

sudo systemctl restart httpd

④実際にログインしてみます。以下のURLでアクセスします。

http://VPSのグローバルIPアドレス/admin

OR

http://VPSに設定した独自ドメイン/admin

以下のように、管理画面にCSS（静的ファイル）が適用されていれば成功です。

次回

次回は、Let’s Encryptを利用して、証明書を発行します。

→Djnago+ApacheサーバにLet’s Encryptで証明書を発行する

関連記事