2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Python+Flaskで作ったWEBアプリをHerokuデプロイした

Posted at

…ただの初心者の作業記録的なものなので、あまり参考にならないと思います。

udemyの"The Python Mega Course: Build 10 Real World Applications"を参考に、せっせと勉強アプリを作っているのだが、このチュートリアルの環境作りが古い。

とはいえ、「与えられた課題をクリアする」こと自体が好きなので、チュートリアルの中でどこが古くてどこを新しくすべきなのかを判断して、(チュートリアルのやり方には従わず)自分なりに調べた方法ですすめてみる。

つくるのは、Application3:Personal Website with Python and Flask。

##アプリをつくったディレクトリに仮想環境をつくる
チュートリアルではアプリを作ってから仮想環境をつくるという流れだが、私は環境づくりから先にやった。virtualenvが紹介されているが、Python 3.3 からはこれが標準機能として取り込まれてvenvとして扱われているそうなので、venvを使ってプロジェクト(アプリ)ごとに独立した仮想開発環境をつくる。

このまんますすめた。
venv: Python 仮想環境管理 - Qiita

venv activate $ source [newenvname]/bin/activate
activate した仮想環境の中でプログラムファイルをつくる。というか、作ったプログラムを仮想環境をactivateした状態で動かす。

finderを確認するとアプリがあるディレクトリの中に[newenvname]という名称のフォルダができている。それを見てから「さぁ、pythonファイルを作ろう!」と思った私は「はて、どこにファイルを置いたらいいの?venvの中なの、外なの?」という疑問にぶち当たってしまった。今から考えると、仮想環境の中で作業することと、物理的にファイルをどこに置くのかは、別の問題だということがわかっていなかったのだが。

答えは、Pythonファイルをvenvフォルダーのどこに配置すればよいですか? - Javaer101のとおり、「仮想環境はあなたのものではないファイルを管理します。自分のファイルをどのように管理するかは関係ありません。venvディレクトリツリー内ではなく、意味のある場所に配置してください。」すなわち、どこでもいいけどvenvディレクトリの外が良いってことらしい。

##Flaskを使ってwebページを作る

flaskをimportしたpythonプログラムを作成。home.html、about.html、layout.html、main.cssを参照する感じの簡単なもの。

script.py

from flask import Flask, render_template
app=Flask(__name__)

@app.route('/')
def home():
    return render_template("home.html")

@app.route('/about/')
def about():
    return render_template("about.html")

if __name__=="__main__":
    app.run(debug=True)

###アプリをGithubにPushし、Herokuにデプロイ

requirements.txtを作成

$ pip freeze > requirements.txt

Procfileを作成
参照:Herokuに必要なProcfileの書き方についてまとめておく | ハイパー猫背 https://creepfablic.site/2019/06/15/heroku-procfile-matome/#index_id1

今回はPythonとFlaskを使ったアプリを作ったので、Heroku上で動作させるためには、gunicornというWSGI(Webアプリとサーバーをつなぐもの)が必要なのだそう。そこでHerokuのシステムに「gunicornを使います」ということを記述する。今回はscript.pyというpythonアプリだから、それを入れる。そんで、作成したProcfileはアプリケーションの/ (ルートディレクトリ)に置く。

Procfile

web: gunicorn script:app

Appの後ろに--log-file -と記述すれば,HerokuのログでWSGIの挙動のログが出力されるが、なくてもOK.

Git pushした後、heroku にデプロイしてOpen Appボタンを押すと(https://アプリ名.herokuapp.com/ を表示させると)、Application Errorが出てしまった。

##ダメだったところ

Herokuのログを確認($ heroku logs --tail

###・gunicornをインストールしていなかった

言われるがままにProcfileを記述したため、gunicornのインストールをしていなかった(嘘でしょ!)。仮想環境(venv)でpip install gunicornし、requirements.txtを書き直す($ pip freeze > requirements.txt)。

###・script.pyを削除してアップしていた
信じられない話だが、アプリファイルそのものを削除していた。ゴミ箱に残っていたものをrestoreして、再push。

###・script.pyに書いた参照ファイル名が間違っていた
これでもまだ、at=error code=H10 desc="App crashed" method=GET path="/"などのエラーが出るので、ググールして参考サイトを確認しつつ、エラーメッセージを目を凝らしてみたら、「index.htmlファイルなんて存在しないぜ!」というメッセージがある。確かに、最初はindex.htmlとしていたファイルをhome.htmlに変えたんだった。それを保存していなかったっぽい。


通った。

学びは、(1)答えはエラーメッセージに隠されている、(2)難しいことをする前に自分の凡ミスを疑え、の2点。自分のミスの酷さに涙が出そうだが、問題解決にかける時間が短くなってきたような気もする。

肩こりがひどい。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?