前のパートに戻る 完了して次のパートへ  

  1-3 Firebase プロジェクトの初期化

この章では FirebaeCLI を使って、作成した Nuxt アプリケーションと Firebase のプロジェクトを CLI で連携出来るようにします。設定することで、アプリケーションのデプロイなどがコマンドラインから行えるようになります。

プロジェクト配下 で、以下のコマンドを実行しましょう。(npm run dev で起動したままの人は別ターミナルを立ち上げるか、ctl + alt + c で停止させましょう)

$ firebase init

連携する機能の選択


連携する機能を聞いてくるので、以下を選択します。(spaceキーで選択できます)

  • Firestore
  • Hosting
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◉ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

連携するプロジェクトの選択


次に紐つける Firebase のプロジェクトを選択します。 すでに Firebase のプロジェクトは作成してあるので Use an existing project を選択しましょう。

(今回は説明の都合上、先にブラウザでプロジェクトを作成してしまいましたが、Create a new project を選択することで、CLI からでも新規プロジェクトを作成することが可能です。)

? Please select an option:
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

先程作成したプロジェクトを選択しましょう。

? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ tech-chat-0000 (tech-chat)

Firestore


Firestore のセキュリティルールを CLI で設定することが出来ます。こちらは初期値のまま Enter で次に進みます。(後ほど別の章で詳しく説明します)

=== 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)

プロジェクトの構成ファイル


Firebase プロジェクトをデプロイする時に使用します。こちらも初期値のまま Enter で次に進みます。

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)

Hosting


firebase のプロジェクトをデプロイする時に実際にデプロイするディレクトリ名を設定します。nuxt は build するとdistというディレクトリが作成されるので今回はdistと入力しましょう。

=== 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? dist

リダイレクトページの設定


存在しない URL にアクセスしたときの動きを設定します。 y を入力し、存在しないページにアクセスした場合、TOP ページにリダイレクトするようにしましょう。

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

最後に、以下のように complete! と表示されれば OK です。

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

✔  Firebase initialization complete!

Nuxt のアプリケーション配下に以下のディレクトリとファイルが作成されているか確認してみましょう。

  • .firebaserc
  • firebase.json
  • firestore.indexes.json
  • firestore.rules

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?