ホーム >  VPS >  ConoHaVPSに設置したDjangoの管理画面にCSSを適用


Posted:2018/03/07 9:00:15 AM|Category : VPS

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

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が適用されていません。

開発環境と本番環境の違い

開発環境で「python manage.py runserver」をした場合、「/static/」直下の静的ファイルを勝手に読み込んでくれます。しかし、本番環境のApacheなどでは自動で行ってくれません。Webサーバ側に静的ファイルの管理を任せるように設定します。つまり、プロジェクトに静的ファイルを置きません。

staticディレクトリの設定

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

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

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

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

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

  • /var/www/..省略../test_django/
  • db.sqlite3
  • manage.py
  • static/
  • admin/
  • css/
  • fonts/
  • js/
  • test_django/
  • polls/

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

sudo chown -R webadmin01:webadmin01 static

ディレクトリの所有者を変更しないと、この後の「python manage.py collectstatic」コマンドした際、権限エラーが発生します。

④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で証明書を発行する


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告