Pythonで作っているwebアプリでそろそろフロント周りも動くことになりそうだったので
Djyangoを使って見える環境を整えてみました
作業環境
MacBookAir (M1)
Python ver:3.10.8
Django ver:4.1.7
前提
Pythonはもちろん入っている、Djangoも入っているのが前提。
確認方法はこちら
// Pythonのバージョン確認
python --version
Python 3.10.8
// Djangoのバージョン確認
python
>>> import django
>>> django.get_version()
'4.1.7'
>>> exit()
Djangoが入っていなかったらpip install djangoでインストール
Djangoの制作環境を作る
開発元のディレクトリを用意します。
django-admin startproject ここに作りたいPJのディレクトリ名
今回はhogeと言う名前で作るのでdjango-admin startproject hogeで実行。
ディレクトリと諸々のファイルが生成されるはず。
cd hogeで作成したディレクトリの中に移動します。
cd hoge
python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
March 22, 2023 - 08:03:56
Django version 4.1.7, using settings 'hoge.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
python manage.py runserverを実行すると
ズララッと↑のようなのが出てきてhttp://127.0.0.1:8000/にアクセスするとローカル環境が確認できます。
実行中に"GET /favicon.ico HTTP/1.1" 404 2110などがターミナルに出てくるけれどファビコンを格納すれば消える。
設定まわり
settings.py
1.言語設定を日本に変更
- LANGUAGE_CODE = 'en-us'
+ LANGUAGE_CODE = 'ja'
- TIME_ZONE = 'UTC'
+ TIME_ZONE = 'Asia/Tokyo'
2.templateを使う場合はこっちも設定
■やること
- templateとなるhtmlを格納するディレクトリ
hoge/template/を追加。 - cssやjsなどのAssetsを格納するディレクトリ
hoge/static/を追加。 - pythonに以下を記載
from pathlib import Path
+ import os
~~ 省略 ~~
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
+ os.path.join(BASE_DIR, 'frontend/dist'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
+ STATICFILES_DIRS = [
+ os.path.join(BASE_DIR, "frontend/static"),
+ ]
DIRSにベースとなるテンプレートのパスを記載。（htmlの表示設定）
STATICFILES_DIRSにはテンプレートとは別に外部で読み込むcss/js/imagesなどを格納しているディレクトリを記載。
BASE_DIRはDjangoを実行する際のmanage.pyがある場所（一番上の階層）なので変更はしない方が無難。
新しいページを表示する
templateを追加したので新しいページを表示させます。
index.htmlを準備
hoge/frontend/dist/index.htmlを作成。
現段階はh1だけ表示できれば良いのでcssなどは特に設置しません。
headやbodyなど記載したものだけを準備。
env.pyを準備
次にtemplateを表示させるための設定を書いたpythonファイルを用意します。
hoge/hoge/env.pyを作成。
今回はとりあえずenvと言う名前にしました。
from django.shortcuts import render
def top(request):
return render(request, 'index.html')
templateを呼び出すため、render関数を使います。
render関数はdjango.shortcutsを用いないと使えないので注意。
templateディレクトリに格納しているindex.htmlを設置します。
urls.pyでパスを新規ページに向ける
from django.contrib import admin
from django.urls import path
+ from . import env
urlpatterns = [
path('admin/', admin.site.urls),
+ path('top/', env.top, name='top'),
]
元々記載のあるadmin/がデフォルトで表示されているページです。
先ほど作ったenv.pyを読み込ませ
env.pyで呼び出したhtmlファイルの変数を追記します。
path('top/', env.top, name='top'),
左から
-
表示したいURLのディレクトリを記載。
今回はhttp://127.0.0.1:8000/top/にアクセスするとindex.htmlの内容を表示させています。 -
env.pyのtop（index.htmlを呼び出すために定義した変数）
-
nameは....特に気にせずわかりやすいものを
保存をしたら再度python manage.py runserver実行後に、指定したパスのURLにアクセスすると新規ファイルが読み込まれているかと思います。
cssやjs、画像を読み込ませる
この調子でcssやjsを追加していきます。
<!DOCTYPE html>
<html lang="jp">
<head>
<title>Hondana</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<h1>Top</h1>
<div class="img">
<img src="/static/images/test.png" alt="test">
</div>
<script src="/static/js/app.js"></script>
</body>
</html>
html側にstyleやscriptタグで追加〜〜しても読み込みはされません...
Django環境で外部ファイルを読み込むためには以下のように設定しないといけない。
<!DOCTYPE html>
+ {% load static %}
<html lang="jp">
<head>
<title>Hondana</title>
- <link rel="stylesheet" href="/static/css/style.css">
+ <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Top</h1>
<div class="img">
<img src="/static/images/test.png" alt="test">
</div>
- <script src="/static/js/app.js"></script>
+ <script src="{% static 'js/app.js' %}"></script>
</body>
</html>
{% load static %}をhtmlタグの上に追加します。
ここに追加しておけば、cssもjsも画像も外部から読み込めます。
cssやjsのディレクトリを{% static 'ファイルパス' %}で追加します。
ここでのstaticはsetting.pyで設定したディレクトリになります。
パスも設定したディレクトリからになるので注意。
python manage.py runserverを実行したままであれば
設定したcssやjs、画像などが表示されます。
これでDjangoで作るアプリのフロント表示はOKだ!
Django初めてなので調べながらでしたが、あまり時間かからずに作れました。
ちょっとの開発ならnode.jsでモチャモチャ作るより素早く作成→ブラウザで確認できるんじゃないかなって思いました🙄