【Python】FlaskのWebアプリをGithubからHerokuにデプロイ
1. はじめに
Flaskを使い始めて、なんとかWebできた。
せっかくなので、どこからでも使えるようにしたいなあ。と思いました。今、使っているレンタルサーバーのさくらのレンタルサーバーでできないかな?と調べてみると、cgiで動くらしい。「やった!」と、しばらく動かしてみました。
しかし、使ってみると、どうもルーティングが上手くいっていない。。。調べてみると、こちらに書いてあるように、cgiで動かすとルーティングができないことが発覚。残念・・・。
有料サーバーを借りてもいいけど、どうせ遊ぶだけだから、無料でできないかな?と調べると、Herokuなるものがあるらしいことを知る。ありがたく使わせてもらいます。
で、タイトル通り、Flaskで作ったWebアプリをGithubからHerokuにデプロイしました。忘れないように、備忘録的に書いておきます。
2. Ubuntu上でFlask使ってWebアプリ開発
開発というか、デプロイ準備ですが。
まず、Virtualenvを使って、開発環境を準備してその中で開発します。これをしないで開発すると、後々大変だった。。。virtualenvの使い方は、こちらを参考にさせていただきました。まずは、Virtualenvをインストールします。
$ sudo pip install virtualenv
環境を作ります。今回のアプリ名testappにします。基本的に、仮想環境を作成 → 環境に入る (有効化) → 環境から抜ける。という使い方。
$ virtualenv testapp
環境に入るには、できたフォルダtestappに入って有効化するか、次のように有効化する。
$ source testapp/bin/activate
もしくは
$ . testapp/bin/activate
とする。ちなみに、環境から抜けるには、次のようにする。
(testapp)$ deactive
で、開発環境を有効にしたまま、gitする準備をします。こちらを参考にさせていただきした。
まずは、必要なファイルを作成します。できたファイルがUTF-8形式か一応確認します。Procfileに記述するtestapp:appの「testapp」は、アプリのファイル名「testapp.py」に合わせます。
$ pip install gunicorn
$ pip freeze -l > requirements.txt
$ echo "web: gunicorn testapp:app --log-file -" > Procfile
$ echo "python-3.8.0" > runtime.txt
今回の、アプリは以下の通り。
testapp.pyは、コレ。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template(
'card.html',
username='DiNOV',
age=20,
email='dinov@testapp.com')
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
card.htmlはコレ。
<html>
<head>
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">
</head><body>
<h1>{{ username }}</h1>
<div id="desc">
{% if age < 20 %}
<p>{{ username }}は、{{ age }}才の子供です。</p>
<p>連絡先は非公開</p>
{% else %}
<p>{{ username }}は、{{ age }}才の立派な大人です。</p>
<p>メールアドレス:{{ email }}</p>
{% endif %}
</div>
</body>
</html>
スタイルシートは省略。
以下のファイルをpushします。
testapp.py
templates/card.html
static/styles.css
requirements.txt
Procfile
runtime.txt
ssh github
git add .
git status
git commit -a
git push origin main
githubでちゃんとpushされたか確認。良かったら、開発環境から抜ける。
(testapp)$ deactive
3. GithubからHerokuへデプロイ
Herokuでアプリの箱をつくっておく。今回は、dinov-testappとした。
HerokuのDeployタブでDeployment methodのGithubを選択して接続(connect)しておく。
手動でデプロイするときは、同じくDeployタブで、Manual deployのところで[Deploy Branch]ボタンを押す。コンソールが表示されデプロイの進行状況、build状況が分かる。エラーがあると、途中でbuildが止まる。Ubuntuで開発環境を使わずにWebアプリを作っていた時、不要なモジュールがrequirement.txtファイルにずらーーーっと書かれており、エラーが頻発。一つ一つ不要なモジュールをrequirement.txtファイルから手動で消していたけど、あまりにも多すぎて断念。開発環境で再度開発することにしたわけです。
めでたくbuildが終わると、Build main ***** と表示されます。
[Open app]ボタンでアプリを開くことができます。
4. さいごに
Webアプリの開発から公開まで全て無料でできるなんて、感激です。携わっている方々には感謝しかいないです。それにしても、すごい世の中ですね。