Django

【Python×Django×Docker×VScode】WEBアプリ作成フロー

 
Contents
  1. 1.コンテナ立ち上げ用ファイルを編集
  2. 2.webアプリ作成

1.コンテナ立ち上げ用ファイルを編集

前提

今回はVScodeのRemote-Containersの機能とDockerを使用して作業していくため、
VScodeでコンテナを作成するためのファイルを設定する。

必要なもの

  • VScode
    (拡張機能のRemote-Containersもインストール済のもの)
  • Docker
  • Docker-compose
    (だいたいはDockerに元々含まれている)

上記3つをインストールして使えるようになっていることが前提

立ち上げ前のフォルダ構成

gmo_ohlcv #自分で作成したフォルダ
　└─.devcontainer
　　　│ devcontainer.json
　　　│ docker-compose.yml
　　　│ Dockerfile
　　　│ requirements.txt

立ち上げファイルを適宜編集する

コードの詳しい説明は割愛

{
	"name": "Gmo_ohlcv",
	"dockerComposeFile": [
		"docker-compose.yml"
	],
	"service": "ohlcv",
	"workspaceFolder": "/app",
	// リモート先のVS Codeにインストールする拡張機能
	"extensions": [
		"ms-python.python", //Pythonセット
		"aaron-bond.better-comments", //コメントに色をつけられる
		"kevinrose.vsc-python-indent", //Pythonの改行を自動で最適な場所へ
		"ms-ceintl.vscode-language-pack-ja", //日本語化
		"coenraads.bracket-pair-colorizer-2", //かっこ同士の色分け
		"oderwat.indent-rainbow" //段落の色分け
	]
}
version: '3.8'
services:
  ohlcv:
    build:
      context: .
      dockerfile: Dockerfile
    image: g_ohlcv:g_ohlcv # イメージ名&タグ名
    container_name: g_ohlcv # コンテナ名
    stdin_open: true
    tty: true
    privileged: true
    environment:
      TZ: Asia/Tokyo
    volumes:
      - ../:/app:cached
FROM python:3.9

ENV PYTHONUNBUFFERED 1
WORKDIR /app

RUN apt-get update\
    && apt-get install sqlite3 libsqlite3-dev -y\
    && apt-get install ntpdate

RUN pip install --upgrade pip
COPY . /app
RUN pip install --no-cache-dir -r requirements.txt
django
django-widget-tweaks
django-allauth

Remote-Containersでコンテナ作成

拡張機能のRemote-Containersをインストール済のVScodeで、
左下の緑の部分をクリックする。
画面の上方に選択項目が現れるため、「Open Folder in Contaiber…」を選択。

自分で作成していたフォルダ(今回はgmo_ohlcv)を選択して開く。

コンテナが立ちあがるまで待機。

このような画面になっていればOK

2.webアプリ作成

プロジェクト用フォルダを作成

「config」：任意のフォルダ名
「.」：「config」と「manage.py」を作成するディレクトリの指定

django-admin startproject config .
フォルダ構成
gmo_ohlcv
├─manage.py #新規で作られた
│
├─.devcontainer
│      | devcontainer.json
│      | docker-compose.yml
│      | Dockerfile
│      | requirements.txt
│
└─config #新規で作られた
        | asgi.py
        | settings.py
        | urls.py
        | wsgi.py
        | __init__.py

サーバーの起動確認

python3 manage.py runserver

ブラウザで「http://127.0.0.1:8000/」に接続。

この画面が出てくればdjangoの起動が成功している。

サーバーを停止させるには「Ctrl+c」

アプリ用ディレクトリを作成

「manage.py」が配置されたディレクトリで下記コードを実行

python3 manage.py startapp ohlcv

「ohlcv」は任意のフォルダ名

フォルダ構成
gmo_ohlcv
├─db.sqlite3　#多分サーバー開いたときに勝手に作られた
├─manage.py
│
├─.devcontainer
│      | devcontainer.json
│      | docker-compose.yml
│      | Dockerfile
│      | requirements.txt
│
├─config
│      | asgi.py
│      | settings.py
│      | urls.py
│      | wsgi.py
│      | __init__.py
│  
└─ohlcv
    │   | admin.py
    │   | apps.py
    │   | models.py
    │   | tests.py
    │   | views.py
    │   | __init__.py
    │
    └─migrations
           |  __init__.py

「ohlcv」内に「url.py」を作成

コマンド入力で作成する場合

cd：指定のフォルダに移動
touch：ファイル作成

cd ohlcv
touch urls.py
GUIで作成する場合
フォルダ構成
ohlcv
│  | admin.py
│  | apps.py
│  | models.py
│  | tests.py
│  | urls.py
│  | views.py
│  | __init__.py
│
└─migrations
      |  __init__.py

setting.py にアプリ名を追記

「config」内の「setting.py」を開く
「INSTALLED_APPS」と書かれている項目を探す

