自分だけのクイズ作成 - Quipha公開中

【Django】Herokuへデプロイしアプリを公開

Django
スポンサーリンク

はじめに

Herokuを使って、Djangoプロジェクトを公開する手順をまとめました。
無料枠が結構ありますので、個人で開発したアプリケーションを手軽に公開することができます。

今回は無料の範囲で設定を行ってみました。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

使用するバージョン
  • Windows 11 / 10 or macOS Monterey (M1)
  • Python 3.10.2
  • Django 4.0.2
  • Heroku
  • PostgreSQL

クライアントの作業は、WindowsでもMacでも同様にできます。

スポンサーリンク

Herokuとは

PHP+MySQLのような組み合わせであれば、レンタルサーバーで十分に足りるでしょう。

ただ、Node.jsやPython+Djangoのような環境を公開サーバーに用意したい場合は、レンタルサーバーでは対応できません。

VPSなどで構築することもできますが、Apacheなど色々とインストールを行い、日々運用(セキュリティアップデートなど)を行うのは大変です。

HerokuはPaaS(Platform as a Service)であり、ダッシュボードで環境を選択することにより、手軽に構築を行うことができます。
また、プランにもよりますがスケーリングも可能で、様々なアプリをデプロイし公開することができます。

Dyno formation のスケーリング | Heroku Dev Center
Heroku の各アプリには一連の実行中の dyno とその Dyno formation があり、コマンドラインまたはダッシュボードからすぐにスケールアップまたはスケールダウンできます。

無料枠もそれなりに使えますので、個人で開発したアプリをとりあえず公開してみたい!という場合に使うのも良いでしょう。

Laravelで作成したアプリもHerokuで公開できます。
詳しくは以下の記事をご覧ください。

アプリを開発しスピード感を持って公開できるのがメリットの一つでしょう。

Herokuのプラットフォームで使用されるコンテナは、軽量Linuxコンテナ「dyno(ダイノ)」です。

今回は無料枠で構築し公開を行います。
新規登録など、詳しくは以下の記事を参考にしてください。

Heroku CLIのインストール

WindowsとMacのそれぞれで、インストール方法を解説します。

Windows

Windowsで作業を行う場合ですが、今回はWSL2のUbuntuを使用しました。
導入は簡単にできますので、以下の記事を参考にしてください。

HerokuのCLIツールとして、Windowsのインストーラもあります。
インストール後、コマンドプロンプトやPowerShellで「heroku」コマンドが使用できるようになりますが、別途Gitのインストールも必要になります。

以下のページにアクセスします。

The Heroku CLI | Heroku Dev Center
How to download, install, and start using, the Heroku CLI. The Heroku CLI used to be part of the Heroku Toolbelt.

それぞれのOSごとにインストール方法が記載されています。
今回はWSL2のUbuntuにインストールしますが、以下のコマンドでした。

上記のページにあるUbuntuで「snap」コマンドを使用したインストールはうまくいきませんでした。

以降はWSL2のUbuntuからコマンドを実行していきます。

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

$ curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

インストールが完了しました。バージョンを確認しましょう。

$ heroku --version

heroku/7.59.2 linux-x64 node-v12.21.0

ついでにGitのバージョンも確認しましょう。
Ubuntuには最初からインストールされていました。

$ git --version

git version 2.25.1

Git は、ほとんどの Linux 用 Windows サブシステムのディストリビューションと一緒に既にインストールされていますが、最新バージョンに更新したほうがよい場合があります。 また、git 構成ファイルを設定する必要もあります。

https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-git

最新のGitのバージョンは、現時点で2.34.1でした。
UbuntuにインストールされていたGitのバージョンがやや古いですが、必要に応じてアップデートすると良いでしょう。

これでHeroku CLIを使う準備ができました。

Mac

Macで作業を行うために、Heroku CLIをインストールします。

以下のページにアクセスします。

The Heroku CLI | Heroku Dev Center
How to download, install, and start using, the Heroku CLI. The Heroku CLI used to be part of the Heroku Toolbelt.

それぞれのOSごとにインストール方法が記載されています。

Homebrewをインストールしていない場合は、以下の記事を参考にしてください。

ターミナルを起動し、以下のコマンドを実行します。

% brew tap heroku/brew && brew install heroku

インストールが完了しました。バージョンを確認しましょう。

% heroku --version

heroku/7.60.1 darwin-x64 node-v14.19.0

Gitのインストールも行いましょう。
インストールされているかどうか、以下のコマンドを実行します。

% git --version

Gitがインストールされていない場合は、以下のダイアログが表示されますのでインストールを選択します。

