Herokuデプロイチュートリアル

はる@フルスタックチャンネル

2020年6月17日 17:08

自己紹介

プログラミング講師の飼鳥晴康(@hathle)です。

エンジニア歴は10年以上で海外(カナダ)就労も経験しています。

カナダでは、映画を作っていました。

現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。

お問い合わせなどは、Twitter(@hathle)からお願いいたします。

プログラミングは人生を変えることができます。

目標に向かって、一緒に頑張っていきましょう！！

はじめに

Djangoで開発したアプリケーションをHerokuにデプロイしましょう。

デプロイとは？

デプロイとは、特定の環境下でアプリケーションやシステムを使えるようにすることです。

デプロイして、世界中にあなたのWebアプリケーションを公開しましょう。

多くの人にあなたのWebアプリケーションを使ってもらえるようになります。

Herokuは無料で使うことができます。

無料版はロード時間に時間がかかりますが、テストでWebアプリケーションを公開したい時には便利です。

本番環境で使用するには、月額の料金が発生します。

構成

Herokuの構成です。

目標

下記を学習していきます。

・Herokuにデプロイする

前提知識

デプロイを始める前に、下記は学習しておいて下さい。

・Linuxコマンド
・インフラ
・サーバー構築

ブログ構成チュートリアルでDjangoを詳しく説明していますので、まだ実施していない方は、実施して下さい。

では、始めて行きましょう！！

準備

Herokuへデプロイするための準備をします。

環境準備

環境を準備するのに下記のコマンドを入力してください。

Macの場合

(myvenv) ~$ brew install postgresql

もしbrewコマンドが認識されない場合は、brewをインストールしてください。

Linux(Ubuntu)の場合

sudo apt-get install python3-dev libpq-dev

requirements

requirements.txtを修正します。

requirements-dev.txt

dj-database-url==0.5.0
dj-static==0.0.6
python-decouple==3.3

requirements.txt

-r requirements-dev.txt
psycopg2
gunicorn

パッケージインストール

(myvenv) ~$ pip3 install -r requirements-dev.txt

settings.py

from pathlib import Path
from datetime import timedelta
from decouple import config
from dj_database_url import parse as dburl

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

ALLOWED_HOSTS = ['*']

# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

default_dburl = 'sqlite:///' + str(BASE_DIR / "db.sqlite3")

DATABASES = {
   'default': config('DATABASE_URL', default=default_dburl, cast=dburl),
}

STATIC_URL = '/static/'
STATIC_ROOT = str(BASE_DIR / 'staticfiles')

wsgi.py

import os

from dj_static import Cling
from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings')

application = Cling(get_wsgi_application())

Procfile作成

Procfileをルートディレクトリに作成します。

Procfileは、アプリのプロセスタイプやエントリーポイントを宣言するファイルです。

Procfile

web: gunicorn mysite.wsgi --log-file -

コード解説

mysiteの部分はあなたが作成したアプリのプロジェクト名を指定します。

gunicornは、HerokuでDjangoをデプロイするときに必要なWebサーバーの名前です。

runtime.txt作成

runtime.txtを作成します。

runtime.txtにはプログラム実行時に必要なものを定義します。

ここではPythonが必要なのでPythonのバージョンを指定します。

runtime.txt

python-3.8.5

デプロイ

Herokuにデプロイしていきます。

Herokuアカウント作成

まずはHerokuのアカウントを作成します。

Heroku CLIインストール

OSに合わせてHeroku CLIをインストールします。

インストールすることによって、コマンドラインからHerokuの操作が出来るようになります。

WindowsマシンでWSLを使用している方

WindowsマシンでWSLを使用している方は、下記コマンドでHerokuをインストールしてください。

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

確認

下記コマンドでHerokuがインストールできたか確認できます。

sudo heroku -v

Herokuにログイン

ターミナルからHerokuにログインします。

$ heroku login

WSL

WSLを使用している方は、sudoが必要になります。

