環境

Firestore Database
Firebase Functions　1st gen
firebaseコマンド 11.21.0
macOS Big 11.7.4

Firebaseで使用できるFunctionsの2nd genがpublic previewになっいる
https://firebase.google.com/docs/functions/beta

プロジェクトの作成

URL: https://console.firebase.google.com/

・この記事に掲載しているprojectは記事用に作成したものですでに削除してある
・何度かやり直してるので画像に表示されているプロジェクトIDが統一されていない

プロジェクトの作成をクリック

プロジェクト名を入力してチェックボックスにチェックを入れる

プロジェクト名の下にあるfir-test-f5437がプロジェクトIDになる

Googleアナリティクスは必要ならそのまま不要なら無効にする
※ 今回は使わないので無効で作成してます

一通り終わったらこの画面になりプロジェクトの作成は完了

Firestore Databaseの準備

ローカルに開発環境を構築するときに準備が終わっていないとエラーになるので準備しておく

Firebaseのコンソール画面の左のメニューの構築 > Firestore Databaseを選択

データベースの作成を選択

セキュリティルールはテストモードで開始

テストモードの有効期限が30日

ローケーションの設定は日本でしか使わないのでasia-norheast1(Tokyo)を指定

デフォルトのロケーションの設定

左のメニューのプロジェクトの概要の横にある歯車をクリップして出てくるプロジェクトの設定を選択

デフォルトの GCP リソースロケーションを選択

Firestore Databaseでasia-norheast1(Tokyo)を選択したので自動で設定されてからそのまま完了

これで準備は完了

ローカル開発環境の構築

ローカルの開発環境はすべての機能を100%エミュレートするものではない
・Firestore Databaseのindexの動作確認ができない

firebaseコマンドのインストール

URL: https://firebase.google.com/docs/cli?hl=ja#mac-linux-auto-script

$ curl -sL https://firebase.tools | bash

プロジェクトの初期化

プロジェクトのディレクトリを作成しそこに移動しておく

$ firebase init

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

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

  /Users/kashiwabarak/workspace/script/sandbox/firebase_install

? 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 se
lection, 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
(Move up and down to reveal more choices)

up downのキーで使用したいエミュレータをspaceキーで選択

❯◉ Firestore: Configure security rules and indexes files for Firestore
 ◉ Functions: Configure a Cloud Functions directory and its files

今回はFirestoreとFunctionsを使うのでこの2つを選択

アカウント設定

=== Account Setup

Which account do you want to use for this project? Choose an account or add a new one now

? Please select an option: (Use arrow keys)
❯ hogehoge@gmail.com
  (add a new account)

すでにログイン済みの場合は選択欄に出てくるので選択

ログインしていない場合は(add a new account)を選択してログイン
この場合はブラウザが開いて表示されてる手順通りに進めばログインできます

プロジェクトの設定

=== 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 arrow keys)
❯ 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を選択

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ [プロジェクトID] ([プロジェクト名])

作成済みのプロジェクト一覧が表示されるので先程作成したものを選択

=== 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のセキュリティルールのファイルをどうするのか聞かれるけど特に変更する必要がなければデフォルトのまま
デフォルトは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のインデックスを設定するファイルを聞かれるのでこれもデフォルトのまま
デフォルトはfirestore.indexes.jsonになる

=== 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? (Use arrow keys)
❯ JavaScript
  TypeScript

Functionsで使用する言語を聞かれるので好きな方を選択
JavaScriptを選択してます

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)

ESLintを使用するかどうかを聞かれるので好きな方を選択
yを選択してます

? Do you want to install dependencies with npm now? (Y/n)

npmの依存関係のインストールは無難にYを選択

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: undefined,
npm WARN EBADENGINE   required: { node: '16' },
npm WARN EBADENGINE   current: { node: 'v19.6.1', npm: '9.4.0' }
npm WARN EBADENGINE }

added 316 packages, and audited 317 packages in 10s

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

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 9.4.0 -> 9.6.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2
npm notice Run npm install -g npm@9.6.2 to update!
npm notice

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

✔  Firebase initialization complete!

初期化完了

$ ls -la
total 40
-rw-r--r--  1 user  0000000    56  3 29 10:21 .firebaserc
-rw-r--r--  1 user  0000000  1166  3 29 10:21 .gitignore
-rw-r--r--  1 user  0000000   396  3 29 10:21 firebase.json
-rw-r--r--  1 user  0000000    44  3 29 10:11 firestore.indexes.json
-rw-r--r--  1 user  0000000   712  3 29 10:09 firestore.rules
drwxr-xr-x  8 user  0000000   256  3 29 10:21 functions

$ ls -la ./functions/
total 280
-rw-r--r--    1 user  0000000     188  3 29 10:19 .eslintrc.js
-rw-r--r--    1 user  0000000      13  3 29 10:19 .gitignore
-rw-r--r--    1 user  0000000     352  3 29 10:19 index.js
drwxr-xr-x  261 user  0000000    8352  3 29 10:21 node_modules
-rw-r--r--    1 user  0000000  125832  3 29 10:21 package-lock.json
-rw-r--r--    1 user  0000000     638  3 29 10:19 package.json

作成されたものを見てみるとこんな感じ

エミュレータの起動

起動コマンド

$ firebase emulators:start

起動

i  emulators: Starting emulators: functions, firestore
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, hosting, pubsub, storage
⚠  Your requested "node" version "16" doesn't match your global version "19". Using node@19 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/kashiwabarak/workspace/script/sandbox/firebase_install/functions" for Cloud Functions...
⚠  functions: package.json indicates an outdated version of firebase-functions. Please upgrade using npm install --save firebase-functions@latest in your functions directory.
⚠  functions: Please note that there will be breaking changes when you upgrade.
✔  functions: Loaded functions definitions from source: .

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000/               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500, 9150

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

エミュレータUIのURL http://127.0.0.1:4000/にアクセスしてこんな感じの画面が表示されれば成功

Functionsを使用してみる

初期化で作成されたFunctionsのファイルを編集してコメントアウトを外してこんな感じにする

functions/index.js

const functions = require("firebase-functions");

// Create and deploy your first functions
// https://firebase.google.com/docs/functions/get-started

exports.helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

エミュレータを動かしている画面でこんな感じの表示がされ先程コメントアウトを外したhelloWorldのURLが表示される

⚠  functions: package.json indicates an outdated version of firebase-functions. Please upgrade using npm install --save firebase-functions@latest in your functions directory.
⚠  functions: Please note that there will be breaking changes when you upgrade.
✔  functions: Loaded functions definitions from source: helloWorld.
✔  functions[us-central1-helloWorld]: http function initialized (http://127.0.0.1:5001/fir-test-d0d07/us-central1/helloWorld).

URLにアクセスしてHello from Firebase!と表示されば成功

デプロイ

デプロイするには従量課金制のプランにする必要です

使用するプロジェクトIDを設定

$ firebase use [プロジェクトID]

デプロイ

$ firebase deploy

functionsのみデプロイ

$ firebase deploy --only functions[:function名]

ハマったところ

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/[プロジェクトID]/firestore to create your Cloud Firestore database.

Firestore作成済みなのに作ってと言われました
プロジェクトの設定のデフォルトのロケーションの設定を行ったら表示されなくなった

憶測ですがデフォルトがnam5 (us-central)だったので
この設定がない場合nam5 (us-central)にFirestoreが作成されているかどうかの確認をしてるのではないかと