DjangoアプリをHerokuで公開するまでの環境構築手順

ゴール

現在、MOBAログというブログでは、MOBAのデータをPythonでスクレイピングして加工し、記事に手動で掲載しています。
そして、この手動で掲載するのが手間になっています。

そこで、ランキングをアプリ化し、スクレイピングやランキングの加工などを自動で行えるようにします。

注意点

作りながら書いている部分もあり、冗長になってしまっている部分もあることをご理解ください。

使用技術

Django 5.0
PostgreSQL
Heroku
Bootstrap

どうやら最近HerokuのPostgreSQLアドオンのプランが刷新されて安価で使えそうなので使ってみます。

参考資料

Djangoのドキュメント

postgreSQLの設定やチュートリアルなどで参考にします。

Psycopg

DjangoでpostgreSQL使うときに必要みたいです。

GitHub

HerokuにデプロイされたDjangoのソース。これで設定などを確認できます。

Herokuのドキュメント

Herokuでデプロイするときにチェックします。

ブログ

ありがたいです。

生成AI

あとは随所で詰まったらClaudeやGPT-4を使います。
あとはCursorのエディタを使っているのでそこで直接聞きます。

環境構築手順

1. 仮想環境の構築

適当な場所にdjango-moba-rankingフォルダを作成し、移動します。以下のコマンドで仮想環境を構築します。

python -m venv moba-ranking-env

仮想環境に入るには以下のコマンドを実行します。

source moba-ranking-env/bin/activate

仮想環境から出るには以下のコマンドを実行します。

deactivate

2. 必要なパッケージのインストール

requirements.txtに必要なパッケージを記載します。

requirements.txt

django>=5.0,<5.1
gunicorn>=21.2,<22.0
dj-database-url>=2.0,<3.0
whitenoise[brotli]>=6.0,<7.0
psycopg>=3.1,<3.2
django-heroku==0.3.1
python-dotenv==1.0.1

以下のコマンドでまとめてインストールします。

pip install -r requirements.txt

3. プロジェクトの作成とローカルサーバの立ち上げ

以下のコマンドでプロジェクトを作成します。

django-admin startproject moba_ranking

下記を変えておきます。

settings.py

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

moba_rankingディレクトリに移動し、ローカルサーバを立ち上げます。

python manage.py runserver

ブラウザでhttp://127.0.0.1:8000/にアクセスし、Djangoのデフォルト画面が表示されればOKです。

4. SECRET_KEYの分離

moba_ranking/moba_ranking/settings.py内のSECRET_KEYをGitHubにデプロイする前に別ファイルに移動させます。

プロジェクトのルートディレクトリに.envファイルを作成し、SECRET_KEYを定義します。

SECRET_KEY=your_secret_key_here

2.settings.pyでpython-dotenvパッケージを使用して.envファイルを読み込みます。

settings.py

import os
from dotenv import load_dotenv

load_dotenv()

SECRET_KEY = os.getenv('SECRET_KEY')

3..gitignoreファイルに.envを追加して、Git管理から除外します。

.env

5. アプリケーションの作成

以下のコマンドでアプリケーションを作成します。

python manage.py startapp main

main/views.pyに以下のコードを追加します。

views.py

from django.shortcuts import render
from django.http import HttpResponse

def ranking(request):
    return HttpResponse("Hello, world. You're at the main ranking.")

mainディレクトリにurls.pyを作成し、以下のコードを追加します。

main/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.ranking, name="ranking"),
]

moba_ranking/urls.pyに以下のコードを追加します。

moba_ranking/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("main.urls")),
]

ブラウザでhttp://127.0.0.1:8000/にアクセスし、"Hello, world. You're at the main ranking."と表示されればOKです。

6. Herokuにデプロイ

1.Procfileとruntime.txtを作成します。

web: gunicorn moba_ranking.wsgi

runtime.txt

python-3.12.2

2.settings.pyにSTATIC_ROOTを追加します。

STATIC_ROOT = BASE_DIR / "staticfiles" #追加
STATIC_URL = 'static/'

3.settings.pyのALLOWED_HOSTSを変更します。

IS_HEROKU_APP = "DYNO" in os.environ and not "CI" in os.environ

if not IS_HEROKU_APP:
    DEBUG = True

if IS_HEROKU_APP:
    ALLOWED_HOSTS = ["*"]
else:
    ALLOWED_HOSTS = []

4.Herokuの環境変数にSECRET_KEYを設定します。

heroku config:set SECRET_KEY=your_secret_key_here

5.Herokuにデプロイします。

デプロイ後、Herokuのアプリケーションページにアクセスし、ローカルと同じ画面が表示されればOKです。

まとめ

この記事では、DjangoアプリをHerokuにデプロイするまでを記事にしました。
次回はDBと接続していきます。

続き