1. ホーム /
  2. firebase

firebase

  • 2022.11.17

firebase init で Firestore のエラー：Realtime DBを設定したら直った

皆さまこんにちは、ウチイダです。

最近はFirebase を勉強中です。スマホ対応のWebアプリの開発速度が高まりそうでわくわくしています。

開発もどんどん進んでいるのか、謎のエラーやドキュメントに書いてない事象にぶつかっては、調べ物をしているので、なかなかスムーズに進んでいませんが…

そんな中で、よくわからないエラーに遭遇したのでメモしておきます。

開発環境

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • Node.js v16.18.1
  • npm 8.19.2
  • firebase CLI v11.16.0

事象

Firebase CLI で、firebase のプロジェクト設定の初期化をしたところ、以下のようなエラーが。

$ firebase init

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

# ... 中略

=== Firestore Setup

Error: It looks like you haven't used Cloud Firestore in this project before. Go to https://console.firebase.google.com/project/xxxxxxx/firestore to create your Cloud Firestore database.

「Firestore のデータベースが作成されていない」とのことですが、設定画面上では作成済みになっています。

作成直後だから、CLIから読み取るのにタイムラグがあるのかな、と思って数分置いてみたものの改善せず。

対策：Realtime Database を作成する

いろいろ調べているうちに、Firestore を設定していても、プロジェクト上で設定が認識されない場合があるらしいことがわかってきました。

たとえば、SDK用のconfig 設定値にDatabase URLがないとか…

その対策として、Realtime Databaseをプロジェクトに作成する、ということが書かれていました。

参考：【Firebase】databaseURLが見当たらない？

https://engineering.webstudio168.jp/2022/02/firebase%E3%81%A7databaseurl%E3%81%8C%E8%A6%8B%E5%BD%93%E3%81%9F%E3%82%89%E3%81%AA%E3%81%84%EF%BC%9F/

もしやと思って、使う予定はないけどRealtime Databaseを作成してみたら、改善しました。

$ firebase init

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

# ... 中略

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

FireStore とRealtime Databaseは、用途の違う別物だと思ってたのですが、なんらかの設定が共有されているのでしょうか…

よくわからないけど、調べても原因がわからなかったので、Firestore を使うときはRealtime Database も一緒に有効化することにしようと思います…

以上です。あなたのお役に立てればうれしいです。

  • 2022.11.10

Vite で自動ビルドしたい – build に –watch オプションをつける

皆さまこんにちは、ウチイダです。

React とともに、firebase を本格的に触り始めています。

React + firebase で開発速度を上げて、小規模の開発を効率化できないかな～と試行錯誤しています。

firebase の エミュレータがとても充実しているということを最近知りました。便利です。

今回はその中で調べたことをメモしておきます。

firebase hosting のエミュレータが修正を反映しない

ソースコードを修正して、hosting エミュレータのURLを開いても変更が反映されません。

よくよく考えれば当たり前なんですけど、「hosting のエミュレータ」なので、ビルド済みの静的ファイルを読み込んでいるんですよね。

hosting のエミュレータで修正内容を反映するには、ソースコード修正後は一度ビルドしてデプロイ用のファイルも更新しないといけません。

Vite でローカル環境を動かしていたので、つい忘れていました。

Vite のビルドを自動で実行する

とはいえ、毎回手動でビルドのコマンドを実行するのは面倒です…

ソースコードを修正して保存したら、自動でビルドを実行してもらいたいです。

というわけで結論から。以下のコマンドで、Vite(の内部で動いてるRollup)を、watch モードで実行することができます。

$ npx vite build --watch
vite v3.2.2 building for production...

watching for file changes...

build started...
✓ 974 modules transformed.
# ... 省略 ...
built in 7582ms.

公式サイトには言及が少ないですが、

vite build --watch で rollup のウォッチャを有効にすることができます。

本番環境用のビルド | Vite

と書いてありました。

https://ja.vitejs.dev/guide/build.html#ファイル変更時のリビルド

Vite コマンドのヘルプにも、オプションの一覧に載っていました。

$ npx vite build --help
vite/3.2.2

Usage:
  $ vite build [root]

Options:
# ... 省略 ...
  -w, --watch                   [boolean] rebuilds when modules have changed on disk 
  -c, --config <file>           [string] use specified config file 
  --base <path>                 [string] public base path (default: /) 
  -l, --logLevel <level>        [string] info | warn | error | silent 
  --clearScreen                 [boolean] allow/disable clear screen when logging 
  -d, --debug [feat]            [string | boolean] show debug logs 
  -f, --filter <filter>         [string] filter debug logs 
  -m, --mode <mode>             [string] set env mode 
  -h, --help                    Display this message

npm script にも、build:watch として 登録しておきました。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:watch": "vite build --watch",
    "preview": "vite preview"
  },
}

まとめ

ビルド処理には少し時間かかってしまいますが、毎回手でコマンド実行するよりははるかにいいですね。

基本的にはHMRが使えるVite サーバ上で作業して、hosting エミュレータ上で動作確認・微調整をする際にwatch モードで自動ビルドさせようと思います。

以上です。あなたのお役に立てれば幸いです。