先日(2018年10月19日)、Angular 7がリリースされました。その際に投稿されたAngular Blogの記事にうまくいっているパートナーのプロジェクトとして「angularfire2」が紹介されていました。angularfire2は、FirebaseをAngularで扱うのをサポートするAngular公式のライブラリで、安定版が最近リリースされたところです。Firebaseは前々から興味があったので、Angular 7もリリースされたことなので、ほんのちょっとですがFirestoreからデータを取得して表示するアプリを作って、Firebase Hostingにデプロイするまでを試してみました。メモ書き程度にまとめておきます。
目次
はじめに
Firebaseは、Googleが提供するiOSやAndroid、ウェブアプリの開発を支援するツールです。データベースやストレージなどアプリの開発に必要なもの、パフォーマンス監視やテストなど品質を高めるためのもの、GoogleアナリティクスやA/Bテストなどビジネスを促進するためのものなどさまざまなツールが用意されています。
Cloud FirestoreやCloud Functions、Firebase Authenticationといったいわゆるサーバーレスアーキテクチャを実現するツールが充実しているのも特徴です。しかも「趣味に熱中する人のための寛大な制限」を謳ったSparkプランという無料プラン(クレジットカードの登録も必要なし)が用意されているのも嬉しいポイントです。試してみる価値ありです。
今回私が試したのは、主に以下の内容です。
- angularfire2を使って、AngularアプリからCloud Firestore(データベース)のデータを取得して表示
- Firebaseコンソール上で、Cloud Firestoreの作成、データ登録
- Firebase CLIを導入
- AngularアプリをFirebase CLIを使って、Firebase Hostingにデプロイ
一通り、アプリを作ってデプロイするまでを試しています。ぜひ参考にしていただければと思います。なお、Firebaseの申し込みやプロジェクトの作成については省略しています。
Angularの開発環境を準備する
まずは、Angularの開発環境として、Angular CLIをインストールします。Angularのプロジェクトをコマンド一発で作成してくれます。
Angular CLIをインストールしたら、Angular CLIで用意されているng new
コマンドを使って、プロジェクトを作成します。コマンドの引数には、プロジェクト名を指定します。今回は、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
ファイルを開いて、以下を記述します。
ポイントは、以下の通りです。
- Angularアプリ内でFirestoreを扱うために
AngularFirestore
を読み込んでDIしている - itemsというコレクション(いわゆるテーブル)からデータを取得している
- 取得するデータはObservable型になっている
- テンプレート側ではasync pipeを使って直接データをsubscribeしている
環境変数にFirebaseの設定を登録する
AngularでFirebaseを使用するために、/src/environments/environment.ts
を開いて、Firebaseの設定情報を登録します。environment.ts
ファイルは環境ごとに使い分けたい情報を登録する為のファイルです。
Firebaseの設定情報は、プロジェクトのFirebaseコンソールからコピーできます。まずは、プロジェクトの設定画面から「ウェブアプリにFirebaseを追加」をクリックします。
表示された画面の枠内の部分が設定情報です。コピーして、上記のenvironment.ts
ファイルの該当部分に貼り付けます。
NgModuleに登録する
コンポーネントで使用するモジュールやFirebaseの設定情報などの登録を行います。app.module.ts
ファイルを開いて、以下を記述します。
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
コマンドで行います。
Googleアカウントを選択し、ページに従って、ユーザー認証手続きを進めます。
認証が成功したら、以下の画面が表示されます。
ターミナル上にも以下が表示されます。
プロジェクトディレクトリでFirebase CLIを使用できるようにする
プロジェクトディレクトリでFirebase CLIを使えるようにfirebase init
コマンドを実行します。
firebase init
コマンドを実行すると以下のような表示となり、対話形式での設定が始まります。まずは、使用したい機能について問われます。今回は、FirestoreとHostingをスペースキーで選択して、エンターキーを押します。
次に、どのプロジェクトディレクトリをFirebaseプロジェクトとするか問われます。今回は、angularfire2-sampleを選択します。
次に、Firestoreで使うセキュリティルールを記述したファイル名を問われます。ここでは、デフォルトのfirestore.rules
で良いので、そのままエンターキーを押します。
次に、Firestoreで使うインデックス管理用のファイル名を問われます。ここも、デフォルトのfirestore.indexes.json
で良いので、そのままエンターキーを押します。
次に、公開するディレクトリを問われます。Angular CLIでプロダクションビルドをすると、dist/xxxxx
以下にファイルが作成されます。今回は、dist/angularfire2-sample
と入力して、エンターキーを押します。
次に、シングルページアプリケーション(SPA)として設定するか問われます。今回は、SPAなので、yと入力して、エンターキーを押します(すべてのURLが/index.html
に書き換えられます)。
最後に、dist/angularfire2-sample/index.html
ファイルがすでに存在している場合は、上書きするかどうか問われます。上書きする必要はないので、Noを入力してエンターキーを押します。
以上で、設定は完了です。.firebaserc
、firebase.js
、firestore.indexes.json
、firestore.rules
などのファイルが作られ、プロジェクトディレクトリでFirebase CLIが使えるようになります。デプロイも行えるようになっています。
Angularアプリのプロダクションビルドを行う
作成したAngularアプリをデプロイするためにプロダクションビルドを用意します。
プロダクションビルド用の設定が行われていないと以下のエラーが出るかと思います。
プロダクションビルド用の設定ファイルであるsrc/environments/environment.prod.ts
を開いて、Firebaseの設定情報を入力します。
再度、ng build --prod
を実行します。特に問題がなければ、dist
ディレクトリにプロダクション用にビルドされたファイルが生成されます。
あとは作成したプロダクション用のファイルをデプロイするだけです。
Firebase Hostingにデプロイする
まずデプロイする前に、firebase serve
コマンドを実行すると、アプリのテストをローカルで行うことができます。アプリがデプロイできる状態になっているか事前に確認しておくとよいでしょう。コマンド実行後、「http://localhost:5000」にアクセスすると確認できます。
ローカルのテストを行って、デプロイするアプリに問題ないことを確認したら、firebase deploy
コマンドを実行します。Firebase Hostingへのデプロイが直ちに実行されます。Deploy complete!が表示されたら成功です。
Hosting URLが表示されるので、ブラウザーでアクセスして確認してみましょう。
問題なくアプリが表示されたら、デプロイ成功です。ちなみに、Hosting URLは、Firebaseのコンソール上で独自ドメインに設定することも可能です。
まとめ
以上、Firestoreからデータを取得して表示するAngularアプリを作って、Firebase Hostingにデプロイするまでの紹介となります。最初の準備さえ整えてしまえば、あとはアプリの開発に集中できるようになっていると思いました。Firebaseのコンソールも使いやすい印象です。
Angularは、Firebase(Firestore)との親和性が高いとも言われていますが、まだ今回のサンプルだけだとその真意は確かめられませんでした。それには、angularfire2を如何に使いこなすかにかかっていると思います。angularfire2のドキュメントがかなり充実しているので、次はCRUD処理の実装やngrxの導入などを試してみたいと思っているところです。余裕があれば、その辺りの実装方法なども紹介したいと思います。
今回のサンプルはGitHubにもアップロードしています。参考にしてもらえればと思います。
コメント