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

Add a Comment

メールアドレスが公開されることはありません。