Flaskの実装とデプロイまで【Firebase】【Heroku】
2020.02.07
目次
「Firebase」と「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にも対応しているのも良いですね。
【編集部補足】
Firebaseのデータベースは最近はリアルタイムデータベースではなくFirestoreを使うのが主流になってます。
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
