はじめに

Firebaseは、Googleが提供するiOSやAndroid、ウェブアプリの開発を支援するツールです。データベースやストレージなどアプリの開発に必要なもの、パフォーマンス監視やテストなど品質を高めるためのもの、GoogleアナリティクスやA/Bテストなどビジネスを促進するためのものなどさまざまなツールが用意されています。

• Firebase – Google
• Firebase プロダクト一覧

Cloud FirestoreやCloud Functions、Firebase Authenticationといったいわゆるサーバーレスアーキテクチャを実現するツールが充実しているのも特徴です。しかも「趣味に熱中する人のための寛大な制限」を謳ったSparkプランという無料プラン（クレジットカードの登録も必要なし）が用意されているのも嬉しいポイントです。試してみる価値ありです。

今回私が試したのは、主に以下の内容です。

一通り、アプリを作ってデプロイするまでを試しています。ぜひ参考にしていただければと思います。なお、Firebaseの申し込みやプロジェクトの作成については省略しています。

Angularの開発環境を準備する

まずは、Angularの開発環境として、Angular CLIをインストールします。Angularのプロジェクトをコマンド一発で作成してくれます。

Angular CLIをインストールしたら、Angular CLIで用意されているng newコマンドを使って、プロジェクトを作成します。コマンドの引数には、プロジェクト名を指定します。今回は、angularfire2-sampleとしました。

プロジェクトが作成されたいら、プロジェクトディレクトリ内に移動し、ng serveコマンドで、ローカルサーバーを起動します。

$ cd angularfire2-sample
$ ng serve

ブラウザーで、http://localhost:4200にアクセスすると、Angularのデフォルトページが表示されます。この状態でAngularの開発を進めます。更新したファイルを保存するたびに、ブラウザーの画面が更新されます。

以上、これでAngularの開発環境が構築されました。

angularfire2を使ってAngularアプリを実装する

angularfire2は、FirebaseをAngularで扱うのをサポートするAngular公式のライブラリです。ここではangularfire2を使って、Cloud Firestore（Firebaseで利用できるデータベース）と連携したAngularアプリの構築例を紹介します。Firesoreに登録したデータを取得して、表示させるだけの簡単なアプリです。

angularfire2をインストールする

プロジェクトディレクトリ内で以下のコマンドを実行し、firebaseとangularfire2をインストールします。

コンポーネントの実装

今回はどんなものか試すだけなので、angularfire2のドキュメントに掲載されているものを使用します（若干テンプレート部分を変更しています）。

