HerokuにFlaskアプリ(hello world)をデプロイする方法まとめ

こんにちは、データアナリストのたぬ(@tanuhack)です!

今回は、Flaskで作ったWebアプリ(Hello World)をHerokuにデプロイする方法を、自分がつまづいた点を踏まえながら『どのサイトよりも丁寧で優しく』を意識して紹介します。

実際の開発環境
  • macOS High Sierra:10.13.6
  • Python:3.6.6
  • Flask:1.0.2
  • Gunicorn:19.9.0

ローカルで動作確認まで

ローカル環境(http://localhost:5000/)で動かないものは、基本的にHerokuにデプロイしても動きません。まずはローカルでも、ちゃんと動くものを作りましょう。

また、本番環境ではフォルダ単位でパッケージ管理をしていることが多いと思うので、venvを使って、ローカル(Heroku_Flaskフォルダ)に仮想環境を構築してFlaskの開発を行います。

環境構築

STEP1:デスクトップに移動、Heroku用のフォルダを作る

ターミナル
$ cd Desktop; mkdir Heroku_Flask

deploy-flask-heroku3

STEP2:venvでPythonの仮想環境を作成し、実行フォルダに移動する

ターミナル
$ python3 -m venv Heroku_Flask; cd Heroku_Flask

deploy-flask-heroku4

STEP3:仮想環境を有効化する

ターミナル
$ source bin/activate

プロンプトの頭に環境名が表示されている間は、仮想環境が有効になっています。

deploy-flask-heroku5

[aside]補足
仮想環境モードは$ deactivateで解除出来ます。[/aside]

STEP4:Flaskのインストール

ターミナル
$ pip install flask

deploy-flask-heroku6

STEP5:Gunicornのインストール

ターミナル
$ pip install gunicorn

STEP6:PythonファイルとProcfileを作成する

ターミナル
$ touch app.py Procfile

deploy-flask-heroku7

app.pyに下のPythonプログラムをコピペします。

# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello Heroku_Flask'

if __name__ == '__main__':
    app.run()

Procfileに下のコードをコピペします。

web: gunicorn app:app --log-file=-

ローカルで実行

STEP1:app.pyを起動させる

ターミナル
$ python app.py
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

STEP2:ローカルホストにアクセスして確認する

http://127.0.0.1:5000/ または http://localhost:5000/ にアクセスにして、『Hello Heroku_Flask』の文字列が表示されているか確認しましょう。ローカルで動かないと、オンラインじゃ動かないですからね。

deploy-flask-heroku2

ローカルでの実行モードを終了させたい場合は、ショートカットキーCTRL+Cで解除します。

Herokuにデプロイまで

Herokuのアカウント登録

STEP1:Herokuに登録する

deploy-flask-heroku8
https://www.heroku.com/

5分くらいで終わります。

STEP2:CLIツールをインストール

コマンドラインからHeroku上での作業を行うことができるツールをインストールします。

ターミナル
$ brew tap heroku/brew && brew install heroku

Herokuにデプロイする

Herokuにデプロイするために最低限必要な3つのファイル
  1. app.py
  2. Procfile
  3. requirements.txtこれから作る

STEP1:requirements.txtを作成する

ターミナル
$ pip freeze > requirements.txt

deploy-flask-heroku9

requirements.txtの中身
Click==7.0
Flask==1.0.2
gunicorn==19.9.0
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
Werkzeug==0.15.2

STEP2:フォルダにgitを設定する

ターミナル
$ git init

deploy-flask-heroku10

STEP3:すべてをadd

ターミナル
$ git add .

STEP4:コミット名をhello-heroku-flaskにする

ターミナル
$ git commit -m "hello-heroku-flask"

STEP5:ターミナルからHerokuにログイン

ターミナル
$ heroku login

STEP6:Herokuに対して『hello-heroku-flask1』という名前の新しいプロジェクトを作る

ターミナル
$ git add .

STEP7:Herokuのリモートリポジトリにプッシュ

ターミナル
$ git commit -m "hello-heroku-flask"

STEP8:Herokuにデプロイ出来ているか確認する

ターミナル
$ heroku open

ブラウザが開き、HerokuにデプロイしたFlaskアプリが表示されたら完成です\(^o^)/

Herokuの豆知識

アプリの更新

ターミナル
$ git push heroku master

Herokuリポジトリへpushすることで、アプリが自動的に更新されます。

アプリの削除

ターミナル
$ heroku apps:destroy --app アプリ名 --confirm アプリ名
[aside]補足
アプリ名は$ heroku apps:infoで確認出来ます。[/aside]