コマンドを実行すると、ログイン用のWebページが表示されますので、ログインボタンを押して下さい。

Herokuプロジェクト作成

Herokuにプロジェクトを作成します。

好きなプロジェクト名を指定して下さい。

このプロジェクト名がURLになりますので、既に他の人に使われているプロジェクト名は指定できません。

$ heroku create django-blog

このように表示されたら成功です。

Creating ⬢ django-blog... done
https://django-blog.herokuapp.com/ | https://git.heroku.com/django-blog.git

Herokuにデプロイ

HerokuにPush

Herokuにpushする前に、GitHubにすべてコミットしておいて下さい。

$ git push heroku main

デプロイ完了とメッセージが表示されます。

remote:        https://django-blog.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/django-blog.git
 ・[new branch]      main -> main

プロセス起動

このままだとgunicornのサーバーが起動していないため、アプリケーションが起動しません。

以下のコマンドで起動します。

$ heroku ps:scale web=1

このように表示されたら成功です。

Scaling dynos... done, now running web at 1:Free

Herokuのデータベースを構築

migrateコマンドをしてデータベースを構築します。

$ heroku run python manage.py migrate

このように表示されたら成功です。

Running python manage.py migrate on ⬢ django-blog... up, run.5146 (Free)
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying blog.0001_initial... OK
  Applying blog.0002_comment... OK
  Applying sessions.0001_initial... OK

管理ユーザーを作成

ローカルと同じようにHerokuでも管理ユーザーを作成することができます。

$ heroku run python manage.py createsuperuser

ユーザー名、メールアドレス、パスワードを入力します。パスワードの入力は表示されませんので、間違えずに入力して下さい。

Running python manage.py createsuperuser on ⬢ django-blog... up, run.6023 (Free)
ユーザー名:
メールアドレス:
Password: 
Password (again): 
Superuser created successfully.

これで無事デプロイ完了です。

デプロイしたURLにアクセスしてみましょう。

ローカルと同じ画面が表示されているはずです。

最初はデータがない初期状態なので、データを登録してみましょう。

セキュリティ対策

デプロイは成功しましたが、セキュリティ上に問題があります。

現在、Debug機能が有効になっているため、もしエラーが発生した場合、詳細な情報が表示されてしまいます。

ローカルではいいのですが、本番環境で詳細な情報は表示されたくありません。

gitignore

.gitignoreファイルに、local_settings.pyを追記します。

.gitignore

...
local_settings.py

local_settings

local_settings.pyファイルを作成します。

ローカルのみDEBUG機能を有効にします。

mysite/local_settings.py

DEBUG = True

settings

setting.pyを変更します。

mysite/settings.py

# Falseに変更
DEBUG = False

# 追加
try:
    from .local_settings import *
except ImportError:
    pass

# Debug=Falseの時だけ実行する設定
if not DEBUG:
    import django_heroku
    django_heroku.settings(locals())

GitHubにコミット

GitHubにコミットします。

Herokuにデプロイ

Herokuにデプロイしていきます。

$ git push heroku main

これで本番環境でデバッグ機能が無効になり、詳細な情報が表示されなくなりました。

SECRET KEYがハードコーディングされている

セキュリティ上、SECRET KEYを直接書くのは良くありません。

local_settings

先ほど作成した、local_settings.pyにSECRET_KEYを移動させましょう。

mysite/local_settings.py

DEBUG = True
SECRET_KEY = 'xxxxxxxxxxxxxxxxxxxx'

settings

settings.pyのSECRET_KEYは削除します。

mysite/settings.py

# 削除
SECRET_KEY = 'xxxxxxxxxxxxxxxxxxxx'

if not DEBUG:
    import os
    import django_heroku
    django_heroku.settings(locals())
    SECRET_KEY = os.environ['SECRET_KEY'] # 追加

環境設定

本番環境でSECRET_KEYを設定するには、heroku config:setコマンドで環境設定を登録します。

実際のSECRET_KEYに置き換えて実行しましょう。

