Firebaseを試しに使ってみる
FirebaseでCLIを用いて開発環境の設定から簡単なAPIを作成し、デプロイまでの流れをまとめています。
Firebaseとは
Firebaseは、Google社が提供しているモバイルプラットフォームです。iOS、Android、Webなどでアプリケーションを構築し、モバイルサービスを提供する際に必要な機能を備えています。
主な機能として、Realtime Database、Authentication、Storage、Hosting、Functionsなどがあります。
料金プランは、無料のSpark、月額25ドルのFlame、従量制料金のBlazeの3つがあり、プランに応じて同時接続数や扱えるデータ量などが異なります。
詳細は以下のページでご確認ください。
Firebase – Google基本機能の概要は以下になります。
Realtime Database
Realtime Databaseはクラウドホスト型NoSQLデータベースです。データとしてJSONデータを保存・同期します。Realtime Database SDKを使うことにより、リアルタイムでの保存・同期が出来、オフラインの場合はローカルキャッシュに一時的に保存しオンラインになると自動的に同期が出来る仕組みもあります。
Cloud Functions
Cloud Functionsは、Firebaseの機能のイベントやHTTPリクエストによるトリガに応じて関数を実行できます。Realtime Databaseでのデータベースの変更、Authによる新規ユーザーの申し込みイベントなども作成することが出来ます。
Hosting
Hostingはアプリを簡単に配置することが可能です。またコンソールからデプロイ履歴を参照し、以前のバージョンにロールバックすることも可能です。
Authentication
Authenticationは、ユーザー認証システムを簡単に構築できます。エンドユーザーのログインや初期登録などの操作を使いやすくすることが出来ます。
メールアドレスとパスワードの組み合わせ、電話認証のほか、Google、Twitter、Facebook、GitHub のログインなどをサポートしています。
動作環境
- Windows10 Pro
- Node.js v10.15.0 (LTS = 推奨バージョン)
- 何かしらのテキストエディタ
- Windows PowerShell
環境の準備
コンソールへログイン
以下のURLからコンソールページに移動し、Googleアカウントでログインします。
https://console.firebase.google.com/?hl=jaプロジェクトの作成
プロジェクトの追加のリンクをクリックすると、プロジェクトを登録する画面が表示されるので、プロジェクト名、プロジェクトID、国、地域を入力・選択していきます。
プロジェクトIDとCloud Firestoreのロケーションは後から変更することが出来ないので注意が必要です。
入力・選択を終えたら「プロジェクトを作成」ボタンをクリックします。
Firebase CLIのインストール
Firebaseでは、CLIを用いてプロジェクトの管理、操作、デプロイを行います。以下のコマンドでインストールします。
npm i -g firebase-tools@latest
Firebase CLIでFirebaseにログイン
以下のコマンドでログインします。
firebase login
ログインするとGoogleのアカウント認証ページが表示されるので認証後、CLIからのアクセスを許可します。以下の内容が表示されればログイン成功です。
Success! Logged in as hogehoge@gmail.com
ログアウトは以下のコマンドになります。
firebase logout
プロジェクト用のディレクトリを作成
HostingやFunctionsの機能を利用できるようにFirebase用のプロジェクトディレクトリを作成します。
mkdir firebase_test cd firebase_test
Hostingの設定
Hostingの設定は以下のコマンドで行います。
firebase init hosting
対話形式の質問で、「プロジェクト用のディレクトリがあるか」、「公開用のディレクトリ名は？」、「spaのアプリの設定をするか」等の質問があるので回答していきます。
設定が終わると以下のようなディレクトリ構成になります。
.
|─ functions
|- public
| |- 404.html
| └─ index.html
|- firebaserc
|- gitignore
└─ firebase.jsonFunctionsの設定
Functionsの設定は以下のコマンドで行います。
firebase init functions
対話形式の質問で、「プロジェクト用のディレクトリがあるか」、「使用する言語は(JavaScript or TypeScript) 」、「ESLintを使用するか」等の質問があるので回答していきます。
設定が終わると以下のようなディレクトリ構成になります。
.
|─ functions
| |- node_modules
| |- gitignore
| |- index.js
| |- package.json
| └─ package-lock.json
|- public
| |- 404.html
| └─ index.html
|- firebaserc
|- gitignore
└─ firebase.json簡単なAPIを作成してみる
必要なモジュールのインストール
今回は、RESTful API作成に必要なNode.jsのフレームワーク「Express」とクロスドメイン通信を行うため「cors」パッケージをインストールします。
cd functions npm i express cors
Functions Admin SDKモジュールのインポート
index.jsに以下の内容を追記します。
//firebase functionsのモジュールインポート
const functions = require('firebase-functions');
//firebase admin sdkのモジュールインポート
const admin = require('firebase-admin');
//インスタンスの初期化
admin.initializeApp(functions.config().firebase);
firebase-functionsはFirebase Functions SDKで、HTTPリクエストをトリガするために使用します。
firebase-adminはFirebase Admin SDKで、Realtime Databaseの処理や認証するために使用します。
Expressモジュールのインポートとインスタンス化
index.jsに以下の内容を追記します。
//expressモジュールのインポート
const express = require('express');
//インスタンス化
const app = express();
corsモジュールのインポートとロード
index.jsに以下の内容を追記します。
//corsモジュールのインポート
const cors = require('cors')({origin: true});
//ロード
app.use(cors);
APIの作成
Realtime Databaseにデータを追加してみます。
JSONでユーザー名を送るとテストメッセージをDBに登録し、ステータス201で「result: OK」と返すプログラムです。
//メッセージの投稿
//引数 userName = RealtimeDatabaseのパスposts/:userNameにデータを挿入
function createPost(userName) {
//Realtime Databaseの操作 refで特定ノードの参照をする
let postslsRef = admin.database().ref('posts');
let date1 = new Date();
const defaultData = `{
"messages" : {
"1" : {
"body" : "はじめてのメッセージを投稿してみましょう。",
"date" : "${date1.toJSON()}",
"user" : {
"id" : "test",
"name" : "test"
}
}
}
}`;
//参照先の子ノードの参照とデータの挿入をする
postslsRef.child(userName).set(JSON.parse(defaultData));
}
app.post('/posts', (req, res) => {
let userName = req.body.userName;
createPost(userName);
res.header('Content-Type', 'application/json; charset=utf-8');
res.status(201).json({result: 'ok'});
});
APIを利用可能にする
HTTPリクエストのイベント処理でオブジェクトを外部から呼び出しv1関数からオブジェクトを利用できるようにします。
//オブジェクトを外部から利用可能にする
//HTTPリクエストのイベント処理
exports.v1 = functions.https.onRequest(app);
APIのテスト
firebase serve --only functions --project プロジェクトID Functions URL (v1): http://localhost:5000/プロジェクトID/us-central1/v1
serveコマンドを実行するとテストするためのアドレスが表示されるのでアクセスすることで動作の確認などができます。
PowerShellからJSONをPOSTする
PowerShellからJSONをpostするには、以下の様に記述します。
Invoke-RestMethod -Uri "http://localhost:5000/プロジェクトID/us-central1/v1/posts"
-Method POST -Body ( @{"userName"="test_1"} | ConvertTo-Json) -ContentType 'application/json'
PowerShellからGETする
Invoke-RestMethod -Uri "http://localhost:5000/プロジェクトID/us-central1/v1/posts" -Method GET
functionsの公開
firebase deploy --only functions --project プロジェクトID
「Deploy complete!」のメッセージとともにFunctionsのアドレスが表示されます。このURLがエンドポイントになります。