環境構築
Firebase

Firebaseの環境構築


この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。

前記事:AngularのPipeを使って、日付を変換する

次記事:AngularのプロジェクトにFirebaseを導入する



この記事で行うこと

本稿では、Firebaseの環境構築を行っていきます。


Firebaseとは

2014年にGoogleに買収された、MBaas(Mobile Backend as a Service)プラットフォームです。

Realtime DatabaseやCloud Storage、Hostingなど、モバイルアプリ、WEBアプリの開発に必要なインフラを提供しています。

インフラの種類によって有料、無料のプランが異なりますが、開発レベルの使用であればほとんどのインフラを無料で利用することができます。

これまでバックエンド開発にかけていた手間がかなり少なくなるので、フロントエンドの開発に集中したい、スタートアップで素早くサービスを構築したいという方にオススメです。


実装内容


Firebaseのプロジェクトを作成する

Firebaseを利用する場合は、大前提としてGoogleのアカウントを取得する必要があります。

まだGoogleアカウントを取得していない場合は、無料版もあるのでそちらを取得してください。

アカウントの準備ができたら、Firebaseのコンソールにログインします。

右上にある「コンソールへ移動」を押して、コンソール画面に遷移します。

Firebase (1).png

コンソールに移動したら、画面中央にある「プロジェクトを追加」をクリックします。

表示される指示に従って、新しいプロジェクトを作成します。

NgChat – 概要 – Firebase console.png

これでプロジェクトの作成は完了です。

今回作成するのはWEBアプリなので、画面中央の右側にある「ウェブアプリにFirebaseを追加」をクリックします。

fb.001.jpeg

このFirebaseプロジェクトの利用に必要なapiKeyなどが表示されます。

後で必要になりますので、メモ帳などに保存しておいてください。


Firebase CLIをインストールする

Firebaseを利用するには、「Firebase CLI」が必要になります。

これによって、ローカル環境からリモートのFirebaseを操作できるようになります。

npm install -g firebase-tools

// ハンズオンを進める場合はバージョンを合わせるため、
// npm install -g firebase-tools@4.2.1
// でインストールしてください。

Firebase CLI をインストールしたら、Googleアカウントを使用してログインします。

firebase login

? Allow Firebase to collect anonymous CLI usage information? y

上記コマンドを実行すると、Googleアカウントの認証画面に遷移します。

FirebaseCLIのアクセス許可をすると、次の画面が表示されログインが完了します。

Firebase CLI.png

これでFirebaseの環境構築は完了です。

次からはAngularプロジェクトにFirebaseの導入をしていきます。