【Firebase CLI】 initコマンドで初期設定をする(firebase-tools)

こんにちは。ざわかかける！のざわ(@zw_kakeru)です。

今回はFirebaseをCLI(firebase-tools)から使えるようにしてみます。
そのままinitコマンドでプロジェクトへの設定までしようと思いますが、項目が色々と多そうなのでその作業ログです。
端末はMacです。

前提
yarnのインストール
firebase-toolsのインストール
initコマンドで初期設定を行う
完了
おわりに

前提

Firebaseのアカウントを持っていること
端末にNode.jsがインストールされていること

yarnのインストール

Firebase CLIを入れる前にまずyarnを入れます。
yarnはJavaScriptのパッケージを管理してくれるツールで、これ経由でfirebaseを管理するようにします。
yarnがすでに入ってる人はこの手順は不要です。(npmでも多分いいです。)

$ brew install yarn
Error: You have not agreed to the Xcode license. Please resolve this by running:
  sudo xcodebuild -license accept

初手で怒られました。。
先にXcodeのライセンスに同意せよとのことです。
どうもyarnがMac上でビルドプロセスを行う際にXcodeの開発ツールを使用する場合があるっぽいですね。
最近この端末で開発してなかったからな。。知らぬ間にバージョンアップされていたようです。

ひとまず、そこに書かれてるコマンドで同意してから再びyarnを入れてみます。

$ sudo xcodebuild -license accept
$ brew install yarn

これで無事にyarnがインストールされました。

firebase-toolsのインストール

yarnからfirebase-toolsを入れます。

$ yarn global add firebase-tools
yarn global v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "firebase-tools@13.3.1" with binaries:
      - firebase
✨  Done in 24.45s.

無事にv1.22.21が入ったようです。
Node.jsがない人はおそらくここで「Nodeが無いよ」みたいなエラーで止まると思います。
Nodeのインストールはこちらの記事から行ってください。

インストールができたらfirebaseコマンドが使えるようになっているので、ログインを試してみます。

$ firebase login
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?

コマンドを実行すると最初に使用状況をGoogleに送信するか聞かれるのでyかnで回答します。
回答すると自動的にGoogleアカウントのログインページが開くので、Firebaseを使いたいアカウントでログインしてリクエストを許可してください。

許可すると妙にテンションの高いダイアログが表示されますが、これでCLIが利用できるようになりました。
プロジェクト一覧を確認してみましょう。

$ firebase projects:list

すでにGUI上でプロジェクトを作成していればここに一覧として表示されるはずです。

initコマンドで初期設定を行う

firebaseにCLIからアクセスできるようになったら、早速プロジェクトの初期設定を行います。
任意の(プロジェクトルートにしたい)ディレクトリに移動して、initコマンドを実行します。

$ cd hogeDir
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  /Users/hoge/hogeDir

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to
confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◉ Firestore: Configure security rules and indexes files for Firestore
 ◉ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◉ Storage: Configure a security rules file for Cloud Storage
 ◉ Emulators: Set up local emulators for Firebase products

なんか色々選択できるようになるので、ここで自分がこのプロジェクトで使用したいサービスにチェックを入れましょう。
私の場合は今回は以下にチェックを入れました。

Firestore: Configure security rules and indexes files for Firestore
Functions: Configure a Cloud Functions directory and its files
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Storage: Configure a security rules file for Cloud Storage
Emulators: Set up local emulators for Firebase products

以降の章では、ここでチェックを入れた項目について設定方法を記述していきます。

選択が済むと次の質問が表示されます。

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

? 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

すでに存在してるプロジェクトに設定を加えるか、新規でプロジェクトを作成するかを選びます。
私の場合はプロジェクトはすでにあったので「Use an existing project」を選択しました。
すると次にどのプロジェクトに設定するか聞かれるので、これも選択して答えます。

Firestoreの設定

以下の画面が表示されます。

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

