アプリケーションをHerokuで公開

はじめに

今回は今まで作成してきた本棚アプリケーションをHerokuで公開します。
過去記事
urhayataro.hatenablog.com

前提

  • githbのアカウントがあり、使える状態
  • gitをインストールしていて使える状態

Herokuアカウントを作成して、少し本棚アプリケーションのソースコードを編集して公開するまでを行います。


Herokuアカウントの作成

Herokuのアカウントの作成には、Herokuのウェブサイトにアクセスします。(https://jp.heroku.com/)
それから以下の手順で作成を進めます。

  1. 右上の新規登録のボタンを押す
  2. 氏名やメールアドレス等の情報を入力する
  3. 登録したメールアドレスに送られてきたメールで認証をする
  4. アカウントのパスワードを設定する
  5. 作成したアカウントでHerokuにログインして利用規約に同意する
  6. Welcome to Herokuという画面が表示されると完了

アプリケーションの作成

Herokuにログインしてアプリケーションの作成を行います。ここでアプリケーションを作成することで、Djangoで作成した本棚アプリケーションをHerokuのサーバーにアップロードすることができます。

アプリケーションの作成は、Herokuにログインし、以下の画面のCreate new appをクリックします。

それから適当なアプリケーションの名前を付けます。これは他の名前と重複してはいけないみたいですので、許可される適当な名前にしましょう。
また、regionは日本は選択できません。アメリカのままにしておきます。

アプリケーションの作成ができると以下の画面が表示されます。

この画面を下にスクロールしていくとHerokuにデプロイする手順が載っています。これに則って進めていきます。

まずはHeroku CLIのインストールを行います。上の写真の黄色いところを押して、使用しているosによってインストールを行いましょう。
vscode上でWSLを使って進める場合はここは無視して、ターミナルに以下を入力しましょう。

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

インストールができれば次のようになります。

次に、インストールができているかを確認します。以下の入力をします。

heroku login

出力が以下のようになっていればHeroku CLIのインストールが正常に完了しており、適当なキーを押すとHeorkuのサイトに移行します。ここでアカウントのログインをしましょう。

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

デプロイのための本棚アプリケーションの編集

次からはデプロイするための操作をしていきます。作成した本棚アプリケーションにある、settings.pyにはSECRET_KEYがあります。これは第三者に知られてはいけないものなので隠す必要があります。

ただ、デプロイするにはSECRET_KEYも外部からのアクセスを受け付けるサーバーに認識させる必要があります。この問題の解決をしていきます。

まずはHerokuでアプリケーションを選択します。そしてsettingsを押します。
以下の画面のReval Config Varsをクリックし、Addボタンを押します。

そこでKEYにはSECRET_KEYと入力し、VALUEにはsettings.pyにあるSECRET_KEYを入力します。
これでHerokuにSECRET_KEYを認識させることができました。


できれば次は、SECRET_KEYを環境変数として設定したい値をファイルに保存し、ファイルを呼び出して環境変数として扱うことができるようにします。これには以下のコードにより、dotenvをインストールします。

pip install python-dotenv

インストールができれば.envファイルを作成します。

touch .env

この作成した.envファイルにSECRET_KEYを記述します。

SECRET_KEY = プロジェクトのシークレットキー

また、settings.pyも合わせて以下のように変更します。

import os # 追加
from dotenv import load_dotenv # 追加
load_dotenv() # 追加

SECRET_KEY = os.getenv('SECRET_KEY') # 変更

これでSECRET_KEYを.envファイルに隠して、呼び出して使うことができます。

最後に、せっかく隠すために用意した.envファイルをサーバーにアップロードしては意味が無くなります。そのため、.gitignoreというファイルを作成し、編集します。
.gitignoreというファイルはgitの管理から特定のファイルを除外し、外部のリポジトリにアップロードしないようにするファイルです。
まずは以下のコードより、ファイルを作成します。

touch .gitignore

作成したファイルを以下のようにしておきます。

# Pythonのキャッシュが自動生成されているので除外
__pycache__/

# 環境変数は除外
.env

# 環境変数は除外
/myvemv/

# mediaディレクトリに.gitleepというファイルを作成し、それ以外は除外
/media/*
!/media/.gitkeep

# staticディレクトリに.gitleepというファイルを作成し、それ以外は除外
/static/*
!/static/.gitkeep

# DBは除外
db.sqlite3

staticファイルの設定

これまではbookアプリケーションの中にstyle.cssなどのstaticファイルを格納していました。ただ、デプロイする場合staticファイルはsettings.pyに定義したディレクトリに格納されている必要があります。

はじめに、staticファイルをまとめて移動して保存する場所を指定します。staticファイルをまとめるには、STATIC_ROOTという変数を、settings.pyで以下のように指定します。

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'static' # 追加

MEDIA_URL = '/media/'

次に、以下のコードにより、staticディレクトリへCSSなどのstaticファイルをコピーします。

python3 manage.py collectstatic

これでstaticの設定ができました。



デプロイのための準備

ここからはデプロイするために必要なもののインストールやファイルの作成を行います。

まずはアプリケーションサーバーのインストールを行います。
以下のコードにより、Gunicornをインストールします。

pip install gunicorn

これをHerokuでデプロイするには、インストールした上でHerokuにGunicornを使うことを伝える必要があります。
そのため、次のコードによりファイルを作成し、書き込みをしていきます。

touch Procfile
web: python manage.py migrate && gunicorn プロジェクト名.wsgi

これでHerokuでGunicornを使うと伝えることができます。


次に、requirements.txtファイルを作成します。これはアプリケーションを動かす上でインストールが必要なライブラリを指定するために使用されます。
手元の環境とHerokuのサーバーでインストールしているものが違う場合に自動的に必要なライブラリをインストールしているものがrequirements.txtです。
では以下のコードにより、ファイルを作成します。

touch requirements.txt

次に、以下のコードによりインストールされているライブラリを確認します。

pip freeze

すると以下のような出力になります。

これらがpipを使ってインストールしたライブラリの一覧となっています。あとはこれをrequirements.txtに書き出します。以下のコードを実行します。

pip freeze > requirements.txt

これでrequirements.txtの書き込みができました。


最後にDEBUGとALLOWED_HOSTSの設定を行います。設定にはsettings.pyの以下の部分を変更します。

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False # 編集

ALLOWED_HOSTS = ['ドメイン'] # 編集

DEBUGをFalseにするとブラウザ上で動作確認をした時にエラーが出ても、エラーの詳細が表示されなくなります。
また、ALLOWED_HOSTSも設定しておきます。これは自分のドメインがあるならそれでも構いませんが、Herokuのアプリケーションでsettingsを選択して出てくる下の画像の黄線を設定しても構いません。djangoからcomまでです。

これでデプロイする準備が整いました。


デプロイする

デプロイにはHerokuのアプリケーション→Deployから手順が確認できました。これに基いて進めます。
まずはターミナルでコードをアップロードするためのコマンドを実行します。

git init
heroku git:remote -a Herokuのアプリケーション名
git add .
git commit -m 'deploy'
git push heroku master

これでHerokuにアプリケーションがアップロードされます。
初めてgitを使う場合は出力に従って設定してください。

アップロードができれば次のような出力がされます。

表示されたリンクにアクセスすると次のように本棚アプリケーションのトップページが表示されます。

ログインして使うことができるので、アプリケーションの公開ができたことがわかります。

これでアプリケーションの作成から公開を終わります。
現在の設定ではAWSを利用していないので、Herokuの仕様により、本の写真をアップロードしたり、表示することができません。また、デプロイ時などで定期的にサーバーが再起動され、ブラウザから追加したデータが定期的に消えてしまうことを知っておきましょう。


おわりに

今回は作成していた本棚アプリケーションをHerokuで公開する設定や準備を行い、公開しました。
これで本棚アプリケーションの作成と公開までが全て終了しました。
最後に今回作成したファイルの場所の確認のため写真を載せておきます。

全体のまとめ↓
urhayataro.hatenablog.com