no-image

初心者のためのFlaskアプリ開発④ FlaskアプリをHerokuにデプロイ!

前回の更新から二週間以上空けてしまったが、久々にブログを更新する。
この二週間は開発に専念していたので、かなりPythonとDjangoあたりのことを勉強した。
振り返りも兼ねて記事にしていこうと思う。

さて、今回は初心者のためのFlaskアプリ開発③ Flaskのテンプレートビューを使って画面に実行結果を表示させるの続き。
いよいよheroku上にデプロイして見ようと思う。
herokuが何かについては気が向いたら別の記事にまとめる。

本記事の構成

この記事の構成は以下の通り。

  1. herokuに登録
  2. ターミナルでherokuにログイン
  3. 必要なモジュールのインポート
  4. 必要なファイルの生成
  5. デプロイ!
  6. つまづきやすいポイントと解決法

herokuに登録

まずはherokuにアカウントを作り、herokuCLIをインストールする必要がある。
herokuのアカウント作成は公式ページから行う。

heroku公式ページ

基本的には案内に沿って登録するだけなのでつまづくことは少ないと思うので詳細は割愛。
ただページが英語なので、英語に苦手意識があると苦労するかも。

herokuのアカウントを作成したら、herokuのCLI(コマンド・ライン・インターフェース)をインストールする。
こちらも基本的には画面に沿って進めていくだけなので割愛。

一応参考としてドットインストールのリンクを載せておく。
herokuに代表されるPaaSとは何かについてもわかりやすくまとめられてるのでおすすめ。
使っているのはRubyとRailsだが、この動画でアカウント作成からCLIのインストールまで紹介されている。

ドットインストール:heroku入門

ターミナルでherokuにログイン

herokuの準備が整ったら、いよいよデプロイを進めていく。
まずは開発用の仮想環境を立ち上げて、アプリのルートディレクトリに移動する。

仮想環境の立ち上げや、今回デプロイするアプリケーションについては、これまでの記事を参照。

初心者のためのFlaskアプリ開発② FlaskでHelloWorldアプリをつくる
初心者のためのFlaskアプリ開発③ Flaskのテンプレートビューを使って画面に実行結果を表示させる

まずはターミナルからherokuにログインする。

  $ heroku login

メールアドレスとパスワードを入力し、”Logged in as メールアドレス”と表示されれば成功。

必要なモジュールのインポート

herokuにデプロイするためには、追加でgunicornというモジュールが必要になる。
インストールのためには以下のコマンドを入力。

  $ pip install gunicorn

gunicornとは、UNIX用のPython WSGI HTTPサーバーである。
flaskのローカルで動かしていた開発用HTTPサーバーは、残念ながら本番環境では使えないのでこちらをインストールする必要がある。
参考:Gunicorn公式ドキュメント

必要なファイルの生成

次は必要なファイルを生成する。
herokuへのデプロイのためには、初心者のためのFlaskアプリ開発③ Flaskのテンプレートビューを使って画面に実行結果を表示させるで作ったファイルにいくつか追加する必要がある。

必要なファイルは、以下の3つ。
・requirements.txt
・Procfile
・runtime.txt

①requirements.txt
開発環境で使用しているモジュールをherokuに伝えるためのファイル。
作成は簡単。
次のコマンドを打ち込むだけ。

  $ pip freeze > requirements.txt

ちなみに今回のアプリのrequirements.txtはこんな感じ。
デプロイの際、何かエラーが起きた場合は、これらのモジュールがちゃんと反映されているか、バージョンは問題ないか確認してみるといいかも。

  beautifulsoup4==4.6.3
  bs4==0.0.1
  certifi==2018.8.13
  chardet==3.0.4
  click==6.7
  Flask==1.0.2
  gunicorn==19.9.0
  idna==2.7
  itsdangerous==0.24
  Jinja2==2.10
  MarkupSafe==1.0
  requests==2.19.1
  urllib3==1.23
  Werkzeug==0.14.1

②Procfile
Procfileは、アプリケーションのdynosがHerokuプラットフォーム上で実行するコマンドを宣言するためのメカニズム。
このファイルは、アプリケーションのルートディレクトリに配置する必要がある。
サブディレクトリに置かれても機能はしない。
参考:Heroku公式ドキュメント The Procfile

今回であれば、gunicornを使用することをherokuに宣言してあげる必要がある。
Procfileという名前のファイルを作成し、次の一文を追加する。

  web: gunicorn app:app

ちなみに、今回はapp.pyに接続するため、”app:app”としていることに注意。

③runtime.txt
こちらは使っているpythonのバージョンをherokuに伝えるためのファイル。
自分のバージョンは”python -V”で確認できる。

今回は以下の一文を追加。

  python-3.6.5

こちらのファイルだが、一行目を改行していたり空白があるとエラーが出るそう。
一度確認してみると良いかもしれない。

デプロイ!

さて、一通り準備ができたのであとはデプロイしていくだけ。
とはいえここが一番つまづきやすいポイント。
丁寧に進めていく。
デプロイの流れとしては、gitリポジトリを作成し、それをherokuに送るというもの。

まずはherokuのアプリケーションを作る。

  $ heroku create hatena-nav

アプリケーション名は自由なので適宜変更すること。
こんな表示になれば成功。

  Creating ⬢ hatebu-nav... done
  https://hatebu-nav.herokuapp.com/ | https://git.heroku.com/hatebu-nav.git

次はgitリポジトリの生成。
以下のコマンドを順番に打ち込む。

  $ git init
  $ git config user.name "名前"
  $ git config user.email メールアドレス
  $ git add -A .
  $ git commit -m 'myapp'

ここで注意が必要なのはgit configの部分。
ここは書いてない参考記事が多く、私自身がデプロイでハマってしまった。
gitを初めて触る人間としては、gitのリモートリポジトリの生成一つとってもハマりどころだらけだった。
gitに関してもそのうち勉強したことを記事にする。

最後はherokuにpushする。

  $ git push heroku master

方法はこのコマンドを打ち込むだけだが、一体幾度このプロセスのエラーに阻まれたことか…。
次のような表示になれば成功。

  remote: Verifying deploy... done.
  To https://git.heroku.com/hatebu-nav.git
   * [new branch]      master -> master

私は完全に独学なので、このデプロイでハマったときには本当に困った。
誰か聞ける相手が必要だと思った。
もし私と同じように独学でデプロイにつまづいてしまった人は、諦める前にぜひこのブログにコメントをしてほしい。
何かアドバイスができるかもしれない。

  $ heroku open

デプロイに成功したらこのコマンドを打ち込むだけでブラウザが開く。
こんなページが完成した。

まとめとエラー事例集

今回主に参考にしたのはこちらのドキュメント。
Flaskドキュメント:Deployment Options
とはいえこれだけではエラーだらけでうまくデプロイできなかった。

メモ書きとしてエラーの事例を残しておく。

・No default language could be detected for this app
単純にrequirements.txtのスペルを間違えていた。
ファイル名を修正したら解消。

・gitのリモートリポジトリと接続できないエラー
以前に作成したリポジトリの設定と衝突していた模様。

  $ heroku apps:destroy --app アプリ名 --confirm アプリ名

でアプリと設定を削除してから再度createしたら解消した。
参考:【herokuコマンド】createからdestroyまで

・gunicornが動かない
Procfileの”○○:app”を自分のアプリの名前に変えたら解決。