app.component.tsファイルを開いて、以下を記述します。

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of (items | async)">
      name: {{ item.name }} / age: {{ item.age }}
    </li>
  </ul>
  `,
})
export class AppComponent {
  items: Observable<any[]>;

  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

ポイントは、以下の通りです。

環境変数にFirebaseの設定を登録する

AngularでFirebaseを使用するために、/src/environments/environment.tsを開いて、Firebaseの設定情報を登録します。environment.tsファイルは環境ごとに使い分けたい情報を登録する為のファイルです。

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

Firebaseの設定情報は、プロジェクトのFirebaseコンソールからコピーできます。まずは、プロジェクトの設定画面から「ウェブアプリにFirebaseを追加」をクリックします。

表示された画面の枠内の部分が設定情報です。コピーして、上記のenvironment.tsファイルの該当部分に貼り付けます。

NgModuleに登録する

コンポーネントで使用するモジュールやFirebaseの設定情報などの登録を行います。app.module.tsファイルを開いて、以下を記述します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
  ],
  providers: [AngularFirestore],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angularアプリの実装は以上です。もちろん、まだFirestoreにデータがない状態なので、何も表示されません。この後、Firestoreを新規で作成しデータを登録していきます。

Cloud Firestoreでデータベースを作成する

Cloud Firestoreは、Firebaseで用意されているクラウドデータベースで、「クエリと自動スケーリング機能を備えた次世代のRealtime Datebase」と紹介されています。MongoDBと同じようにドキュメント指向のいわゆるNoSQLのデータベースです。

Firebaseでは、Realtime Databaseというデータベースも選択可能で、angularfire2でもRealtime Databaseに対応していますが、Firestoreの方が新しい主力データベースということなので、まだベータ版ですがこちらを使用します。

Cloud Firestoreでデータベースを作成する

プロジェクトのFirebaseコンソールのDatabase画面に進み、Cloud Firestoreの「データベースの作成」をクリックします。

今回はお試しで使用するので、「テストモードで開始」を選択して、「有効にする」をクリックします。

これでCloud Firestoreが使えるようになりました。

コレクションにドキュメントを登録する

Firestoreが作成されると、Database画面が以下のようなFirestoreの管理画面になります。さっそくコレクションにドキュメントを登録していきます。

ちなみにFirestoreでは、コレクションはいわゆるテーブル、ドキュメントはデータのことを言います。

新たにコレクションを作成するために、「コレクションを追加」をクリックします。

「コレクションID（コレクションの名前）」を入力して、「次へ」をクリックします。ここでは、上記のAngularアプリの実装に合わせて、itemsというコレクションIDにしています。

次にコレクションに登録するドキュメントを作成します。「ドキュメントID（自動入力対応）」、「フィールド」、「タイプ」、「値」を入力して、「保存」をクリックします。ここでは、上記のAngularアプリのモデルに合わせて、「フィールド」は、name、ageとしています。

一通りドキュメントの登録が完了すると、Firestoreの管理画面は以下のようになります。

Angularアプリを起動して確認する

ここで改めて、上記で作成したAngularアプリを起動してみます。

「http://localhost:4200」にアクセスして、Firestoreに登録したデータが表示されることを確認します。

これでFirestoreからデータを取得して表示するAngularアプリが作れました。

Firebase CLIを使ってFirebase Hostingにデプロイする

Firestoreを使ったAngularアプリが作れるようになったので、最後にデプロイする方法も紹介しておきます（ここからが意外と大変です）。

デプロイはFirebaseで提供されているFirebase CLI使って行います。デプロイ先は、こちらもFirebaseで提供されているFirebase Hostingを使用します。

Firebase CLIをインストールする

Firebase CLIを使用するには、firebase-toolsが必要です。まず、グローバル環境にfirebase-toolsをインストールします（すでにインストールされている場合は必要ないです）。

ユーザー認証を行う

Firebase CLIを使用するには、ユーザー認証が必要です。ユーザー認証がなされていないと、以下のようなエラーが出ます。

ユーザー認証は、firebase loginコマンドで行います。

$ firebase login

? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

Googleアカウントを選択し、ページに従って、ユーザー認証手続きを進めます。

認証が成功したら、以下の画面が表示されます。　

ターミナル上にも以下が表示されます。

プロジェクトディレクトリでFirebase CLIを使用できるようにする

プロジェクトディレクトリでFirebase CLIを使えるようにfirebase initコマンドを実行します。

firebase initコマンドを実行すると以下のような表示となり、対話形式での設定が始まります。まずは、使用したい機能について問われます。今回は、FirestoreとHostingをスペースキーで選択して、エンターキーを押します。

次に、どのプロジェクトディレクトリをFirebaseプロジェクトとするか問われます。今回は、angularfire2-sampleを選択します。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ angularfire2-sample-xxxxx (angularfire2-sample)
  [create a new project]

次に、Firestoreで使うセキュリティルールを記述したファイル名を問われます。ここでは、デフォルトのfirestore.rulesで良いので、そのままエンターキーを押します。

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? (firestore.rules)

次に、Firestoreで使うインデックス管理用のファイル名を問われます。ここも、デフォルトのfirestore.indexes.jsonで良いので、そのままエンターキーを押します。

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? (firestore.indexes.json)

次に、公開するディレクトリを問われます。Angular CLIでプロダクションビルドをすると、dist/xxxxx以下にファイルが作成されます。今回は、dist/angularfire2-sampleと入力して、エンターキーを押します。

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) dist/angularfire2-sample

次に、シングルページアプリケーション（SPA）として設定するか問われます。今回は、SPAなので、yと入力して、エンターキーを押します（すべてのURLが/index.htmlに書き換えられます）。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

最後に、dist/angularfire2-sample/index.htmlファイルがすでに存在している場合は、上書きするかどうか問われます。上書きする必要はないので、Noを入力してエンターキーを押します。

? File dist/angularfire2-sample/index.html already exists. Overwrite? No

✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

以上で、設定は完了です。.firebaserc、firebase.js、firestore.indexes.json、firestore.rulesなどのファイルが作られ、プロジェクトディレクトリでFirebase CLIが使えるようになります。デプロイも行えるようになっています。

Angularアプリのプロダクションビルドを行う

作成したAngularアプリをデプロイするためにプロダクションビルドを用意します。

プロダクションビルド用の設定が行われていないと以下のエラーが出るかと思います。

プロダクションビルド用の設定ファイルであるsrc/environments/environment.prod.tsを開いて、Firebaseの設定情報を入力します。

export const environment = {
  production: true,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

再度、ng build --prodを実行します。特に問題がなければ、distディレクトリにプロダクション用にビルドされたファイルが生成されます。

あとは作成したプロダクション用のファイルをデプロイするだけです。

Firebase Hostingにデプロイする

まずデプロイする前に、firebase serveコマンドを実行すると、アプリのテストをローカルで行うことができます。アプリがデプロイできる状態になっているか事前に確認しておくとよいでしょう。コマンド実行後、「http://localhost:5000」にアクセスすると確認できます。

$ firebase serve

ローカルのテストを行って、デプロイするアプリに問題ないことを確認したら、firebase deployコマンドを実行します。Firebase Hostingへのデプロイが直ちに実行されます。Deploy complete!が表示されたら成功です。

$ firebase deploy

=== Deploying to 'angularfire2-sample-xxxxx'...

i  deploying firestore, hosting
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
i  hosting[angularfire2-sample-xxxxx]: beginning deploy...
i  hosting[angularfire2-sample-xxxxx]: found 7 files in dist/angularfire2-sample
✔  hosting[angularfire2-sample-xxxxx]: file upload complete
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[angularfire2-sample-xxxxx]: finalizing version...
✔  hosting[angularfire2-sample-xxxxx]: version finalized
i  hosting[angularfire2-sample-xxxxx]: releasing new version...
✔  hosting[angularfire2-sample-xxxxx]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/angularfire2-sample-xxxxx/overview
Hosting URL: https://angularfire2-sample-xxxxx.firebaseapp.com

Hosting URLが表示されるので、ブラウザーでアクセスして確認してみましょう。

問題なくアプリが表示されたら、デプロイ成功です。ちなみに、Hosting URLは、Firebaseのコンソール上で独自ドメインに設定することも可能です。

まとめ

以上、Firestoreからデータを取得して表示するAngularアプリを作って、Firebase Hostingにデプロイするまでの紹介となります。最初の準備さえ整えてしまえば、あとはアプリの開発に集中できるようになっていると思いました。Firebaseのコンソールも使いやすい印象です。

Angularは、Firebase（Firestore）との親和性が高いとも言われていますが、まだ今回のサンプルだけだとその真意は確かめられませんでした。それには、angularfire2を如何に使いこなすかにかかっていると思います。angularfire2のドキュメントがかなり充実しているので、次はCRUD処理の実装やngrxの導入などを試してみたいと思っているところです。余裕があれば、その辺りの実装方法なども紹介したいと思います。

今回のサンプルはGitHubにもアップロードしています。参考にしてもらえればと思います。

• maechabin/angularfire2-sample