Zenn
🔥

「Firebase CLI」でFlutterアプリとFirebaseの接続をしてみる

2024/05/02に公開
Firebase
Flutter
nvm
tech

はじめに

FlutterアプリとFirebaseの接続に結構手こずったため、今後の自分のために残しておきます。同じようにうまくいっていない人がいれば、是非ご覧ください。

環境

  • Windows11

導入手順

基本、Firebaseの公式ドキュメントの通りに進めます。しかし、ドキュメントの通りに進めてもうまくいかない部分があるので、補足をしながら進めていきます。
https://firebase.google.com/docs/cli?hl=ja#sign-in-test-cli

Firebaseプロジェクトの作成

まず最初に、Firebaseでプロジェクトの作成を行います。初期化だけ行えば問題ありません。
https://firebase.google.com/?hl=ja

nvmをインストール

nvm（Node Version Manager）は、その名の通りNode.jsのバージョンを管理するものです。nvmを利用することで、簡単にNode.jsのバージョンを切り替えられます。今回は、Windows用のnvmを利用します。

  1. 公式のGithubから、nvm-setup.zipをダウンロードします
  2. ダウンロードしたnvm-setup.zipを解凍する
  3. nvm-setup.exeを実行してインストール

Windows用nvmの公式Github

https://github.com/coreybutler/nvm-windows/releases

nvmからNode.jsをインストール

ここからは、Windows PowerShellで作業をします。Windows PowerShellは「管理者として実行」で開いてください。

まずはnvmをインストールしていきます。

> nvm install lts

インストールが完了するとバージョンが表示されるので、コマンドでそのバージョンを利用可能にします。私の場合は最新が20.12.2だったので、こちらを利用可能にします。

> nvm use 20.12.2

コマンドを実行して、利用可能かを確認します。

> node -v
v20.12.2
> npm -v
10.5.0

バージョンが出てきたら成功です。

Firebase CLIをインストール

引き続きPowerShellで作業します。以下のコマンドを実行してFirebase CLIをインストールします。

> npm install -g firebase-tools

インストールできたかを確認するには、以下のコマンドを実行します。インストールできていれば、パス・パッケージ・バージョンが表示されます。

> npm ls -g --depth=0
C:\Users\(ユーザー名)\.npm_global
`-- firebase-tools@13.7.5

Firebaseにログインする

続いて、Firebaseにログインをしていきます。以下のコマンドを実行します。

> firebase login

※以下のようなエラーが出た場合は、一部設定を変更する必要があります。

firebase : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\(ユーザー名)\.npm_global\firebase.ps1
 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=13517
0) を参照してください。
発生場所 行:1 文字:1
+ firebase login
+ ~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

私はこちらを参考にしました。設定を変更したら、再度ログインを行ってください。
https://syutaku.blog/powershell-error-executionpolicy-restricted/

ログイン完了後に以下のコマンドを実行すると、自分のFirebaseのプロジェクトが表示されます。確認してみてください。

> firebase projects:list

FlutterFire CLIのインストール

Firebaseへのログインが完了したら、以下のコマンドを実行してFlutterFire CLIをインストールします。

> dart pub global activate flutterfire_cli

インストールできたかを確認する場合は、以下のコマンドを実行します。バージョンが表示されればインストール完了です。

> flutterfire -v
1.0.0

FlutterアプリをFirebaseに接続する

まずはカレントディレクトリを変更します。cdコマンドで、Firebaseと接続するFlutterプロジェクトに移動してください。移動したら、以下のコマンドを実行する。

> flutterfire configure
  • プロジェクトの選択が迫られるので、最初に作成したプロジェクトを選択
  • プラットフォームの選択が迫られるので、作成するプラットフォームを選択

これで完了です。お疲れ様でした。ブラウザでFirebaseのプロジェクトを見ると、アプリが追加されていると思います。

最後に

調べに調べてようやく接続にたどり着けたときは嬉しかったですね。先人の皆様、ありがとうございます。もうこんなに苦労したくない。

Discussion