LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Yuya_baseball

【初心者】DjangoをHerokuへデプロイする工程

Last updated at Posted at 2025-01-27

はじめに

どうも、かけ出す前エンジニアのYuyaです。

今回はGitHubにpushしたECサイトの商品一覧、詳細画面機能を
Herokuを使ってデプロイする工程を解説します。

以下のチュートリアルを参考にしながらやりました。

あくまで自分のアウトプット用です。
順番が違っていたり雑な点があるかと思いますがご了承ください。

前提条件

今後記載することは以下の環境下でのみ行っています。ご了承ください。

  • macOS Sonoma バージョン14.6
  • Python 3.13.1
  • Gitをインストール済み　→　brew install git
  • 仮想環境を作成済み　→　python3 -m venv venv
  • feature/productsというブランチをmainブランチから切って作業
  • pull request のブランチをデプロイして動作確認ができる状態にすることがゴール

ディレクトリ構成

django_ec/
├── Dockerfile
├── docker-compose.yml
├── manage.py
├── venv                   # 仮想環境を構築（pipを多用します）
├── .env
├── config/                # Djangoプロジェクトのディレクトリ
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── products/                    # Djangoアプリケーションのディレクトリ
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations/
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py
└── requirements.txt
  • 今回よく編集するファイルはconfig/settings.pyです
  • Herokuに何か操作する場合はherokuコマンドが入る

Herokuのアカウントを作成

こちらでHerokuのアカウントを作成しましょう。
クレジットカード情報の登録が必須になります。

基礎設定

Herokuをインストール

自分のPCにHerokuをインストールしていきます。

brew tap heroku/brew && brew install heroku

Herokuへログイン

以下のコマンドを実行しましょう。

heroku login

アカウント作成が正常に完了していれば以下の出力結果が返ってきます。キーボードのどこでもいいのでどこかタイプしましょう（Enterとかeとか何でもいい）

heroku: Press any key to open up the browser to login or q to exit:

どこかタイプすると勝手にブラウザが立ち上がり以下の画像になるので、Log inをクリックしましょう
スクリーンショット 2025-01-21 23.27.14.png

以下の画像になればLog in成功です！

スクリーンショット 2025-01-21 23.28.44.png

Procfileを定義

次にプロジェクトファイルと同階層にProcfileを作成しましょう

django_ec/
├── ...
├── manage.py
├── Procfile       # 新規作成(.pyとかいらない）
├── .env
├── config/  
    ├── ...

Procfileを使用することで
アプリを起動するために実行するコマンドを明示的に宣言します。

Procfile
web: gunicorn config.wsgi --log-file -
release: ./manage.py migrate --no-input
  • webプロセスはHerokuでアプリケーションサーバーを起動し
    リクエストを処理するために必要
  • releaseプロセスはデプロイ後のセットアップ
    （ここではデータベースのマイグレーション）を自動化し
    アプリケーションを正常に稼働させるために必要です

アプリをデプロイする

アプリを作成

Herokuがソースコードを受け取れるようにアプリを作成します。

heroku create
Creating app... done, ⬢ serene-caverns-82714
https://serene-caverns-82714.herokuapp.com/ | https://git.heroku.com/serene-caverns-82714.git

アプリを作成すると、Git リモートherokuも作成されてローカル Git リポジトリに関連付けられます。

Git リモートは、他のサーバー上にあるリポジトリのバージョンです。アプリをデプロイするには、アプリに関連付けられた Heroku でホストされている特別なリモートにコードをプッシュします。

アプリ名を決めてやる方法もありますが、ここでは割愛します

変更をcommitしてデプロイ

修正したコードを以下のコマンドでコードをデプロイしましょう。

pushは2回行います。git pushの後に続く文字に注意してください。

  • GitHubリポジトリ
  • Herokuデプロイ専用リポジトリ
git add .
git commit -m "Herokuへデプロイ"

# リモートブランチの特定のブランチへpush
git push origin feature/products

# Herokuのリポジトリへ変更をpush
git push heroku feature/products:main

この手順を踏むことで、ローカルの変更がGitHubの管理リポジトリに反映されるだけでなく、Herokuにもデプロイされてアプリケーションが最新の状態に更新されます。

デプロイが成功したか確認

本当にデプロイ成功したか確認しましょう

heroku ps
=== web (Basic): gunicorn config.wsgi --log-file - (1)

# 以下の出力結果は一例です
web.1: up 2025/01/21 22:12:43 +0900 (~ 2h ago)

webというのはProcfileで定義した「プロセス」です。
ちなみにreleaseを確認するには以下の2つのどちらかのコマンドを試しましょう

heroku logs --dyno release --tail
# command + C で処理から抜ける

heroku run python manage.py showmigrations
Running python manage.py showmigrations on ⬢ boiling-everglades-98681... up, run.9170
admin
 [X] 0001_initial
 [X] 0002_logentry_remove_auto_add
 [X] 0003_logentry_add_action_flag_choices

URLでアプリにアクセス

以下のコマンドもしくは、heroku createした際に実行結果として返ってきた~~hreokuapp.comのURLからアクセス可能です。

heroku open

ただ、以下の画像のようにエラーが出力されているかと思います。
python manage.py runserverで出力されて結果はまだ反映されていません。

Herokuエラー1.png

