FirebaseをデータベースとしてFlaskアプリをHerokuへとデプロイしてみた
2021.12.20
目次
FlaskアプリをHerokuへとデプロイするまでの手順
Pythonによって動かすことができるFlaskですが、Djangoほど大規模なアプリを開発する必要はなく、簡単なAPI処理などを考えれば一つのアプリ開発の選択肢として考えられると思います。
この記事では、話題のFirebaseをデータベースとしてFlaskアプリをHerokuへとデプロイするまでの手順を紹介します。
モダンな技術を使っているので、今風の実装方法といって良いでしょう。
本題に入る前に、「Firebase」と「Heroku」について軽くご説明したいと思います。
Firebase（ファイアーベース）とは
Firebaseとは、アプリケーションを運用する土台となるソフトウェアとなります。
データベース作成から何かエラーが起きたときのレポート作成までさまざまな機能が搭載されており、バックエンドエンジニアの役割を担っているといって良いでしょう。
「ウェブ」「IOS」「アンドロイド」「Unity」のバックエンドに対応しています。
Heroku（ヘロク）とは
Herokuは、2007年から開発が始まった Could platform です。
最初は「Ruby」のみの対応でしたが、現在では「Java」「Node.js」「Scala」「Python」「PHP」など様々な言語に対応しており、アプリのデプロイ先として幅広く使われています。
Githubでの管理となるので扱いやすいという点もあります。
Firebaseの設定
それでは、Firebaseの設定から始めていくとしましょう！
ログイン
Googleアカウントでログインすると、設定画面が下記の画像のように表示されます。
ちなみに、マルチデータベースやGoogle Cloud Platformとの連結は有料となります。
プロジェクトの作成
「Add project」をクリックすると以下のようにProjectnameとLocationを指定することができます。
ロケーションは、「デフォルト」で良いと思います。
名前とストレージのロケーションを指定して、「Create project」をクリックし、プロジェクトを作成します。
データベースの作成
次に、データベースの設定をします。
プロジェクトのメイン画面に移動し、「Database」をクリックします。
リアルタイムデータベースに移動し、「Create database」をクリックします。
「Start in test node」を「Enable」にしてデータベースへのアクセスに関するセキュリティルールを設定します。
これでデータベースへのアクセスが可能になります。
アプリケーションと統合
その後、「Project settings」をクリックして、アプリケーションと統合させます。
今回は、ウェブなので左から3番目のスクリプトボタンをクリックします。
アプリの名前を入力します。
無事、スクリプトを得ることができました。
このスクリプトが認証キーとなりデータベースにアクセスすることが可能になります。
基本的には、これをHTMLに貼り付けることで、データベースを操作できます(CRUD)。
非常に簡単ですよね。
今回はテストなので、全てのIPからアクセスできるようになっていますが、アクセス制限をするなどのカスタマイズももちろん可能です。
ローカルコンピュータの設定
次に、自分のローカルコンピュータにいきます。
今回は、Macbook Airを使用しているため、ターミナル(ウィンドウズだとコマンドプロンプト)で以下のようなディレクトリを構成します。
この通りにディレクトリを構成しないと、Herokuへのアップロードの際にエラーがでるので気をつけてください。
Todoリスト作成
今回作るアプリは、先ほどを作ったデータベースを使ったTodoリスト作成です。
今回の記事は、「モダンな技術を使ったアプリ開発とデプロイまで」というテーマなので、Flaskについては詳細に解説はしませんが、各スクリプトにコメントしていきたいと思います。
Procfile
まず、Procfileですが、以下のような設定がされています。
gunicorn とは、 Python WSGI HTTP Server for UNIXと定義されており、Webサーバーとアプリケーションを接続させるためのインターフェースです。
-b でバインドするソケットの指定をします。
今回は、どのIPからもアクセスできるように0.0.0.0 (任意のIPv4アドレス)でデフォルトのポート番号5000をしています。
appは、メインファイル名を指定します。
1 | web: gunicorn -b 0.0.0.0:$PORT app:app |
README.md
README.mdは、プロジェクトの詳細が書かれています。
app.py
app.py がメインのコードとなります
まず、Firebaseで作成したデータベースのConfigをコピー&ペーストします。
1 2 3 4 5 6 7 8 9 10 11 12 | import pyrebase from flask import * config = { "apiKey": "*************", "authDomain": "*************", "databaseURL": "*************", "projectId": "*************", "storageBucket": "*************", "messagingSenderId": "*************", "appId": "*************" } |
次に、Configのデータを引数としてfirebase変数で初期化し、dbに接続します。
db.child… の箇所は、簡単にデータベースに書き込める例として表示しました。
1 2 3 4 5 | firebase = pyrebase.initialize_app(config) db = firebase.database() # db.child("names").push({"name":"kota"}) # db.child("names").push({"name":"take"}) |
コメントを外して実行すると、firebase側では以下のように書き込まれます。
実行処理
次に、Flaskの実行処理に移ります。
基本的にはコメントで記載した通りの処理を実行します。
Firebase上で、CreateとDeleteを使ったことになります。
処理自体は非常にシンプルですが、応用すれば基本的なアプリは作れるのではないでしょうか。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | # ルートを指定、メソッドはGET、POST @app.route('/', methods=['GET', 'POST']) # basic関数を定義 def basic(): # POSTでリクエストされたら if request.method == 'POST': # form['submit']のvalueが'add'であれば if request.form['submit'] == 'add': # formから値を取得 name = request.form['name'] # 値をfirebase上のtodoに書き込む db.child("todo").push(name) # firebaseから値を取得 todo = db.child("todo").get() # toに値を代入 to = todo.val() # index.htmlに 値toを返す return render_template('index.html', t=to.values()) # form['submit']のvalueが'delete'であれば elif request.form['submit'] == 'delete': # firebaseのdbであるtodoを削除 db.child("todo").remove() # 元のindex.htmlを返す return render_template('index.html',) # それ以外は、index.htmlを返す return render_template('index.html') if __name__ == '__main__': #処理の実行 app.run(debug=True) |
requirements.txt
次のファイルは、requirements.txtです。
ここには、必要なライブラリを置いておきます。
herokuでも使われるので、重要です。
runtime.txt
runtime.txtは、Pythonのバージョンを指定しています。
これも、Herokuで読み取られるファイルで置く必要があります。
templatesフォルダ
templatesフォルダには、index.htmlが置いてあります。
見た目は、BootstrapのCDNを使っています。
以下の箇所で値を表示させています。
1 2 3 4 5 6 7 8 9 10 11 | <div class="container-fluid"> # firebaseからもらった値をfor文に入れ込む {% for l in t %} <ul class="list-group"> <li class="list-group-item"> # 値を表示 {{l}} </li> </ul> {% endfor%} </div> |
これでファイルは全てとなります。
実行
実際に実行すると、firebaseと連携してプログラムが動きます。
Herokuへのデプロイ準備として、Githubにコードをあげます。
レポジトリはプライベートでもパブリックでも構いません。
注意すべき点として、パブリックであげる場合は、Firebaseの認証キーを削除するようにしてください。
Herokuへのデプロイ
最後にHerokuへとデプロイします。
基本的には、ファイルを同様に構成してチュートリアルにある通りにやれば問題なくデプロイできます。
流れ
- Herokuへのログイン
- スクリプトをユーザー:herokuへとpushする
これで終了となります。
さいごに
FirebaseとHerokuを使うことによってかなりのリソースが節約されることがよくわかります。
これまでデータベースの環境構築・設定などに使っていた時間を減らし、アプリの開発により注力できるようになると思います。
ウェブだけでなく、モバイルやUnityにも対応しているのも良いですね。
【編集部補足】
最近は「Firestore」を使うのが主流になってます。
こちらの記事もオススメ！
書いた人はこんな人
- 「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もりは大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！
ご応募をお待ちしております！
ITエンタメ2022.06.22IntelliJ IDEAとkotlinを送り出したJetBrains創業物語- ITエンタメ2022.06.15【アタリ創業者】スティーブ・ジョブズを雇った男「ノーラン・ブッシュネル」
- ITエンタメ2022.06.13プログラミングに飽きてPHPを開発したラスマス・ラードフ
- ITエンタメ2022.06.03【Unity開発秘話】ゲーマーを開発者にしてしまうゲームエンジン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
