Zenn
🐍

【Heroku+Python+Flask】HerokuでFlaskアプリを起動

2024/09/12に公開
Flask
Heroku
Python
webアプリケーション
tech

目的

Flaskアプリでの開発から、ローカル環境及びHerokuで起動できるようになります。

前提

  • Herokuアカウント作成済みであること
  • GitHubアカウント作成済みであること
  • VSCodeでGitHubの基本的な操作（コミット、プッシュ）ができること

開発環境

MacOs 14.4.1
Python 3.12.2
Flask 3.0.3
Werkzeug 3.0.2

本記事の流れ

  • どうやってHerokuでFlaskアプリが起動する？
  • 開発環境構築
  • Flaskアプリ作成
  • ローカルでFlaskアプリ起動
  • HerokuでFlaskアプリ起動

どうやってHerokuでFlaskアプリが起動する？

HerokuにFlaskアプリをデプロイして、実行しているかを簡単に説明します。
以下では、Flaskアプリを含むWebアプリケーションのデプロイについて説明した後、Flaskアプリがどのようにして起動しているかを説明します。

HerokuでのWebアプリのデプロイについて

HerokuでWebアプリを起動するために、Procfileを準備する必要があります。
Procfileとは、Herokuにデプロイしたアプリを起動するためのファイルで、プロジェクト直下に配置する必要があります。
Herokuに「デプロイするアプリケーションは、〇〇言語で書かれていて、こうやって起動してね」といった情報を記述したファイル、と理解して頂ければ問題ないです！
HerokuはProcfileを見て、デプロイされたWebアプリケーションを起動します。

下記、クライアントからリクエストが送られ、クライアントにレスポンスを返すまでの流れです。

  1. クライアントがリクエストを送る
  2. Herokuが、クライアントからのリクエストを受け取る
  3. Herokuが、リクエストをgunicornに送る
  4. gunicornが受け取ったリクエストをFlaskアプリを実行して、処理させる
  5. 必要に応じて、FlaskアプリはDBからデータ取得を行う
  6. DBはFlaskアプリに結果を返す
  7. Flaskアプリはgunicornに処理結果を返す
  8. gunicornはHerokuに処理結果（レスポンス）を返す
  9. Herokuが、クライアントに対してレスポンスを返す

開発環境構築

Flaskプロジェクト作成

まずはFlaskプロジェクトを作成します。
今回は、「sample_flask」というFlaskプロジェクトを作成します。

$ mkdir sample_flask

venvで仮想環境を構築

venvモジュールを使用して、仮想環境を構築します。
venvはプロジェクト単位で、アプリ起動や依存関係にあるパッケージとそのバージョンを
管理することを可能にする仮想環境を構築できます。

※venvモジュールの詳しい解説については、後日掲載します。

まずは、プロジェクト直下に仮想環境の任意のディレクトリを作成、及び作成したディレクトリに
移動します。

$ mkdir myenv
$ cd myenv

次に、下記コマンドを実行すると、myenvディレクトリ内に仮想環境を起動するためのファイルが自動作成されます。

$ python3 -m venv .
$ ls
> bin         include     lib         pyvenv.cfg

仮想環境の起動/停止

下記コマンドを実行すると、仮想環境を起動できます。
(myenv)が表示されていれば、起動成功です！

$ source bin/activate
(myenv) $ # 仮想環境を起動できた！！

続いて、下記コマンドを実行すると、仮想環境を停止できます。

(myenv) $ deactivate
$  # 仮想環境を停止できた！！

Flaskをインストール

まずはFlaskフレームワークをインストールします。

(myenv) $ pip install flask

gunicornをインストール

前述の通り、HerokuでFlaskアプリを起動するためには、gunicornというWSGIサーバーを
使用しています。
そのため、下記コマンドでgunicornをインストールしておく必要があります。

(myenv) $ pip install gunicorn

Flaskアプリ作成

Hello Worldモジュール作成

Flaskプロジェクト直下に、app.pyというモジュールを作成します。

$ cd sample_flask
$ touch app.py

次に、作成したモジュールに処理を記述します。
今回は、ブラウザからアクセスしたときに、「Hello World!!」と表示する
簡易的なものを作成します。

app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!!'

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

これでFlaskアプリ作成は完了です！！

続いて、ローカル環境でFlaskアプリを起動する手順を説明します。

ローカルでFlaskアプリ起動

仮想環境を起動して、app.pyを実行する。

(myenv) $ python3 app.py

Webブラウザからhttp://127.0.0.1:5000にアクセスします。

Hello World!!が表示されれば、ローカルでFlaskアプリ起動成功です！！

HerokuでFlaskアプリ起動

requirements.txt作成

requirements.txtは、Flaskアプリに依存関係があるパッケージを管理するためのファイルです。
JavaプロジェクトでのMavenのpom.xmlとみたいなものです。

下記コマンドを実行することで、開発したFlaskアプリと依存関係にあるパッケージとPythonの
バージョンをrequirements.txtに出力できます。

(myenv) $ cd flask_sample
(myenv) $ pip freeze > requirements.txt

このファイルをGitHubなどで管理しておけば、開発メンバーとパッケージやPythonのバージョン
をインストールすることが簡単になります！！

Procfile作成

Procfileは、HerokuからFlaskアプリを起動するのに必要なファイルになります。
Herokuの公式ドキュメントに記載の通り、必ずプロジェクト直下に作成してください。

Procfileには、下記を記載してください。

Procfile
web: gunicorn app:app

GitHubにPush

開発したFlaskアプリをGitHubにプッシュします。

Herokuアプリ作成

Herokuにログインして、New-Create new appを押下する。

App nameを入力し、Create appで完了です。

HerokuアプリとGitHubを連携

Deployタブを開き、Deployment methodでGitHubを選択すると、Connect to GitHub
にリポジトリ一覧が表示されるので、対象リポジトリの右隣のConnectを押下する。

Connectedになっていれば、連携は成功です！

HerokuでFlaskアプリ起動

Manual deployで、デプロイするブランチを選択して、Deploy Branchを押下すれば
Flaskアプリがデプロイされます。

ページ上部のOpen appを押下する。

Hello World!!が表示されれば起動成功です！！

まとめ

HerokuでFlaskアプリ起動する手順を説明してきました。
HerokuはDBなどを使わなければ無料で利用できるので、小規模なアプリ開発やポートフォリオを作成するにはちょうどいいのかなと個人的には思っています。

参考文献

Flask+Python+Herokuで環境構築してから何かをデプロイするまで
Webアプリケーションの全体像を掴む
公式ドキュメント

Discussion