デプロイ自体は成功しています。
以下のURLよりHerokuのページに行くとアプリが作成されています。
heroku openでブラウザに開かれた
https://以降の部分がアプリ名となっています。
https://dashboard.heroku.com/

ログを表示

先ほどの画像にもある通り、以下のコマンドでheroku openした際のログを出力できます。

heroku logs --tail

command + C で停止できます。

何が足りないのか

これから何が足りないのか説明します。

  • 本番環境の動作への適応
  • 静的ファイルの配信
  • URLやアップロードファイルの管理

この3点を満たすことで本番環境のURLからローカルと同じ動作をすることが可能です。

settings.pyへ追記

以下のコードをsetttings.pyに追記

  • 記載順序はご自身に任せます
  • ...　←これはコードの続きです
settings.py
import os
...
...
# 本番環境適応時はDEBUGをFalseにする
DEBUG = False
# ホストにHerokuを追加
ALLOWED_HOSTS = ['xxyyzz.com']
...
...
MIDDLEWARE = [
    # SecurityMiddlewareの後、django.contribの前に記載
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',    # ここに追加
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ...
]
...
...
# 以下4行は#CSSファイルの設定
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfile')
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
# whitenoiseを設定
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
...
...
# URLの末尾にスラッシュを自動的に追加する
APPEND_SLASH = True
# メディアファイルのURL設定
MEDIA_URL = '/media/'
# メディアファイルの保存先ディレクトリ
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# Cloudinaryを使ってメディアファイルを保存する設定
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

# Cloudinaryの認証情報を環境変数から取得する
CLOUDINARY_STORAGE = {
    'CLOUD_NAME': env('CLOUDINARY_NAME'),
    'API_KEY': env('CLOUDINARY_API_KEY'),
    'API_SECRET': env('CLOUDINARY_API_SECRET'),
}

必要なものをインストール

必要なモジュールをpipでインスールしましょう

後ほどエラーが出たらその都度インストールしましょう

Cloudinaryをインストール（外部ストレージ上で画像を管理）

pip install cloudinary==1.42.1

django-herokuをインストール

pip install django-heroku==0.3.1

pillowをインストール（アプリ内で画像を取り扱う）

pip install pillow==11.1.0

whitenoiseをインストール（静的ファイルの取り扱い）

pip install whitenoise==6.8.2

requirements.txtを確認

Procfileと同階層にrequirements.txtファイルを作成しましょう

# requirement.txtを作成と必要なモジュールを記載
$ pip freeze > requirements.txt

そうすると以下のような記述が
requirement.txtに記載されます。

  • いらないモジュールも含まれているかもしれませんので参考程度にご覧ください
  • コメントは外してください
requirements.txt
certifi==2024.12.14            # SSL証明書を確認するためのライブラリ
charset-normalizer==3.4.1      # テキストのエンコーディングを正規化
cloudinary==1.42.1            # Cloudinaryと連携するためのライブラリ
Django==4.2.5                 # Djangoのメインフレームワーク
django-environ==0.11.2        # 環境変数を管理するライブラリ
django-heroku==0.3.1          # Heroku向けのDjango設定を自動化
gunicorn==23.0.0              # WSGI HTTPサーバー（本番用）
pillow==11.1.0                # 画像処理用のライブラリ
psycopg==3.1.12               # PostgreSQL用の最新データベース接続ライブラリ
psycopg2==2.9.10              # PostgreSQL用の旧データベース接続ライブラリ
sqlparse==0.3.0               # SQL文を解析・整形するためのライブラリ
whitenoise==6.8.2             # 静的ファイルを効率的に提供するミドルウェア

環境変数をherokuへ接続

今回設定するのは以下の3種類で5つの環境変数を設定します。

  • シークレットキー
  • データベースURL
  • Cloudinary環境変数

Cloudinaryのことに関しては以下のサイトで理解できるかと思います。

本来はlocalで確認したほうがいいですが、割愛します

以下のコマンドで環境変数を設定できます。

heroku config:set SECRET_KEY='settings.pyのSECRET_KEY'
heroku config:set DATABASE_URL='データベースURL'
heroku config:set CLOUDINARY_API_KEY='Cloud name'
heroku config:set CLOUDINARY_API_SECRET='API Key'
heroku config:set CLOUDINARY_NAME='API Secret'

push完了後に以下の画像の部分で確認できます
アプリ選択 → settings → Config Vars

スクリーンショット 2025-01-28 1.50.55.png

エラー後に再度変更をcommitしてデプロイ

git add .
git commit -m "Herokuへデプロイ"

# リモートブランチの特定のブランチへpush
git push origin feature/products

# Herokuのリポジトリへ変更をpush
git push heroku feature/products:main

エラーが出力されていないか再度アクセス

heroku open

これでアクセスされたら成功です。

またエラーになったら...

もしかするとまたエラーになっているかもしれませんが、
その際は以下の2点に注目して愚直にエラーと向き合いましょう

  • git push heroku のコマンドの後にエラーがないか
  • heroku logs --tail でログを表示

管理者でログイン

デプロイしてアプリが出力できたら/adminにアクセスして
管理者でログインできるようにしておきましょう。

$ heroku run python manage.py createsuperuser

いかがでしたか？
かなり長かったと思いますが、これでネット上に公開できます。

私は2日かけてできずにスーパーエンジニアの方と
ペアプロしながらできました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?