INSTALLED_APPS = [
    'ohlcv.apps.OhlcvConfig', #追加
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

記載する文字は
「’アプリ名.apps.アプリ名Config’」
※２つ目の「アプリ名」の最初は大文字

INSTALLED_APPSの記載順は以下のようにすると良い◎
 1.自分で作成したアプリ ⇒ 'ohlcv.apps.OhlcvConfig'
 2.追加で入れたアプリ ⇒ 'accounts' など
 3.元々入っているアプリ ⇒ 'django.contrib.staticfiles' など
※上から順にアプリケーションが優先されるため。

ページを作成

①views.py

最初にviewsを設定する。

viewsにはどのページを表示するかを記載している。

下記例だと
ファイル名が「home.html」のHTMLファイルを表示する
ということを表している。

from django.shortcuts import render

# Create your views here.
from django.views.generic import TemplateView

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

②Templatesの作成

views.pyで表示するためのHTMLのtemplateを設定する。

1.Templatesディレクトリを作成

今回はプロジェクトの中に作成する。
ターミナルで下記コマンドを打ち、
「manage.py」と同じ階層にディレクトリを作成する。

mkdir Templates

今回はプロジェクト内に一括管理のTemplatesディレクトリを作成したため
config内のsetting.pyの下記の値を変更する。

  • 「import os」を追加
  • TEMPLATESの値を「’DIRS’: [os.path.join(BASE_DIR, ‘templates’)]」に変更
    ↓↓詳しくは下記記事で解説↓↓
【Django】Templatesの置き場所 DjangoでTemplatesの置き場所のメモ書き。 Templatesを設置する場所は大きく分けて2つある。 アプリ内...
2.HTMLファイルを作成

Templates内にhtmlファイルを作成する。
まず最初に「親テンプレート」を作成

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>GMO_OhlcvMaker</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

親テンプレートを作成することで、他のページのコーディング量を大きく削減できる。
↓↓詳しくは下記記事で解説↓↓

【Django】時短術！親テンプレートを作ってコーディング量をぐっと減らそう！ DjangoではテンプレートとなるHTMLファイルを多数記載し作成していく。一つ一つのページはだいたい ヘッダーボディフッター ...

親テンプレートが作れたら子テンプレートを作る。
今回はview.pyの設定の時に「home.html」というファイル名に決めたので、
ファイル名をhome.htmlにする。

{% extends "base.html" %}
{% block content %}
<h1>Hello!</h1>
{% endblock %}
③アプリ(ohlcv)内のurls.pyの設定

url.pyはブラウザから送信されるHTTPリクエストに対して、どのviewsを実行してページを表示させるかが記載されている。

from django.urls import path
from . import views

app_name = 'ohlcv'
urlpatterns = [
    path('home/', views.HomeView.as_view(), name='home'),
]

path()の記載方法は下記の通り

# 関数ベースのビューの場合
path(URL, views.関数名, name=URL名称)

# クラスベースのビューの場合
path(URL, views.クラス名.as_view(), name=URL名称)

今回はviews.pyの中でHomeViewというクラス名で作成したのでクラスベースのビューの書き方をしている。

「name=URL名称」を設定する理由

templateのaタグのhref属性で指定して使用できる。

<a href="{% url 'nameの部分' %}">

また、URLが変わってもnameが同じであれば自動的に変更されたURLが取得されるため、HTMLを編集しないで済む。

# 変更前
path('home/', views.HomeView.as_view(), name='home')

# 変更後
path('index/', views.HomeView.as_view(), name='home')

"""
どちらのURLでも
<a href="{% url 'home' %}">
でURLが取得される
"""
④プロジェクト(config)のurls.pyも編集

プロジェクトのurls.pyにはどのアプリのurls.pyを参照するかを記載する。

③のアプリ内のurls.pyのように1つのhtml毎に設定してもいいが、
プロジェクト内に複数アプリを作成する場合に管理が煩雑になってしまう。

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

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

include()の記載方法は下記の通り

path(URL, include('アプリケーションフォルダ名.urls'))

include関数でどのアプリケーションディレクトリのurlsというファイルを参照するかが指定できる。

プロジェクトとアプリのurls.pyの役割の違い

・プロジェクトのurl.py：アプリを読み込むため
・アプリのurl.pu：views.pyのdef(関数)かclass(クラス)と繋げるため

homeが表示されるか確認

python3 manage.py runserver

ブラウザで「http://127.0.0.1:8000/home/」に接続。

下記のような画面になればOK！

当たり前だが、接続に使用するURL(「http://127.0.0.1:8000/home/」など)の記載は一言一句間違っていてはいけない。
例えばスラッシュ(/)の有無一つ違うだけでページが表示されなくなる。

このURLは下記の通りアプリのurls.pyで指定していたものである。

urlpatterns = [
path(‘home/‘, views.HomeView.as_view(), name=’home’),
]

一連の作業が終われば、あとは同じように「2.webアプリ制作」の流れに沿って
アプリや表示するHTMLなど必要なものを増やしていけば良い。
見た目の装飾などはまた別の記事で紹介予定。

Django Docker VScode
RELATED POST