1. HOME
  2. ブログ
  3. IT技術
  4. Flaskの実装とデプロイまで【Firebase】【Heroku】

Flaskの実装とデプロイまで【Firebase】【Heroku】

「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」をクリックすると以下のようにProjectnameLocationを指定することができます。

ロケーションは、「デフォルト」で良いと思います。

名前とストレージのロケーションを指定して、「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は、メインファイル名を指定します。

README.md

README.mdは、プロジェクトの詳細が書かれています。

app.py

app.py がメインのコードとなります

まず、Firebaseで作成したデータベースのConfigをコピー&ペーストします。

次に、Configのデータを引数としてfirebase変数で初期化し、dbに接続します。

db.child  の箇所は、簡単にデータベースに書き込める例として表示しました。

コメントを外して実行すると、firebase側では以下のように書き込まれます。

実行処理

次に、Flaskの実行処理に移ります。

基本的にはコメントで記載した通りの処理を実行します。

Firebase上で、CreateDeleteを使ったことになります。

処理自体は非常にシンプルですが、応用すれば基本的なアプリは作れるのではないでしょうか。

requirements.txt

次のファイルは、requirements.txtです。

ここには、必要なライブラリを置いておきます。

herokuでも使われるので、重要です。

runtime.txt

runtime.txtは、Pythonのバージョンを指定しています。

これも、Herokuで読み取られるファイルで置く必要があります。

templatesフォルダ

templatesフォルダには、index.htmlが置いてあります。

見た目は、BootstrapのCDNを使っています。

以下の箇所で値を表示させています。

これでファイルは全てとなります。

実行

実際に実行すると、firebaseと連携してプログラムが動きます。

Herokuへのデプロイ準備として、Githubにコードをあげます。

レポジトリはプライベートでもパブリックでも構いません。

注意すべき点として、パブリックであげる場合は、Firebaseの認証キーを削除するようにしてください。

Herokuへのデプロイ

最後にHerokuへとデプロイします。

基本的には、ファイルを同様に構成してチュートリアルにある通りにやれば問題なくデプロイできます。

流れ

  1. Herokuへのログイン
  2. スクリプトをユーザー:herokuへとpushする

これで終了となります。

さいごに

FirebaseとHerokuを使うことによってかなりのリソースが節約されることがよくわかります。

これまでデータベースの環境構築・設定などに使っていた時間を減らし、アプリの開発により注力できるようになると思います。

ウェブだけでなく、モバイルやUnityにも対応しているのも良いですね。

【編集部補足】
Flaskは今後メンテナンスがされない予定になっているフレームワークです。(今の所Flask代替の筆頭で話題になっているのはResponderです。)
Firebaseも最近はリアルタイムデータベースではなくFirestoreを使うのが主流になってます。

一緒に働いてくれる仲間を募集中!

ライトコードでは、仲間を募集しております!

ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。

どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず!また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。

あなたからのご応募をお待ちしております!

ライトコードでは一緒に働いていただける方を募集しております!
お気軽にご応募ください。

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事