DjangoでMOBAのランキングを作る①

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

## ゴール

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

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

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

## 使用技術

- Django 5.0
- PostgreSQL
- Heroku
- Bootstrap

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

## 参考資料

### Djangoのドキュメント

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

https://docs.djangoproject.com/ja/5.0/

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

https://www.psycopg.org/

### GitHub

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

https://github.com/heroku/python-getting-started

### Herokuのドキュメント

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

https://devcenter.heroku.com/articles/getting-started-with-python

### ブログ

ありがたいです。

https://toukei-lab.com/django


### 生成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です。

![127.0.0.1_8000_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/e72d4edb-3625-2404-b280-089da15e7aa6.png)

### 4. SECRET_KEYの分離

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

1. プロジェクトのルートディレクトリに`.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です。

![127.0.0.1_8000_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/2b341eaf-474c-e067-3524-4e551fff81e3.png)

### 6. Herokuにデプロイ

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

```Procfile
web: gunicorn moba_ranking.wsgi
```

```runtime.txt
python-3.12.2
```

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

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

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

```python
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と接続していきます。

## 続き

https://qiita.com/Kazukiya/items/901b78b931d03e81f8af