Flaskの実装とデプロイまで【Firebase】【Heroku】
2019.07.03
目次
「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にも対応しているのも良いですね。
【編集部補足】
Flaskは今後メンテナンスがされない予定になっているフレームワークです。（今の所Flask代替の筆頭で話題になっているのはResponderです。）
Firebaseも最近はリアルタイムデータベースではなくFirestoreを使うのが主流になってます。
一緒に働いてくれる仲間を募集中！
ライトコードでは、仲間を募集しております！
ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。
どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず！また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。
あなたからのご応募をお待ちしております！
ライトコードでは一緒に働いていただける方を募集しております！
お気軽にご応募ください。
書いた人はこんな人
最新の投稿
IT技術2019.07.19人工知能が騙される？Adversarial Examplesとは？
SES営業2019.07.19エンジニアさん必見！良いSES会社を見つけるポイントは？
エンジニアになろう！2019.07.18Web系エンジニアになるための最短の勉強方法とは？
IT技術2019.07.17Androidのリリース用keystoreファイルのパスワードをセキュアに保つ
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