“git”コマンドを実行するには、コマンドライン・デベロッパツールが必要です。ツールを今すぐインストールしますか?
コマンドライン・デベロッパツールを今すぐダウンロードしてインストールするには、”インストール”を選択してください。

規約を確認します。

完了しました。

インストール完了後、以下のコマンドでGitのバージョンが確認できます。

% git --version

git version 2.30.1 (Apple Git-130)

Git用のメールアドレスと名前を設定しておきましょう。

% git config --global user.email "you@example.com"
% git config --global user.name "Your Name"

Heroku CLIを使う準備ができました。

スポンサーリンク

Djangoプロジェクトの用意

今回は以下の記事で作成した、カレンダーアプリを公開してみます。

ソースコードはGitHubへ公開していますので、参考にしてください。

GitHub - chigusa-web/djangoCalendarApp: Djangoでカレンダー(スケジュール管理)アプリケーション(FullCalendar)
Djangoでカレンダー(スケジュール管理)アプリケーション(FullCalendar). Contribute to chigusa-web/djangoCalendarApp development by creating an account on GitHub.

Herokuへデプロイ準備

実行環境ファイルの作成

Pythonの環境でコマンドを実行します。
今回はVS Codeのリモート開発で、Dockerコンテナ上を開発環境としている前提です。
詳しくは以下の記事をご覧ください。

Djangoプロジェクトを、VS Codeのコンテナ上で開きます。

「Open Folder in Container…」を選択し、プロジェクトを選択します。

VS Codeのターミナルを開きます。

コンテナ上でコマンドの実行ができますので、以降のコマンドはここから実行します。

Dockerコンテナを使用していない場合は、各自のPythonの実行環境上でコマンドを実行してください。

Pythonのパッケージを、実行環境に追加します。

$ pip install django-heroku
$ pip install gunicorn
$ pip install whitenoise
  • django-heroku: HerokuのConfigをDjangoの設定で読み込むためのパッケージ
  • gunicorn: Pythonサーバーのパッケージ
  • whitenoise: staticを扱うためのパッケージ

Python環境にインストールされている、パッケージの一覧を出力します。

$ pip freeze > requirements.txt

プロジェクト直下に、requirements.txtというファイルが作成されます。

各自の環境にもよりますが、実行環境のパッケージとバージョンが出力されます。

requirements.txt
asgiref==3.5.0
autopep8==1.6.0
certifi==2021.10.8
charset-normalizer==2.0.12
dj-database-url==0.5.0
Django==4.0.3
django-heroku==0.3.1
gunicorn==20.1.0
idna==3.3
mysqlclient==2.1.0
psycopg2==2.9.3
pycodestyle==2.8.0
requests==2.27.1
sqlparse==0.4.2
toml==0.10.2
urllib3==1.26.8
whitenoise==6.0.0

後ほど使いますので、Pythonのバージョンを確認します。

$ python --version

Python 3.10.2

Herokuの本番環境用に、Djangoの秘密鍵を再生成します。

$ python manage.py shell

対話モードで以下のコードを実行します。

>>> from django.core.management.utils import get_random_secret_key
>>> get_random_secret_key()
'xxx-xxxx'

この文字列は後ほど使用しますので、メモしておいてください。

Procfileファイルを作成

これ以降は、Windowsの場合はWSL2(Ubuntu)を使用し、Macの場合はターミナルを使用します。
Djangoプロジェクト直下でコマンドを実行します。

Procfileファイルを作成し、Djangoのサーバの設定を行います。

$ echo "web: gunicorn djangoCalendarApp.wsgi --log-file -" > Procfile

‘-‘を指定すると、標準エラー出力にログを出力します。

runtime.txtファイルを作成

先ほど確認したPythonのバージョンを指定し、runtime.txtを作成します。

$ echo python-3.10.2 > runtime.txt

私の場合は、3.10.2でしたが、Herokuのサポート対象でした。

Heroku Python Support | Heroku Dev Center
Reference documentation describing the support for Python using Heroku's Python buildpack.

Heroku用の設定ファイルの用意

Djangoの設定ファイルについては、以下の記事のように、機密情報は別ファイルで管理していました。
別ファイルにした設定ファイルは、Gitの管理対象外としていました。

機密情報はHerokuのConfigに設定することになりますが、その対応などを行います。

ローカルPCで開発サーバーを実行した時は、開発環境の設定ファイルを読み込み、Herokuでは本番環境の設定を読み込むように改修します。

ローカルPCだけで読み込む設定ファイルを開き、以下の定数を追加します。
(このファイルが読み込まれたときはDebugを有効にする)

djangoCalendarApp/settings_local.py
DEBUG = True

Djangoの設定ファイルを修正します。
以下のローカルの設定ファイルの読み込み行を削除します。

djangoCalendarApp/settings.py
from .settings_local import *

