Firebaseは静的サイトのホスティングからデータベースの提供まで様々な機能を同時に受けられるサービスです。今回プライベートで初めてFirebaseを使ってみたので、Firebaseのいいところを以下の4つの機能から紹介したいと思います。
- 静的サイトのホスティング
- Cloud Functions
- Realtime Database
- User Authentication
1. 静的サイトのホスティング
Firebaseではコマンドを打つだけで簡単にHTMLやCSS、JavaScriptなどのアセットをサイトとして公開することができます。
まず、npmでfirebaseのツールをインストールします。
$ npm install -g firebase-tools
その後、Firebaseの自分のアカウントへログインします。
$ firebase login
あとはデプロイコマンドを打つだけでサイトのホスティングが完了します。
$ firebase deploy
2. Cloud Functions
AWSでいう、lambda functionsのような機能が「Cloud Functions」としてFirebaseでは提供されています。具体的には、サーバーサイドを単一の関数でマイクロサービス的に実装する方法です。例えば以下のような処理を記述します。
exports.helloHttp = (req, res) => { res.send('hello world'); };
すると、http://example.com/helloHttp でアクセスすると、<code>hello world</code> とサーバーからレスポンスが帰ってきます。
普通に、npm install して読み込んだモジュールもCloud Functionのscriptで使用することが可能です。
以下はあるURLにアクセスしてきた際にBasic認証を適応する例です。
const functions = require('firebase-functions') const express = require('express') const basicAuth = require('basic-auth-connect') const path = require('path'); const app = express() app.all('/*', basicAuth(function(user, password) { return user === 'user' && password === 'pass'; })); app.use(express.static(path.resolve(__dirname, 'dist'))); exports.app = functions.https.onRequest(app);
firebase.jsonに例えば以下の記述を書いて、アクセスしてくるURLごとにRewriteルールを適応することもできます。
... "rewrites": [ { "source": "**", "function": "app" } ] ...
3. Realtime Database
Firebaseでは用意されたデータベースにJavaScriptなどを使って簡単にデータを挿入したり更新したりする機能が用意されています。利用するには以下のようにインストールします。
$ npm install firebase --save
以下のようにテーブルを呼び出せます。
const db = firebase.firestore(); const collection = db.collection('item');
テーブルに新しくレコードを追加する場合は以下のように記述します。オブジェクトを代入するだけなのでとてもラクです。
collection.add(object);
レコードを削除する場合は、以下のようにレコードのidを利用します。
collection.doc(id).delete();
また以下のようにwhereメソッドを使ってレコードを検索し、getメソッドで取得することができます。get()はPromiseを返すのでasync awaitを使って取得すると楽です。
const snapshot = await colors.where('itemMakerId', '==', itemMaker.id).get();
4. User Authentication
また、実際に自分で作ると大変なユーザー認証やサインイン、サインアウトの機能もFirebaseを使えば簡単に実装できます。以下はemailとpasswordを使ってサインインするメソッド例です。
await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION); const user = await firebase.auth().signInWithEmailAndPassword(email, password);
サインアウトは以下のように記述します。
firebase.auth().signOut();
簡単ですね!
まとめ
趣味のプロダクトのために今さっと触っていますがFirebaseは本当に便利です。無料のSparkプランでもデータベースなら1GB、ストレージなら5GB使えます。テストで何か作る分には無料枠でも十分そうですね。
これからどんどん活用していきたいと思います。
![]()
Firebase
Get started with Firebase for free, and scale worldwide to millions of users, paying only for what you use.