セキュリティルールとインデックスを設定するファイル名を教えてくれと言われています。
セキュリティルールとインデックスの意味するところがよく分かっていませんが、要するに任意の設定ファイル名にすることができるみたいです。
何も指定せずにエンターを押すとデフォルトの「firestore.rule」と「firesore.indexes.json」が入力されたのでそれでいきます。

Functionsの設定

以下の画面が表示されます。

=== Functions Setup
Let's create a new codebase for your functions.
A directory corresponding to the codebase will be created in your project
with sample code pre-configured.

See https://firebase.google.com/docs/functions/organize-functions for
more information on organizing your functions using codebases.

Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? TypeScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.js
✔  Wrote functions/tsconfig.json
✔  Wrote functions/tsconfig.dev.json
✔  Wrote functions/src/index.ts
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: undefined,
npm WARN EBADENGINE   required: { node: '18' },
npm WARN EBADENGINE   current: { node: 'v20.11.1', npm: '10.2.4' }
npm WARN EBADENGINE }

added 681 packages, and audited 682 packages in 32s

121 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Functionsで使用する言語を選べ(JS、TS、Python)と言われます。私はTSを選択しました。
するとESLintを使うか聞かれます。リンターはいた方がいいのでYesと選びました。
最後に依存関係をこの場で入れるか聞かれるので、ついでに入れてしまいました。

Hostingの設定

次の画面が表示されます。

=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote dist/index.html

Hostingを使ってデプロイする際のディレクトリ名を指定します。何も入力せずにエンターを押すとデフォルトのpublicが設定されます。
続いてSPAの構成を取るかを聞かれます。私の場合はYesを選びました。
最後にGithubによる自動デプロイをするかを聞かれます。便利なのですが話がややこしくなるので今回はNoを選択しておきます。

Storageの設定

次の画面が表示されます。

=== Storage Setup

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

? What file should be used for Storage Rules? storage.rules
✔  Wrote storage.rules

Storageのセキュリティルールを設定するファイル名を教えてくれと言われてます。
Firestoreの時と同様に任意の設定ファイル名にすることができるみたいです。
何も指定せずにエンターを押すとデフォルトの「storage.rules」ファイルとなります。

Emulatorsの設定

次の画面が表示されます。

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices.
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Authentication Emulator
 ◯ Functions Emulator
 ◯ Firestore Emulator
❯◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator

最初にどのサービスでEmulatorを利用するか聞かれるので、必要なものを選択します。
私の場合は次のサービスを選択しました。

Authentication Emulator
Functions Emulator
Firestore Emulator
hosting Emulator
Storage Emulator

選択が終わると次の画面が表示されます。

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices.
Authentication Emulator, Functions Emulator, Firestore Emulator, Hosting Emulator, Storage Emulator
? Which port do you want to use for the auth emulator? 9099
? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the hosting emulator? 5000
? Which port do you want to use for the storage emulator? 9199
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)?
? Would you like to download the emulators now? Yes

それぞれのエミュレーターが使うポート番号を指定します。
何も入力せずにエンターを押すとデフォルトのポート番号が指定されていきます。
その次にEmulator UIを使うか、使う場合はポート番号を指定します。
最後にライブラリをこの場でインストールするか聞かれます。

完了

完了です。

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

✔  Firebase initialization complete!

complete!の文字列が表示され、無事に初期設置が完了しました。
今回設定した項目は全てfirebase.jsonと.firebasetcに記述されているので、今後変更したくなった場合はこれらのファイルを直接編集しましょう。
デプロイはdeployコマンドで実行可能です。

おわりに

整理しながらできたおかげでFirebaseへの理解が深まりました。
こういう初期設定系のメモは自分が何をやったか後から参照できて便利ですし、他の人も「お、こうやってやればいいのか」という道しるべになるので誰にとってもお得でいいですね。
これからのFirebaseでの開発が捗りそうです。

今回は以上です。