実現したいこと＋連携ソフト
実現したいこと：
Windwos10 環境にDjango + apache + mod_wsgiで動作するWEBシステム環境を構築したい。
この記事のゴール：
インストールした各種ソフトの設定を行い、WEB画面上でDBから取得した値が参照できる。
今回紹介する内容：
・Apacheを動作させるために必要な設定ファイルの設定方法
・フォルダの構成設定
・動作確認
本記事は前回の続きとなっているので、ご覧になっていない方はご覧ください。
前回の記事については下にリンクを載せておきます。
記事↓↓
Djangoアプリの製作／ソフトの設定
設定ファイルの設定方法から必要なデータの作成、動作確認まで行っていきます。
かなりのボリュームになりますが、是非最後まで読んで、最高のソフトを製作してくださいね！
httpd-vhosts.confの設定
まず最初にapacheの設定を行っていきます。
apacheをインストールしたフォルダを開き、httpd-vhosts.confを編集します。
vhohstsの機能を使用する目的として、一台のマシンに複数のWebサーバを立てる（もしくは立てる可能性がある場合）に使用します。
httpd-vhosts.conf の説明書は下記のapache公式ドキュメントを参照ください。
（公式の力は偉大ですね。。。）
下記にhttpd-vhosts.confの設定例を示します。↓↓
コピペ用↓↓
<VirtualHost *:80>
ServerName bakery_shop_sv
ServerAdmin webmaster@dummy-host2.example.com
# DocumentRoot "${SRVROOT}/docs/dummy-host2.example.com"
# ErrorLog ${APACHE_LOG_DIR}/error.log
# CustomLog ${APACHE_LOG_DIR}/access.log combined
Alias /static/ C:/DjangoApp/deploy/app/static/
WSGIScriptAlias / C:/DjangoApp/app/config/wsgi.py
<Directory C:/DjangoApp/app/config/>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
<Directory C:/DjangoApp/deploy/app/static/>
Require all granted
</Directory>
</VirtualHost>※数字を割り振りましたので、簡単に紹介していきます。
①サーバのIPアドレスと、ポート番号を指定するところ。
上記の例ではどんなIPアドレスでもOKでポートは80番の設定になっています。
②静的ファイルの集約ファイルパス。
collectstatic (Djangoの機能)で集約を行います。
③mod_wsgiを動作させるファイルを設定します。
詳細は下記記事より↓↓
④mod_wsgiを動作させるファイルのアクセス権限を設定します。
ここではパスにあるC:/DjangoApp/app/config/wsgi.pyの
アクセスを全て許可するように設定しています。
⑤集約ファイルパスのアクセス権限を設定します。
ここではC:/DjangoApp/deploy/app/static/のアクセスを全て許可するように設定しています。
以上でhttpd-vhosts.confの設定は完了です。
httpd.confの設定
次にhttpd.confの設定を行います。
デフォルトではhttpd-vhosts.confが無効になっているので、コメントアウトを外し、有効化してあげる必要があります。
以上でhttpd.confの設定は完了です。
プロジェクトフォルダ／アプリケーションフォルダの作成
Apacheの設定ファイルの編集が完了したら、プロジェクトフォルダ、アプリケーションフォルダの作成を行っていきます。
Djangoのプロジェクトフォルダを作成していない方は下記記事を参考に作成してください。↓↓
プロジェクトフォルダが存在する場合は、プロジェクトフォルダの名前を変更します。
下記の例では、赤枠で囲んだプロジェクトフォルダ名をconfigに変更します。
（※プロジェクトフォルダの名前を最初からconfig等のな名称にしておくほうが便利です
今回は、前回記事の続きということなので、このような手順を踏んでいます。）
configにリネームしたフォルダの中にあるsettings.pyを編集します。
下記画像の赤枠で囲んだ部分が編集を加えた場所です。
configにリネームしたフォルダの中にあるwsgi.pyも編集します。
下記画像の赤枠で囲んだ部分が編集を加えた場所です。
次にアプリケーションフォルダを作成していきます。
プロジェクトフォルダ（※manage.py がある場所です）に移動し、下記コマンドを実行します。
（※プロジェクトフォルダの中にアプリケーションフォルダが複数存在する構成になります）
>>py manage.py startapp [アプリケーションフォルダ名]
成功時に何も表示されないので、心配な方はdirコマンドや、エクスプローラで確認してください。
models.pyの修正
作成したアプリケーションフォルダの中にmodels.pyがあるのでこれを編集します。
models.pyについてよくわからない方は下記の記事を参照ください。↓↓
models.pyにはテーブルを定義することができ、マイグレーションによって作成できます。
下記にmodels.pyの設定例を示します。↓↓
コピペ用↓↓
from django.db import models
# Create your models here.
class TBread(models.Model):
i_id = models.IntegerField(primary_key=True)
v_name = models.CharField(max_length=100, blank=False, null=False)
i_price = models.IntegerField()
class Meta:
managed = True
db_table = 't_pan'これでmodels.pyの作成は完了です。
models.pyの設定が完了したら、下記コマンドを実行してマイグレーションを行ってください↓↓
>>py mange.py makemigrations
>>py manage.py migrate
models.py、マイグレーションにについてよくわからない方は下記の記事を参照してください。↓↓
アプリケーションの有効化
作成したアプリケーションフォルダの有効化をする必要があるので、settings.pyを編集します。
下記編集箇所↓↓
コピペ用↓
'show_bread_list.apps.ShowBreadListConfig',
上記で設定した文は、インストール対象のアプリケーションフォルダにあるapps.pyの中身に記述されているものです。
設定が完了したら、次へ進みます。
表示用データをDBへ追加
コマンドプロンプトからpostgresqlを起動し、マイグレーションにより作成したDBにデータを追加します。
最初にpsqlが使えるパスに移動して、下記コマンドを実行します。
>>psql -U [データベースのログインユーザ] -d [作成したデータベース名]
上記のコマンドを実行するとパスワードが聞かれるので、入力し、ログインしてください。
次に作成したテーブルにデータを追加していきます。
今回は動作確認なので、３件分だけ追加します。
INSERT INTO t_pan (i_id, v_name, i_price) VALUES
(1, 'Hot dog', 500),
(2, 'Melon bread', 200),
(3, 'Anpan', 300);
エラーが出力されず、”INSERT 件数”と表示されば成功です。
以上でデータの追加は完了です。
表示用htmlを作成する
次は表示用のhtmlを作成してきます。
その前にsettings.pyを編集します。
下記編集箇所１↓↓
コピペ用↓↓
import os
下記編集箇所２↓↓
コピペ用↓↓
'DIRS': [os.path.join(BASE_DIR, 'templates')],settings.pyの編集が完了したら、次へ進みます。
次に、プロジェクトフォルダにtemplatesという名称のフォルダを作成します。
templatesフォルダの配下は下記のような構成にします。↓↓
templates（作成したフォルダ）
│ base.html（htmlファイルサンプル後述）
│
└─show_bread_list（アプリケーションフォルダ名を同じ名前のフォルダを作成）
index.html（htmlファイル、サンプルを後述）
base.html、index.htmlのサンプルについて下記に示します。↓↓
base.html
<!doctype html>
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ page_title }}</title>
{% block css_link %}{% endblock %}
</head>
<body>
<div class="container-fluid">
<header>
<div class="header row justify-content-start">
<div class="col-10"><h4>{{header_title}}</h4></div>
</header>
<main>
{% block content %}{% endblock %}
</main>
</div>
{# --- js ---#}
{% block script_read %}{% endblock %}
</body>
</html>
index.html
{% extends "base.html" %}
{% load static %}
{% block css_link %}
<link rel="stylesheet" href="{% static 'show_bread_list/css/index.css' %}">
{% endblock %}
{% block content %}
<table border="1px">
<tr>
<td>
番号
</td>
<td>
名前
</td>
<td>
価格
</td>
</tr>
{% for bread_row in tbl_bread_rows %}
<tr>
<td>
{{ bread_row.i_id }}
</td>
<td>
{{ bread_row.v_name }}
</td>
<td>
{{ bread_row.i_price }}
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
{% block script_read %}
<script src="{% static 'show_bread_list/js/index.js' %}"></script>
{% endblock %}
base.htmlを雛形として、index.htmlに継承を行っています。
今後複数アプリケーションが追加されたときに共通項目をbase.htmlに記述できるので、保守性が向上します。とても便利でおすすめです。
詳しく知りたい方は下記の記事を参照ください↓↓
views.pyの編集
次にviews.pyを編集していきます。
場所は、作成したアプリケーションフォルダの中にあります。
views.pyサンプル↓↓
from django.shortcuts import render
from show_bread_list.models import TBread
# Create your views here.
def index(request):
tbl_bread_rows = TBread.objects.all()
page_title = "パン屋さん"
header_title = "商品一覧"
params = {
'page_title' : page_title,
'header_title' : header_title,
'tbl_bread_rows' : tbl_bread_rows,
}
return render(request, 'show_bread_list/index.html', params)views.pyについての詳細を知りたい方は下記の記事を参照してください。↓↓
urls.pyの編集
プロジェクトフォルダと、アプリケーションフォルダに入っているurls.pyを編集／作成します。
アプリケーションフォルダのurls.pyサンプル↓↓
（※アプリケーションフォルダにはurls.pyがないので、新規で作成してください）
from django.urls import path
from . import views
app_name = 'show_bread_list'
urlpatterns = [
path('', views.index, name='index'),
]
プロジェクトフォルダのurl.py編集箇所↓↓
コピペ用↓↓
path('show_bread_list/', include('show_bread_list.urls')),
urls.pyはDjangoでURLを定義するために使用されます。
上記の設定では、アプリケーションフォルダ内のurls.pyをプロジェクトフォルダのurls.pyが
詳細について下記の記事を参照してください。↓↓
動作確認
URL欄にhttp://localhost/show_bread_list/と打ち込んで下記のような画面が表示されれば正常に動作しています。
jsやcssの設定が完了していないので、殺風景な画面ですが、適用すれば綺麗な画面になります。
コメント