同じファイルの最後の行に、以下を追加します。

djangoCalendarApp/settings.py
DEBUG = False

try:
    # 存在する場合、ローカルの設定読み込み
    from .settings_local import *
except ImportError:
    pass

if not DEBUG:
    # Heroku settings

    # staticの設定
    import os
    import django_heroku

    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

    # Static files (CSS, JavaScript, Images)
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    STATIC_URL = '/static/'

    # Extra places for collectstatic to find static files.
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static'),
    )

    MIDDLEWARE += [
        'whitenoise.middleware.WhiteNoiseMiddleware',
    ]

    # HerokuのConfigを読み込み
    django_heroku.settings(locals())

Debugが無効な場合に、Herkou用の本番環境設定ファイルを読み込むようにしています。
また、今回は静的ファイルも使用しますので、その設定を行っています。

静的ファイルを集めるためのフォルダを用意します。
先ほどの設定ファイルに記載した、「staticfiles」フォルダを作成します。
また、空フォルダの中には、.gitkeepファイルを作成しておきます。

staticfiles/.gitkeep

設定ファイルについては、私のGitHubリポジトリを参考にしてください。

djangoCalendarApp/settings.py at main · chigusa-web/djangoCalendarApp
Djangoでカレンダー(スケジュール管理)アプリケーション(FullCalendar). Contribute to chigusa-web/djangoCalendarApp development by creating an account on GitHub.

ここまでの変更について、Gitのリポジトリを作成しコミットを行います。

$ git init
$ git add .
$ git commit -m "heroku settings."
スポンサーリンク

Herokuへデプロイ

ログイン

Herokuへログインします。
q以外のキーを押すとブラウザが開きます。

$ heroku login

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

ブラウザでログインページが開き、ログインを行うことができます。

「Log in」ボタンクリックでCLIの方でログインが完了します。

Logging in... done
Logged in as xxx@xxxx

アプリケーション作成

Herokuアプリケーションを作成します。

$ heroku create

Creating app... done, ⬢ xxx-xxx-xxxx
 https://xxx-xxx-xxxx.herokuapp.com/ | https://git.heroku.com/xxx-xxx-xxxx.git

「xxx-xxx-xxxx」の部分は、アプリケーション名でありランダムな名前が自動的に選択されました。

この時点でWebのダッシュボードを確認すると、作成されたアプリケーションが確認できます。

HerokuのConfigにSECRET_KEYを追加します。
値については、事前に取得した文字列を指定します。

$ heroku config:set SECRET_KEY='xxx-xxx'

プッシュを行いデプロイします。

$ git push heroku master

Herokuへデプロイすると、PostgreSQLのデータベースも自動で作成され、設定も追加されています。

以下のエラーが出る場合があります。

remote: -----> $ python manage.py collectstatic --noinput
..
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/xxx.git'

静的ファイルを集めるのに失敗してデプロイできない場合です。
一度以下のコマンドで無効にしてプッシュしましょう。

$ heroku config:set DISABLE_COLLECTSTATIC=1

プッシュができた場合は、以下の設定を無効にし、再度プッシュするとうまく行きました。

$ heroku config:set DISABLE_COLLECTSTATIC=0

各アプリの静的ファイルについては、以下のフォルダに集められているのが確認できます。

$ heroku run ls staticfiles

Running ls staticfiles on ⬢ xxx... up, run.5097 (Free)
admin  scheduleCalendar  staticfiles.json

HerokuのWeb画面からもConfig値が確認できます。

テーブルを作成します。

$ heroku run python manage.py migrate

アプリを起動します。

$ heroku open

動作確認

ブラウザでアプリが開かれますが、トップのURLには何も設定していないため、以下のURLにアクセスします。

https://xxxx.herokuapp.com/sc/

カレンダーの画面が表示されました。

静的ファイルのapp.jsファイルを読み込んでいるため、イベントの登録も正しく行え、DBに登録されていることも確認できます。

管理画面の確認

ついでに管理画面も確認します。
管理者ユーザを作成します。ユーザ情報は任意で設定してください。

$ heroku run python manage.py createsuperuser

以下のURLにアクセスします。

https://xxxx.herokuapp.com/admin/

ログイン画面が表示されました。
先ほど作成したユーザでログインします。

管理画面にログインすることができました。

PostgreSQLのデータを確認

PostgreSQLのデータを確認する方法は、以下の記事で解説しました。

さいごに

Herokuを使って、Djangoプロジェクトを公開する手順をまとめました。
アドオンで環境を追加するのも楽ですし、何よりも無料でここまでできるのは凄いですね!

個人開発でとりあえず公開して使ってもらいたい、と言う場合に手軽に公開できます。
是非活用してみましょう。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました