Djangoを使ったWebサイト作成方法

こんにちは、うしじです。

今回は、Djangoを使ったWebサイトの作成方法についてまとめたいと思います。

最近、AIを使ったWebサービスを何か作りたいな〜と考えており、そこで使えそうなのがDjangoです。
Djangoは、PythonベースでWebサイトを開発するためのフレームワークです。

本記事では、Docker上でDjangoを使った簡単なWebサイトを作成する方法を説明したいと思います。

Dockerのインストール

まずは、開発のためのDockerの環境準備からです。

DockerをローカルPC上で動かすために、Docker Desktopが必要になりますので、DockerのページからDocker Desktopをダウンロードし、インストールしましょう。

また、インストールする際にDocker Hubへの登録が必要となりますので、事前に登録しておきましょう。

Djangoのインストール

次に、Djangoをインストールします。
私は、Pythonのパッケージ管理に、pipenvを用いているので、pipenvでインストールします。使いやすくておすすめです。

今回開発を行うフォルダ"django-demo"を作成・移動し、Djangoをインストール、Pipenvのシェルを起動させます。Djangoは、現時点で最新の3.0.6にしました。

$ mkdir django-demo
$ cd django-demo

$ pipenv install Django==3.0.6

$ pipenv shell 

Djangoプロジェクトの開始

Djangoがインストールできたら、プロジェクトを開始します。

"config"のところは、プロジェクト名をつけるところなのですが、実際には設定を行うためのフォルダ名になるので、"config"と付けています。好みで、プロジェクト名に変更しても大丈夫です。

また、末尾にドットをつけると、フォルダ構成がわかりやすくなるのでおすすめです。（実際にドットありとなしでstartprojectを実行してみるとわかりやすいと思います。）

(django-demo) $ django-admin startproject config .

プロジェクトが開始されたら、下記のコマンドを実行して、http://127.0.0.1:8000/ にアクセスしてみましょう。問題がなければ、下記のような画面が表示されていると思います。

(django-demo) $ python manage.py runserver

DjangoをDocker上で動かす

次は、Dockerの環境を構築し、DjangoをDocker上で動かしてみましょう。 pipenvのシェルを終了し、Dockerfileとdocker-compose.ymlを作成します。

(django-demo) $ exit

$ touch Dockerfile
$ touch docker-compose.yml

Dockerfileには、環境の構成情報を記載します。
利用するベースイメージ（python:3.8）や必要なモジュール（今回は、Pipfile内に記載）等です。 Pythonのバージョン3.7系を使っている場合は、ベースイメージを3.7に変更してください。

# Pull base image
FROM python:3.8

# Set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# Set work directory
WORKDIR /code

# Install dependencies
COPY Pipfile Pipfile.lock /code/
RUN pip install pipenv && pipenv install --system

# Copy project
COPY . /code/

docker-compose.yml には、Dockerfileをもとにビルドされるイメージをどう動かすのかを記載します。
ここで記載しているバージョンは、docker-composeのバージョンです。

version: '3.7'

services: 
    web:
        build: .
        command: python /code/manage.py runserver 0.0.0.0:8000
        volumes: 
            - .:/code
        ports:
            - 8000:8000

Dockerfileとdocker-compose.ymlの更新が終わったら、Dockerのコンテナを起動させましょう。
下記のコマンドで起動することができます。

$ docker-compose up 

http://127.0.0.1:8000/ にアクセスすれば、先ほどと同様のDjangoの画面を確認することができると思います。
また、このままだとターミナルに入力できないと思いますので、Ctrl+C で止めましょう。

Ctrl+Cでプログラムを止めたとしても、コンテナ自体は残ったままとなっています。コンテナを残しておくと、メモリを食うため、下記のコマンドで落としておきましょう。

$ docker-compose down 

Webサイトの作成

環境の準備が整いましたので、ようやくここから、Django上でWebサイトを構築していきたいと思います。

アプリ作成

先ほど、"django-admin startproject"のコマンドで、Djangoのプロジェクトを作成しましたが、Djangoのプロジェクト内には、複数のアプリ（機能のまとまりのようなもの。例えば、ユーザー管理のアプリ、ブログアプリ等）を作成することができます。

今回は、"pages"と言う名前のアプリを作成します。

アプリを作成するために、まずはDockerをDetached modeで起動させましょう。Detached modeの場合、Dockerが裏で動いている状態になるので、ターミナルを操作することが可能です。

$ docker-compose up -d

次に、"pages"アプリを作成します。アプリを作成すると、そのアプリのフォルダと様々なpythonのファイルが作成されると思います。

$ docker-compose exec web python manage.py startapp pages

ここから、各ファイルを更新していきます。
まずは、作成したpagesアプリを認識させる必要があるため、config/settings.pyに下記の記述を追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'pages.apps.PagesConfig' # ここを追加
]

djangoでは、Webページを表示するために、4種類のファイルが必要になっています。

• urls.py：　URLの管理。URLとViewを紐付け
• views.py：　変数等の処理を行い、Templateへ渡す
• models.py：　データベースを利用する際のモデルの定義
• Template：　表示されるhtmlファイル (home.html等)

今回は、データベースを用いないため、models.pyを除いた3種類のファイルを順に更新していきます。

urls.pyの更新

まず、作成したpagesアプリには、urls.pyのファイルが含まれていないので、ファイルを作成します。

$ touch pages/urls.py

"pages/urls.py"は、以下のように記述します。

from django.urls import path
from .views import HomePageView

urlpatterns = [
    path('', HomePageView.as_view(), name='home'),
]

また、"pages/urls.py"を使える状態にするため、"config/urls.py"に以下の記述を追加します。

from django.contrib import admin
from django.urls import path, include # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('pages.urls')), # 追加
]

views.pyの更新

次に、"pages/views.py"の更新です。
今回は、単純に'home.html'を表示させるだけのViewにします。

from django.shortcuts import render
from django.views.generic import TemplateView


class HomePageView(TemplateView):
    template_name = 'home.html'

Templateの更新

Viewでは、'home.html'を表示させるように記載したため、そのファイルを作成しましょう。
htmlファイルを格納するためのtemplatesフォルダを作成し、home.htmlファイルを作成します。

$ mkdir pages/templates
$ touch pages/templates/home.html

htmlファイルの中身を記述します。今回は、以下のようにシンプルなものにしています。

<!DOCTYPE html>
<html>
    <header>
        <a href="{% url 'home' %}">Home</a>
    </header>
    <main>
        <h1>Hello World!!!</h1>
    </main>
</html>

これで、URL、View、Templateの更新が完了しました。
下記のコマンドを実行し、http://127.0.0.1:8000/ にアクセスしてみましょう。
作成した"home.html"が表示させると思います。

$ docker-compose exec web python manage.py runserver

これで、Djangoを用いたWebサイト作成完了です！

Djangoについて、より深く学びたい人向けに、おすすめの書籍を紹介します。

Django for Beginners: Build websites with Python and Django (English Edition)

Django for Professionals: Production websites with Python & Django

現場で使える Django の教科書《基礎編》