無料のWeb開発環境（PaizaCloudやGitHub Codespaces）でDjangoアプリを開発する簡単な手順になります。
この記事ではDjangoのプログラムの内容の詳しい解説はありません。
Djangoアプリをサーバーでデプロイ（公開）するために必要な知識と手順を簡単かつ詳細に解説していきます。
簡単なサンプルプログラムを用意してありますので、それを動かします。
私は学習を始めて日が浅い頃にこの記事を書き始めましたが、初心者目線の解説になっているのでわかりやすいと思います。（その後、経験を積んだので加筆・修正しています。）
初心者が開発環境を構築し、本番環境へデプロイできるようになることを目的にしています。（※Herokuに関しては2022/11月末から有料化したため、現在はRenderやVPS等の代替サービスをおすすめしています。）
また静的ファイルについて重点的に書いていますので
そこではまっている人にも参考になると思います。
完成品お名前.comVPSにデプロイ
完成品Renderデプロイ（表示するまで数分かかることがあります。毎月20日～月末は停止します。）
2回に分けてます。続きはこちら。
Herokuは無料プランがなくなってしまったので今はこちら（Renderなど）にデプロイしています。
Djangoの簡単なアプリ（Hello World！）作成からデプロイまでRenderで実践できます。
パソコンに開発環境（VS CodeやDocker等）を構築して開発することもできますが、最初にPaizaCloudやGitHub CodespacesなどのWeb環境でやってよかったのは、「開発環境構築の失敗」と「プログラムのバグ」の切り分けが容易な点です。開発の要領がわかるようになるので、自分のパソコンで開発環境構築するのも容易になります。何が必要で、なぜ必要なのかが理解できるようになります。
ローカル環境でやりたい場合は、こちら↓を参考にしてください。
2024年からは有料のVPSにもデプロイしています。
2024/4お名前.comのレンタルサーバーからVPSへ移行したときの記録になります。
Djangoを動かす環境比較
ローカル環境、PaizaCloud、GitHub Codespaces、Heroku/Renderを比較すると以下のようになります。
| ローカル環境（Dockerなど） | PaizaCloud | GitHub Codespaces | Heroku / Render等 | |
|---|---|---|---|---|
| 開発環境構築 | 多少難しい | 簡単 | 非常に簡単 | 公開のみ（開発環境なし） |
| サービスの一般公開 | できない | 有料 | 一時プレビュー可能 | 有料 / Renderは無料枠あり |
| コードの保存 | できる | 無料だと1日 | 自動（GitHub連携） | – |
| パソコンスペック | ある程度必要 | 関係ない | 関係ない | 関係ない |
| 無料枠の特徴 | 制限なし | 24時間でサーバー停止 | 月120コア時間無料 | Herokuは有料 Renderは制限あり |
無料、簡単、低スペックパソコンでもOKの観点から、まずはPaizaCloudやGitHub Codespacesなどのクラウド開発環境で開発し、Git/GitHubを経由して公開する方法をおすすめします。
PaizaCloudの無料版は放置するとすぐ止まる欠点がありますが、GitHub
かなり使いづらいです。止まった時はこちらを参考にしてください。（土日、止まりっぱしの時がたまにあります。）
Codespacesならブラウザ上で本格的なVS Codeが立ち上がり、快適に開発できます。
使用するもの
無料登録：PaizaCloudまたはGitHubアカウント、Render等（公開用）
無料ダウンロード：Git（ローカル連携時）
大まかな流れです。
- PaizaCloud または GitHub Codespaces で開発・動作確認
- コードをGitHubに保存
- 公開用サーバー（Renderなど）へデプロイして公開
開発環境の構築（選択）
PaizaCloud、またはGitHub Codespacesのいずれか好きな方を選んで環境を構築します。こちら↓をご覧ください。
無料登録と数クリックだけで完了します。
プロジェクト、アプリ作成、settings.py変更
ここからのコマンドや操作は、PaizaCloudでもGitHub Codespacesでも基本的に共通です。
コードをはりつけるときは「プレーンテキストで貼り付け」にしないとうまく動きません。
プロジェクト作成
ターミナル（PaizaCloudのターミナル、またはCodespacesのターミナル）で以下を入力します。
# Codespacesの場合、Djangoのインストールが必要です。PaizaCloudの場合、不要
pip install django# hajimete_pjという名前でプロジェクトの作成
# 最後の半角スペース+.ピリオドは忘れないようにしてください。それがないとフォルダが1個余分に作られデプロイするときに困ります。
django-admin startproject hajimete_pj .
# 上記ピリオドを付けなかったときは、hajimete_pjディレクトリへ移動
cd hajimete_pjPaizaCloudの場合の表示（上記ピリオドを付けなかったためにこうなってます。）
アプリ作成
# hajimete_appという名前でアプリ作成
python manage.py startapp hajimete_appsettings.py変更
エディタで `hajimete_pj/settings.py` を開きます。（上記ピリオドつけなかったとき `hajimete_pj/hajimete_pj/settings.py` ）
以下のように2か所変更します。
・ホストを許可する
・アプリを追加# ALLOWED_HOSTSの変更（開発環境やクラウド環境からのアクセスを許可）
ALLOWED_HOSTS = ['*']
# （settings.pyのDEBUG = Trueのときは[]でもエラーにならない場合がありますが、Falseにすると[]のままだとエラーになります。）
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'hajimete_app.apps.HajimeteAppConfig',
]補足説明1
'hajimete_app'だけでも動きますが、Djangoの公式チュートリアルでhajimete_app/apps.pyにあるclass HajimeteAppConfig(AppConfig):のクラス名を追加する形式となっていたため、上記のように記述しています。
今後ファイルを変更したら各Window左上の保存をクリック。（Ctrl+Sでも保存できます。）
PaizaCloudの場合、
車両通行止めと同じマークが出ている場合は保存完了してます。
ディレクトリを追加したのに表示されていない場合は▼をクリックして1回閉じ▶をクリックすると出てきます。
今のディレクトリの状態はこうなってるはずです。上記ピリオドを付けなかったので、このようにhajimete_app/hajimete_appという表示になっています。
INSTALLED_APPS に追加するものは「アプリ」です。
アプリとは python manage.py startapp で作成されたディレクトリ全体を指します。
自分で作った自作Pythonファイル（例: jisaku.py）を追加したい場合、ここに書く必要はありません。
そういったファイルはアプリディレクトリ（hajimete_app）の下に配置し、views.py などから from . import jisaku という形で呼び出して使います。
関数の呼び出し方は、こちらの記事が参考になります。
Pythonで”TypeError: ‘module’ object is not callable”エラー
サンプルコード
プロジェクト（hajimete_pj）の urls.py を変更します。
hajimete_pj/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include("hajimete_app.urls")),
]アプリ(hajimete_app)のurls.pyは最初ないので
hajimete_app内に新規ファイルurls.pyを作成します。
中身を以下にします。hajimete_app/urls.py:
from django.urls import path
from . import views
app_name = "hajimete_app"
urlpatterns = [
path('', views.HajimeteView.as_view(), name="index"),
]views.pyを変更します。hajimete_app/views.py:
from django.shortcuts import render
from django.views import View
class HajimeteView(View):
def get(self, request, *args, **kwargs):
return render(request, "hajimete_app/index.html")HTMLテンプレートを作成します。
hajimete_appの下にtemplatesディレクトリを作成templatesの下にhajimete_appディレクトリを作成templates/hajimete_appの下にindex.htmlファイルを作成
中身を以下にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのDjango</title>
</head>
<body>
<h2>初めてのDjango</h2>
</body>
</html>動作確認
ターミナルで以下を実行します。
python manage.py runserver- PaizaCloudの場合: 右側の「8000」ボタンをクリックすると画面が表示されます。
- GitHub Codespacesの場合: 画面右下に「ポート 8000 で動作するアプリケーション…」というポップアップが出るので「ブラウザで開く」をクリックします（または「ポート」タブから8000番の地球アイコンをクリック）。
- ローカル環境の場合:
http://127.0.0.1:8000/にアクセスします。
「初めてのDjango」と表示されれば成功です！
確認できたらターミナルでCTRL+Cで停止してください。
静的ファイルとは
次にDjangoを使う上で重要となる「静的ファイル」について体験します。
静的ファイルとはCSS、画像、JavaScriptファイルのことです。
静的ファイルは static というディレクトリの下に入れなければいけません。
なぜかというと、Djangoが動いているメインサーバーから静的ファイルを直接配信すると、負担が大きくなって全体の処理スピードが落ちてしまうためです。そのため、本番環境では静的ファイルだけを集めて別のWebサーバーや配信サービスから送る仕組みになっています。
そのため、アプリを作るときは static ディレクトリの下に静的ファイルを配置するルールになっています。
それでは静的ファイル（画像、CSS、JavaScript）を追加したサンプルコードを作ります。
css、img、js
hajimete_app ディレクトリの下に static ディレクトリを作成します。
static ディレクトリの中に以下のファイルを作成します：
main.cssmain.js
以下の画像をダウンロードし、test.webp という名前で static ディレクトリ内に保存（またはアップロード）してください。
PaizaCloud、Codespacesの場合は、staticディレクトリを右クリックして「アップロード」クリック→用意したtest.webpをアップロード
index.html、main.css、main.jsを以下のように書き換えてください。
index.htmlを貼り付けるとき「プレーンテキストで貼り付け」にしないと動かしたときに何も表示されなくなります。
index.html：
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのDjango</title>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body>
<div id="test">ボタンを押すと</div>
<button id="btn">OK</button>
<script src="{% static 'main.js' %}"></script>
<br>
<img src="{% static 'test.webp' %}" id="test-img">
</body>
</html>main.css
#test{
color: red;
background-color: yellow;
}main.js
'use strict';
const test = document.getElementById('test');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
test.textContent = 'JavaScriptが動いて書き換えた';
});再度動作確認
ターミナルで Ctrl + C を押して一度開発サーバーを停止し、再度実行します。
python manage.py runserverブラウザでアクセスして、デザイン（CSS）が適用され、ボタンを押すとJavaScriptが動作し、画像が表示されることを確認してください。
補足3
今回は実験しやすいようにstaticディレクトリ直下にファイルを置きましたが、実際の開発ではstatic/hajimete_app/css/main.cssのようにアプリ名のサブフォルダを作るのが一般的です。その場合の指定は"{% static 'hajimete_app/css/main.css' %}"となります。
補足4
「HTMLは静的ファイルではないのか？」と思われるかもしれませんが、DjangoのHTMLには{% static %}などのDjango独自のタグ（動的処理）が含まれています。そのため、HTMLはstaticではなくtemplatesディレクトリで管理されます。
静的ファイルを本番環境で扱う設定
本番環境で動かすには、settings.py の変更やライブラリの導入が必要です。
手順を順に説明していきます。
目次へ
STATIC_URL
index.html の冒頭にある {% load static %} は静的ファイルを使用するための宣言です。画像やCSSのパスは {% static 'test.webp' %} のように記述しました。
ブラウザで画像アドレスを確認すると、https://.../static/test.webp のようになっています。settings.py にある STATIC_URL = '/static/' が、このURLパスの配信先設定です。
開発モード（DEBUG = True）のときは、Djangoが各アプリの static フォルダから自動的にファイルを探して返してくれます。
しかし、本番モード（DEBUG = False）に切り替えると、この自動探索機能がオフになります。
# 手順0: 本番モードのテスト（settings.py）
DEBUG = FalseDEBUG = False にして画面をスーパーリロード（Shift + F5）すると、静的ファイルのリンクが切れてCSSや画像が表示されなくなります。
Whitenoiseの導入
静的ファイルは本番環境では専用サーバーから配信するのが理想ですが、WhiteNoise というライブラリを使うと、Django単体でも効率よく静的ファイルを配信できるようになります。
WhiteNoiseには主に以下の2つの役割があります：
- 圧縮・キャッシュ対応（Storage）: 静的ファイルを事前にGzipやBrotliで圧縮し、ハッシュ付きファイル名を生成する。
- 配信機能（Middleware）:
DEBUG=Falseでもブラウザのリクエストに応じて最適な静的ファイルを送る。
設定手順
# 手順1: WhiteNoiseのインストール
pip install whitenoise# 手順2: settings.py の編集
# ① MIDDLEWAREにWhiteNoiseを追加（SecurityMiddlewareの直下が推奨）
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', # 追加
'django.contrib.sessions.middleware.SessionMiddleware',
...
]
# ② STATIC_ROOTの設定と保存形式の設定（ファイル末尾に追加）
import os
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# Django 4.2以降の現代的な書き方（STORAGES）
STORAGES = {
"default": {
"BACKEND": "django.core.files.storage.FileSystemStorage",
},
"staticfiles": {
"BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
},
}
# ※旧バージョン（Django 4.1以前）の場合は以下のように指定していました：
# STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATIC_ROOTとcollectstatic
STATIC_ROOT は、分散している静的ファイルを1か所に集めるための出力先フォルダ（staticfiles）を指定する設定です。
# 手順3: 静的ファイルを1か所に集めるコマンドを実行
python manage.py collectstaticコマンドを実行すると、プロジェクトルートに staticfiles ディレクトリが生成され、CSSや画像、さらにその圧縮版（.gz, .br）やハッシュ付きファイルが自動生成されます。
これで DEBUG = False の状態でも、WhiteNoise経由で静的ファイルが正しく配信されるようになります！
補足6
XFREEというサーバーから静的ファイル配信実験しようと思いましたが
画像が表示されませんでした。
右クリックして画像のリンクを確かめるとXFREEからになっています。
これは混合コンテンツが原因でhttps://のページにhttp://（XFREEはSSL対応なしのため）のコンテンツがあると
表示できないようにプラウザがしています。
まとめと次のステップ
今回はPaizaCloudやGitHub Codespacesを使って、Webブラウザ上でDjangoの開発環境を構築し、静的ファイル（CSS/JS/画像）の扱い方やWhiteNoiseの設定までを実践しました。
次は作成したアプリを実際のWebサーバー（Render等）にデプロイして一般公開してみましょう。
続きはこちらの記事
MENTAやってます（ichige）
イチゲをOFUSEで応援する(御質問でもOKです）
目次へ
コメント