UNISIA-SE Tech Blog

気まぐれお勉強日記

[Django] [1] Django Debug Toolbar の導入

1. 前提条件


このページでは、Debug Toolbar の導入について記載する。

▼ 以下の環境下で動作確認しているが、Djangoがインストール済でサーバーとして動作する環境であれば問題ない。
・OS:CentOS7.4
・Webサーバー:Apache2.4.6 + mod_wsgi
・開発言語:Python3.6(venv)、Python2.7(標準搭載)
・FW:Django2.0
・DB:PostgreSQL9.2
・仮想環境フォルダ:/var/www/vops
・プロジェクトフォルダ:/var/www/vops/ops

▼ ※上記の環境構築周りは、下記を参考
[1] VPS契約とCentOSインストール + 初期設定
[2] CentOS7にApacheインストール + アクセス周りの設定
[3] Let's EncryptのSSL/TLS導入と定期更新
[4] Python、Djangoインストール + Django起動確認
[5] Apache + Django + PostgreSQLで本番環境を構築 (インストール編)
[6] Apache + Django + PostgreSQLで本番環境を構築 (設定編)

2. django-debug-toolbar のインストール


django-debug-toolbar は、開発時に必要になってくる セッション情報リクエスト / レスポンス情報、そして 実行したSQL などリアルタイムで様々な情報を確認するプラグイン。

インストールは、仮想上に pipコマンドで django-debug-toolbar をインストールだけ。

$ source /var/www/vops/bin/activate
(vops) $ pip install django-debug-toolbar
Collecting django-debug-toolbar
   Downloading https://files.pythonhosted.org/packages/97/c6/523fc2ca98119d21c709bbc47217b1d5fd17c6f9449ef32490889363d97d/django_debug_toolbar-1.10.1-py2.py3-none-any.whl (207kB)
     100% |################################| 215kB 10.0MB/s
 Collecting sqlparse>=0.2.0 (from django-debug-toolbar)
   Downloading https://files.pythonhosted.org/packages/65/85/20bdd72f4537cf2c4d5d005368d502b2f464ede22982e724a82c86268eda/sqlparse-0.2.4-py2.py3-none-any.whl
 Requirement already satisfied: Django>=1.11 in /var/www/vops/lib/python3.6/site-packages (from django-debug-toolbar) (2.0.2)
 Requirement already satisfied: pytz in /var/www/vops/lib/python3.6/site-packages (from Django>=1.11->django-debug-toolbar) (2018.3)
 Installing collected packages: sqlparse, django-debug-toolbar
 Successfully installed django-debug-toolbar-1.10.1 sqlparse-0.2.4
 You are using pip version 10.0.1, however version 18.1 is available.
 You should consider upgrading via the 'pip install --upgrade pip' command.

上記でインストールは完了。
以降、設定と表示の確認について解説する。

3. settings.py の設定


設定ファイル(settings.py)の最低限必要な設定を変更する。

▼ DEBUGモードの変更
DEBUGTrue に変更する。

$ vim /var/www/vops/ops/ops/settings.py
 … (省略)…
 DEBUG = True    # DEBUGモードをTrueに変更
 … (省略)…

▼ INSTALLED_APPSへ追加
INSTALLED_APPS'debug_toolbar' を追記する。
'debug_toolbar' 'django.contrib.staticfiles' よりも 後ろ になるよう注意。

$ vim /var/www/vops/ops/ops/settings.py
 … (省略)…
 INSTALLED_APPS = [
     'macuos',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'debug_toolbar'    # ← 追記:'django.contrib.staticfiles' よりも後ろに設定
 ]
 … (省略)…

▼ MIDDLEWAREへ追加
MIDDLEWARE'debug_toolbar.middleware.DebugToolbarMiddleware' を追記する。
'debug_toolbar''django.contrib.staticfiles' よりも 後ろに設定されるよう注意。

$ vim /var/www/vops/ops/ops/settings.py
 … (省略)…
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'debug_toolbar.middleware.DebugToolbarMiddleware'   # ← 追記
 ]
 … (省略)…

▼ INTERNAL_IPSの追加
INTERNAL_IPS を追記する。

$ vim /var/www/vops/ops/ops/settings.py
 … (省略)…
INTERNAL_IPS = ['127.0.0.1']   # 追加  ※下記【注意】を参照
 … (省略)…

【注意】
INTERNAL_IPSは、このIPアドレスで接続されたときのみ、django-debug-toolbar が表示される設定項目であるため、ローカル開発時は、localhost の '127.0.0.1' を設定する。

ローカルではない別サーバーでDjangoを動かしている場合は、開発マシンの グローバルIPアドレス を入力すること。

また、複数のIPアドレスから確認したい場合は、下記のようにカンマで繋げて複数指定する。

INTERNAL_IPS = ['IPアドレス1', 'IPアドレス2', 'IPアドレス3'...]

※ グローバルIPアドレスの確認方法は、各環境のOSに依存しますのでマシン上でのコマンド確認か、下記サービスで確認すること。

4. urls.py の 設定


最後にurls.pyの urlpatternsDebug Toolbar を追加する。

$ vim /var/www/vops/ops/ops/urls.py
 … (省略)…
if settings.DEBUG:    # この if 文 (5STEP) を追加する。
    import debug_toolbar
    urlpatterns = [
        url(r'^__debug__/', include(debug_toolbar.urls))
    ] + urlpatterns
 … (省略)…

以上で設定は完了。

5. Debug Toolbar の表示確認


管理者画面や作成したWebアプリの画面に接続すると右側に Debug Toolbar が表示される。


【注意】
staticファイルのロード先を別フォルダに設定している場合は、CSSが効いてない状態で表示されている可能性がある。
その場合は、下記 pip show コマンドでインストール先を特定し、その直下にある「debug_toolbar/static/debug_toolbar」フォルダをstaticファイルのロード先フォルダ直下にコピーすること。

$ pip show django-debug-toolbar
 … (省略)…
Location: /var/www/vops/lib/python3.6/site-packages    # django-debug-toolbar のインストール先を確認
 … (省略)…
$ cp -r /var/www/vops/lib/python3.6/site-packages/debug_toolbar/static/debug_toolbar [staticファイルのロード先フォルダ]

以上。

次ページ:[Django] [2] Django Debug Toolbar のデバッグ情報

Copyright UNISIA-SE All Rights Reserved.
s-hama@unisia-se.jp