【 Firebase 】Vue.jsプロジェクトにおけるFirebaseの初期化手順

こんにちは、Jeannieです。 Firebase を使ったVue.jsアプリケーション作成のために、前回までいくつか記事を書いてきました。

今回は、Vue.jsプロジェクト内でFirebaseの初期化を行うための手順をまとめました。

トピック

前提

大まかな流れは以下の通りです。

さっそくやっていきましょう。

まずは、Firebase CLIをインストールします。

ターミナルを起動して、以下のコマンドを実行します。

yarn global add firebase-tools

インストール完了後は、以下のコマンドを実行してバージョンが表示されることを確認してください。

firebase -V

Firebase CLIのインストールはこれで完了です。

続いて、Vue.jsプロジェクトに対してFirebaseの初期化を行っていきます。

これをやることによって、どのFirebaseプロジェクトと連携するのか、どんなサービスを使うのかをVue.jsプロジェクトが認識するようになります。

まずは、Firebaseに対してGoogleアカウントでログインします。

以下のコマンドを実行しましょう。

firebase login

「Allow Firebase to collect CLI usage and error reporting information?」と表示されたら、そのままEnterを押して進みます。

すると、ブラウザが起動するのでGoogleアカウントでログインしてください。

「Firebase CLI が Google アカウントへのアクセスをリクエストしています」と表示されたら「許可」をクリックします。

ターミナルに戻って「Success! Logged in as xxxxxx」と表示されていればOKです。

続いて、Vue.jsプロジェクトに対してFirebaseの初期化を行います。

初期化を行いたいプロジェクトのディレクトリにターミナルで移動して、以下のコマンドを実行します。

firebase init

すると、初期化が開始されますので、Firebaseのどのサービスを使用するのかを選択します。

今回は、Frirestore(データベース)、Functions(サーバー側処理)、Hosting(デプロイ関連)を選択しています。

ここは、作成するアプリケーションに応じて必要なものを選択してください。

続いて、どのFirebaseプロジェクトと連携するかを選択します。

このタイミングで新たにFirebaseプロジェクトを作成する場合は、「Create a new project」を選択して作成してください。

本記事では、既にFirebaseプロジェクトを作成していますので、「Use an existing project」を選択して、そちらを使用するようにします。

Firebaseプロジェクトの作成手順については別の記事でまとめていますので、作成していない方はこちらの記事をどうぞ。

そして、実際に連携するFirebaseプロジェクトを選択します。

すでに「demo-application」というFirebaseプロジェクトを作成していましたので、そちらを選択します。

その後もいくつか選択していきますが、基本的にはEnterを押していけばOKです。

今回はシングルページアプリケーション(SPA)にしていきたいので、最後の質問「Configure as a single-page app (rewrite all urls to /index.html)?」だけはYを入力してEnterとしてます。

Firebaseの初期化は以上で完了です。

これで、Vue.jsがどのFirebaseプロジェクトと連携すべきかを認識してくれるようになりました。