HEROKU(ヘロク)公式のgunicorn+Flask+python構成でWEBアプリのデプロイするまでの手順

この記事でわかること

・python+Flaskで作ったWEBアプリを最速で公開する方法がわかる

・WEBアプリを公開するときに発生しやすいエラーの対処方法がわかる

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア

 

概要

この記事では、HEROKUを使って、gunicorn+Flask+python構成でWEBアプリを公開するところまで紹介します。

また、筆者が遭遇したエラーについても補足します。

プログラミング初心者がWEBアプリを公開することを考えると、HEROKUの方が、awsやGCPよりも楽と言えます。

 

前提条件

この記事では、以下の前提条件を元にして記載します。

  1. HEROKUに登録済みでログインできること
  2. herokuのSDKをインストール済みでコマンドラインから操作できること
  3. Gitの基本的な操作ができること
  4. Flaskで「hello world」を出力する方法がわかっていること

 

HEROKU、gunicorn、Flaskの動作原理

動作原理は、ざっくり以下の通りです。

 

クライアント(ユーザー)からのアクセス
 ↓
ここからHEROKUのインフラ内
 ↓
gunicorn(WSGIサーバー)
 ↓
Flask

実際の手順

実際の手順を記載すると以下のとおりです。

 

Flaskでアプリを作る

Flaskアプリの構成は、以下の通りです。

作成したアプリは、getリクエストすると、helloを出力する大変シンプルなものです。

プロジェクトRoot
├── Procfile(ローカル環境では必要ないがHEROKUの設定で必要)
├── app.py
├── requirements.txt(ローカル環境では必要ないがHEROKUの設定で必要)
├── runtime.txt(ローカル環境では必要ないがHEROKUの設定で必要)
└── templates
    └── index.html

 

上記のプロジェクトは、githubに上げました。参考にどうぞ!

https://github.com/jshirius/heroku_bert_mask_flask

 

気になる人は、上記のurlからダウンロード(タグ「Flask_heroku_comp」)できます。

気をつける点としては、サーバー起動処理のhostは、外部からのアクセスを許可するため

以下のように「0.0.0.0」を指定します。

app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))

WEBブラウザーでHEROKUにログインする

コンソールにて以下のように入力し、ログインします。

$heroku  login

 

HEROKUの管理画面から新規のアプリを作成する

以下の図を参考にHEROKUの管理画面から新規のアプリを作成します。

 

 

また、後の工程でgitのpush先の情報が必要になるので、管理画面の情報をメモしておきます。

 

なぜheroku createでアプリを作成しないの?

コンソールで「heroku create」と入力して、アプリを作成することも可能です。

しかし、適当な名前になるため、あとからアプリ名を変更しようとすると、herokuのgitのリポジトリ名が変わってしまうため面倒です。

よって、管理画面から新規のアプリ登録することをおすすめします。

 

デプロイに必要なファイルを作成します。

必要なファイルは以下のとおりです。

  • Procfile
    • herokuにgunicornとFlaskの関係を伝える
  • requirements.txt
    • pipでインストールするライブラリーを指定します。
  • runtime.txt
    • pythonのバージョンを指定します。

 

以下にファイルの内容を記載します。

Procfile

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

 

requirements.txt

gunicorn
flask

 

runtime.txt

python-3.7.8

 

git pushしてデプロイする

以下のようなコマンドを参考にpushしてアプリをデプロイします。

git init
heroku git:remote -a bert-mask-app
git add .
git commit -am "make it better"
git push heroku master

 

動作確認

デプロイが正しくできているか確認します。

問題なければ、ブラウザーが開いて、作成したWEBアプリが起動します。

$heroku open 

以上、Flaskで作成したアプリをherokuにアップデートする流れでした。

 

補足

以下補足を記載します。

・公式のサンプルプロジェクトをダウンロードする(ファイル構成の参考用に)

git clone https://github.com/heroku/python-getting-started.git

 

・「heroku logs」でログを確認

heroku logs –tail

 

エラー対処

筆者は、いくつかのエラーに遭遇しました。

その時の対象方法を記載します。

 

エラー「No default language could be detected for this app」

remote:  !     No default language could be detected for this app.
remote: 			HINT: This occurs when Heroku cannot detect the buildpack to use for this application 

原因は、buildpackの設定がないとのこと。

このようなエラーがでたときの解消方法は以下のとおり。

herokuに「このアプリはpythonで実行する」ことを伝えます。

$ heroku buildpacks:set heroku/python

 

エラー「App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz」

 

remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz
remote:        More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote: 
remote:  !     Push failed

 

以下のファイルが無い、もしくは設定を間違っている。

  1. requirements.txt
  2. runtime.txt
  3. Procfile

 

私の場合は、Procfileファイルが以下のように設定されていなかったのがエラーの原因でした。

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

 

参考にさせていただいたサイト様

【完全版】Flaskで作ったAPIをHerokuにデプロイする手順(備忘録)

herokuで悩んだところ

Herokuでgit push heroku masterした時にrejectされたら見る記事

 

まとめ

いかがですか?

HEROKUは、制限(※)があるものの無料でWEBアプリを公開することができておすすめです。

また、AWSのようにpython本体をインストールしたり、ポートを開放するなどのインフラ作業が発生しないため、ポートフォリオなどをすぐに公開したいときに良いかもしれません。

 

制限とは以下のとおりです(2020/11/30時点):

・30分間アクセスがないとスリープ状態になる(スリープ状態になると起動までに10数秒ほどの時間がかかる)。

・ストレージ(HDDのこと)が500Mまで。機械学習のモデルをおいたらすぐに一杯になってしまうかもしれません。

\IT未経験者からのサポートあり!転職サービス3選!!/

サービス名
未経験 未経験OK 未経験の転職専用 経験者向け
公開の求人数 ITエンジニア全体で1万件以上
ITエンジニア未経験で600件以上
未公開 5,000件以上
利用対象 全職種 IT特化 IT特化
特徴 ✓誰もが知る転職サービス
✓経歴を登録しておくとオファーが来る
✓企業担当者と条件交渉
✓スキルの身につく企業を紹介
✓IT専門のエージェントが対応
✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容
  • 求人検索
  • 企業担当者と交渉
  • 求人紹介
  • ライフプランのサポート
  • キャリア相談
  • 求人紹介
  • 提出書類の添削
  • 面接対策
公式サイト リクナビネクスト テックゲート レバテックキャリア

 

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG