はじめに

Google Firebaseを利用すると、Webアプリケーションのサーバーサイドを簡単に構築することができます。

Firebaseは、簡単に言えばAPIサーバーやファイルサーバー、Webサーバー等をサーバーレスで構築できる仕組みを提供してくれるものです。

昔はWebアプリケーションを作成しようとした場合、サーバーマシンを用意してOSをインストールし、ApacheやMySQLなどのサーバーアプリをインストールして設定するなど、目的とするWebアプリケーションを作成すること以外にやらなければならないことが数多くありました。

また、Webアプリケーションのユーザーが増えてサーバーを増築するようなことになると、同様の作業を何度も繰り返すような必要がありました。

Firebaseは、このような多くの作業を肩代わりしてくれます。

そのためFirebaseの利用者は、Webアプリケーションの作成のみに集中することができ、少人数でWebアプリケーションの開発・運用を行うことが可能となります。

やる気があれば、一人でもWebアプリケーションを一から構築・運用することも現実的でしょう。

ここでは、Firebaseを利用してブログシステムっぽいものを作成する手順をチュートリアル的に公開していきます。その過程において、Firebaseの機能や使い方を伝えることができればと考えています。

プログラミング言語にはJavascript(TypeScript)を利用します。

前提とするもの

以下については既に理解しているものとして記述していきます。

• JavaScript(TypeScript)
• Node.js、npmについて

環境構築

Firebase CLI のインストール

ここでは、FirebaseのCLIを利用して環境を構築していきます。FirebaseのCLIはnpmのパッケージとして公開されているため、npmコマンドにてインストールすることができます。なお、Node.jsはv10以降でなければCLIが動作しないため、古いバージョンを利用している場合はアップグレードする必要があります。

$ npm install -g firebase-tools

インストールが完了すれば、firebaseコマンドが利用可能になります。

Firebase CLIとGoogleアカウントの紐づけ

次にFirebaseのプロジェクトの作成を行いたいのですが、そのためにはFirebase CLIとGoogleアカウントを紐づけておく必要があります。FirebaseはGoogleのサービスであり、プロジェクトは紐づけたGoogleアカウントの中に作成されるイメージとなります。

紐づけはログインコマンドで行うことができます。

$ firebase login

初回ログイン時は「利用情報をGoogleに提供してよいですか？」という趣旨の質問が表示されるため、好きに回答します。

すると次にブラウザが開いて、Googleアカウントへのログインを要求されます。GoogleアカウントにログインするとFirebase CLIへのアクセス許可が求められるので、許可をOKとすればCLIのログインが成功します。

Firebaseプロジェクトの作成

プロジェクトの作成もCLIから行うことができます。適当にディレクトリを作成し、その中で作成コマンドを実行します。ここではcmnty2020という名前で作成しました。

$ mkdir cmnty2020
$ cd cmnty2020
$ firebase init

実行すると派手なメニューが表示され、カーソルキーとスペースバーでFirebaseの何を利用するのかを選択することができます。
ここではとりあえず使いそうなものを全部選択しておきます。

DatabaseはFirestoreの前身のサービスのため、Firestoreを利用するならDatabaseを選択する必要はありません。

Enterで決定すると、次は「既存のプロジェクトを使用するのか？新しく作成するのか？」というような選択肢がでるため、「新しく作成する」を選択します。Enterで決定します。

次に、プロジェクトIDを何にするのかが問われるため、適当に入力します。Enterで決定するとプロジェクト名称を聞かれるので、そのままEnterを入力します(省略するとプロジェクトIDと同じになる)

するとプロジェクト作成中の表示になり、そのあとFirestoreのセットアップのところで失敗します。

どうやらFirestoreの初期化まわりがCLIからでは対応できていないようです。

そのため、画面の最後に表示されているURLを開いてWebコンソールから設定します。
URLを開くと以下のような画面が表示されるため、データベースの作成をクリックします。

セキュリティルールの設定画面が表示されるので、とりあえず厳しめに「本番環境で開始」を設定しておきます。この設定にすると、明示的にアクセスを許可する設定をしない限りはデータベースにアクセスすることができなくなります。

次に進むと、データの置き場所をどこにするかというリージョンの設定画面が表示されるので、好きなところを選択します。地理的に近いところを選んだほうがアクセス速度は速くなります。

ここではasia-northeast1(東京)を選択しました。

完了を押せば、Firestoreのセットアップは終了です。ということでCLIに戻って、再度初期化コマンドを実行します。

$ firebase init

何を利用するのかを選択します。

一回目の$ firebase initで既にプロジェクトは作成されているため、今度は「既存のプロジェクトを利用する」を選択します。

するとプロジェクト名が表示されるため、選択してEnterで決定します。

Firestoreのセットアップ

今度はFirestoreのセットアップの開始に成功します。「ファイル名を何にするのか？」という質問が二つほど表示されるので、そのままEnterを入力します(デフォルトの名称が使用される)

Cloud Functionsのセットアップ

次に「Cloud Functionsで利用する言語を何にするのか？」という質問が表示されるので、好きなほうを選択します。Cloud FunctionsはAPIを作成したりするのに利用できるサーバーレスの環境になります。ここではTypeScriptを選択します。

すると次は「TSLintを利用しますか？」というような質問が表示されます。TSLintはTypeScriptの文法をチェックして警告してくれる便利ツールなので、ここでは利用するように選択します。

次に、「必要なnpmの依存パッケージを今インストールしますか？」という質問が表示されるので、Y(yes)を入力します。今インストールしなくても、どのみち後でインストールすることになります。

Hostingのセットアップ

次に、Hostingで利用するディレクトリ名を尋ねられます。そのままEnterを入力します。デフォルトが利用されます。

シングルページアプリケーションにするのか？と尋ねられるので、とりあえずyを入力しておきます。

Storageのセットアップ

Storageの設定ファイル名を何にするのか尋ねられます。そのままEnterを入力し、デフォルト設定とします。

エミュレータのセットアップ

どのエミュレータを利用するのかが尋ねられます。カーソルキーとスペースバーで、使いそうなものを選択します。

そのあとエミュレータの設定についていくつか質問されますが、すべてEnterでデフォルト値とします。

ポート番号がデフォルトで設定、UIを利用する、今はエミュレータをインストールしない、という設定になります。

Done !!

環境設定は以上です。

プロジェクト作成時点でのディレクトリ構造は以下になります。

functionsディレクトリの下にはCloud Functions用のファイルが配置されます。主にAPIを作成するのに利用します。

publicの下にはHosting用のファイルが配置されます。この下のファイルがブラウザからアクセスできるようになります。

プロジェクトのディレクトリ直下には設定ファイルがいくつか配置されます。

注意

Firebaseは無料のサービスではありません。上記設定時点ではSparkプランというものに設定されており、一定の使用量までは無料ですが、一定量以上の利用は有料となります。

詳しくは

を参照してください。

続く…