$ heroku config:set SECRET_KEY="xxxx"

環境設定確認

heroku configコマンドでHerokuの環境変数を見ることができます。

$ heroku config

SECRET_KEYが表示されていれば成功です。

GitHubにコミット

GitHubにコミットします。

Herokuにデプロイ

Herokuにデプロイしていきます。

$ git push heroku main

本番環境が動作するか確認しましょう。

Herokuで画像を使用する場合

Herokuは画像、動画のアップロードに対応していません。

Herokuで画像、動画のアップロードをするには、クラウドサービスを使用する必要があります。

ここでは、Cloudinaryを使用します。

Cloudinaryとは？

Cloudinaryは、メディアファイルのアップロードやクラウド上のストレージへの保管ができるサービスです。

アカウントの作成

右上ボタンの「SING UP FOR FREE」ボタンを押して、アカウントを作成して下さい。

Account Detailにユーザー情報が表示されます。

Cloud name: xxx
API Key: xxx
API Secret: xxx

cloudinaryをインストール

cloudinaryをインストールします。

$ pip3 install django-cloudinary-storage

設定変更

Account Detailに表示された情報をCLOUDINARY_STORAGEに追加します。

mysite/settings.py

INSTALLED_APPS = [
    ...
    'cloudinary', # 追加
    'cloudinary_storage',# 追加
]

# 追加
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
# 追加
CLOUDINARY_STORAGE = {
    'CLOUD_NAME': 'xxx',
    'API_KEY': 'xxx',
    'API_SECRET': 'xxx'
}

確認

ローカルでcloudinaryに画像がアップロードできるか試してみましょう。

(myvenv) ~$ python3 manage.py runserver

パッケージ定義

新しいパッケージをインストールしたので、requirements.txtにパッケージをまとめます。

(myvenv) ~$ pip3 freeze > requirements.txt

GitHubにコミット

GitHubにコミットします。

Herokuにcloudinaryをインストール

Herokuにcloudinaryのaddonをインストールします。

addonインストール

addonはクレジットカードをHerokuに登録する必要があります。

heroku addons:add cloudinary:starter

Herokuにデプロイ

Herokuにデプロイします。

$ git push heroku main

本番環境でcloudinaryに画像がアップロードできるか試してみましょう。

Herokuテクニック

既存のGitリポジトリを既存のHerokuアプリとして登録する方法です。

パソコンを変えたときや、今まで使用していたフォルダが消えた時にやるテクニックです。

GitHubとHerokuアプリを紐づけていきます。

アプリ確認

Herokuにログインしてから、下記コマンドでHerokuに登録されているアプリを確認します。

heroku apps

紐づけ

GitHubリポジトリに移動して、下記コマンドを実行して、GitHubとHerokuアプリを紐づけします。

$ heroku git:remote --app xxx

xxxは既存のHerokuアプリ名

Herokuにデプロイ

Herokuアプリを登録できたら、Herokuにデプロイします。

$ git push heroku main

おわりに

チュートリアルを最後まで読んでいただき、誠にありがとうございました。

Herokuデプロイのチュートリアルはここまでで終わりとなります。

デプロイ方法

本番環境へのデプロイ方法が理解できましたでしょうか！？

どんどんWebアプリケーションを開発して、全世界に公開していきましょう。

Djangoは奥の深いフレームワークで、多くの機能を搭載することができます。

公式ドキュメントを参考にして、さらに理解を深めていきましょう。

ぜひオリジナルのアプリケーションを開発してみてください。

フィードバック

チュートリアルのフィードバックは、Twitter(@hathle)までお願いいたします。

どんどんDjangoチュートリアルを作成していきますので、楽しみにしていてください。

ではまた！！

最後まで読んでいただきありがとうございました😃 サポートは、プログラミングチュートリアル開発の手助けとなります。シェアもして頂くと嬉しいです。 Twitterのフォローもお願いします。 https://twitter.com/hathle