【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アプリの開発から公開まで全て無料でできるなんて、感激です。携わっている方々には感謝しかいないです。それにしても、すごい世の中ですね。