Chapter 02無料公開

環境構築

てんてる
てんてる
2021.05.29に更新

事前に準備しておくべき環境

以下は事前に用意しているものとしますので、まだ用意できていない方はご自身でご用意ください。

  • Google アカウント
  • エディタ(このチュートリアルではVisual Studio Codeを利用しますが、お好きなエディタで構いません)
  • Node.js

Firebase プロジェクトを作成する

Googleアカウントにログインした状態でFirebase Consoleにアクセス。

プロジェクトを作成をクリック。
※既に何かしらのプロジェクトを作成している方は画面が違いますが、そういう方作成方法について理解されていると思うので割愛します。

プロジェクト名にお好きな名前を入れて続行をクリック。

Google アナリティクスを有効にするか聞かれます。今回は使いませんのでどちらでも良いですが、有効化した状態で続行をクリック。

アナリティクスの地域を日本にし、色々規約を読んで同意にチェックし、プロジェクトを作成をクリック。

プロジェクトの作成が完了したら続行をクリック

Google Cloud Platform の請求先を登録する

Google Cloud Platform(以下GCP)には無料トライアルとして初めて登録する方には$300のクレジットが1年間付与されます。
そのため、まだGCPで支払い情報を登録していない方は先にGCPの登録を行いましょう。
※Firebaseからプランを上げてしまうと無料クレジットが付与されません。

GCP 無料トライアルに登録

※GCPに支払い情報を既に登録している方は次のFirebaseをSparkプランからBlazeプランに変更に進んでください。
GCP無料トライアルページにアクセスし、無料で開始をクリック。

国を日本にし、利用規約に同意をして続行をクリック

必要な支払い情報を入力して無料トライアル開始をクリック。
※支払い情報登録後、支払い情報確認のためGoogleから200円ほどの請求が来ますが、後日取り消されるので、請求がきても焦らずそのまま待ちましょう。

Firebase を Spark プランから Blaze プランに変更

Firebase Consoleにアクセスし、画像赤線のSparkプランをクリック。
※サイドバー下部のアップグレードクリックでも大丈夫です。

Blazeプランを選択
※Blazeプランに変更する際は必ず料金表をよくご覧になったうえで変更して下しさい。

請求先アカウントが先ほど作成したGCPアカウントになっていることを確認して購入をクリック。

このような画面が表示されたらアップグレード完了です。
万が一に備えて、高額課金を検知できるように、予算アラートを設定していきましょう。
※こちらは任意ですので、予算アラートの設定は必要ない、という方は次のFirebase CLI をインストールに進んで下さい。

予算アラートを設定する

予算アラートを設定をクリック。

ご自身でアラートを受け取りたい予算を入力してください。
※こちらのアラートは、ここで設定した予算の50%、90%、100%でそれぞれメールが送信されます。(今回の例だと$50.00(50%)、$90.00(90%)、$100.00(100%)でアラートメールが通知されます)

設定が完了したら閉じるをクリック。

Cloud Firestoreをセットアップ

Firebase Consoleにアクセスし、サイドバーからCloud Firestoreを選択。

まだ何もデータベースを作成していない場合は、以下のような画面が表示されるので、データベースの作成をクリック。

すると、本番環境モードかテスト環境モードのどちらで使用するか聞かれるので、本番環境モードで開始するにチェックをした状態で次へをクリック。

Cloud Firestoreをどこの国のデータセンターに設置するかを選択します。特に理由がなければ日本に置きたいので、東京を意味するasia-northeast-1を選択しましょう。
選択し終わったら有効にするをクリック。
※それぞれの国については公式ドキュメントをご覧ください。

Firebase CLI をインストール

Windowsの方はコマンドプロンプトやPowerShellを、Macの方はTerminalを起動して、以下コマンドを入力

$ npm install -g firebase-tools

firebase --versionと入力してバージョンが表示されるか確認
※ここで表示されるバージョンはこのチュートリアルを行っている時期によって異なるので、何かしらバージョンが表示されれば問題ありません。

$ firebase --version
9.12.0

コマンドプロンプトやPowerShellでうまくいかない方はGit Bash(Gitをインストールしたら一緒にインストールされるやつ)を使ってください。

任意のディレクトリ配下にプロジェクトを作成

分かりやすいディレクトリ配下にプロジェクトを作成します。

# 空のディレクトリを作成
$ mkdir functions-test
# 作成したディレクトリに移動
$ cd functions-test
# 先ほど作成したFirebaseプロジェクトと連携させるために、プロジェクトを作成したGoogleアカウントでログイン
$ firebase login
i  Firebase optionally collects CLI 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 usage and error reporting information? (Y/n)

# -------------------------------------------------------------------------
# ここで Enter もしくは y を入力して Enter
# その後ブラウザが立ち上がるので、先ほどプロジェクトを作成したGoogleアカウントを選択して許可をクリック
# -------------------------------------------------------------------------

i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=XXXXXXXXXXXXXXXX

Waiting for authentication...

+  Success! Logged in as アカウント名@gmail.com

GitBashでfirebase loginがうまくいかない場合は、firebase login --interactiveと入力

+ Success! Logged in as アカウント名@gmail.comと表示されることを確認。

プロジェクト初期化(JavaScript)

先ほど作成したディレクトリ内でプロジェクトを作成

/functions-test
$ firebase init

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

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

  \functions-test

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? (Y/n)

# -------------------------------------------------------------------------
# ここで Enter もしくは y を入力して Enter
# ※(Y/n)のような選択肢の場合、何も入力せずにEnterを押すと大文字になっている方が選択されます
# -------------------------------------------------------------------------

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
rm 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
 ( ) Emulators: Set up local emulators for Firebase features
 ( ) Remote Config: Get, deploy, and rollback configurations for Remote Config
 
# -------------------------------------------------------------------------
# FirestoreとFunctionsを使うので、矢印キーで下に移動し、スペースキーで選択した後にEnter
※GitBashでうまく選択できない場合はPowerShellやコマンドプロンプトを使ってください
# -------------------------------------------------------------------------

? 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

# -------------------------------------------------------------------------
# 既存のFirebaseプロジェクトを利用するか、新しくプロジェクトを作成するか聞かれるので、Use an existing project を選択してEnter
# -------------------------------------------------------------------------

? Select a default Firebase project for this directory:

> functions-test-ce134 (functions-test)

# -------------------------------------------------------------------------
# 先ほど作成したプロジェクトを選択して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)

# -------------------------------------------------------------------------
# Firestoreのルールを記述するファイル名を聞かれているので、デフォルトのまま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)

# -------------------------------------------------------------------------
# Firestoreインデックスのファイル名を聞かれているのでデフォルトのままEnter
# -------------------------------------------------------------------------

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions?
> JavaScript
  TypeScript

# -------------------------------------------------------------------------
# Cloud Functionsで利用する言語を聞かれるので、JavaScriptを選択してEnter
# -------------------------------------------------------------------------

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

# -------------------------------------------------------------------------
# コードのバグチェック等にES Lintを使うか聞かれるので y を入力してEnter。
# 詳細は ES Lint についてのチャプターで解説します。
# -------------------------------------------------------------------------

+  Wrote functions/package.json
+  Wrote functions/.eslintrc.js
+  Wrote functions/src/index.js
+  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? (Y/n)


# -------------------------------------------------------------------------
# npmで依存関係のあるモジュールをインストールするか聞かれるので、そのままEnter
# ここでインストールされるモジュールは関数を書くのに必要なものです
# -------------------------------------------------------------------------

> protobufjs@6.10.2 postinstall \functions-test\functions\node_modules\protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 407 packages from 273 contributors and audited 407 packages in 17.706s

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

found 0 vulnerabilities

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

# -------------------------------------------------------------------------
# Storageルールのファイル名を聞かれているのでデフォルトのままEnter
# -------------------------------------------------------------------------

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

+  Firebase initialization complete!

ログの最後に+ Firebase initialization complete!と表示されることを確認。

ここまでうまくいくと、以下のようなファイルとフォルダが生成されています。

$ ls -a
.  ..  .firebaserc  .gitignore  firebase.json  firestore.indexes.json  firestore.rules  functions

作成したプロジェクトのコードを最新版にするために、以下コマンドを実行

$ cd functions
$ npm install firebase-admin@latest firebase-functions@latest

最後にnpmで最新バージョンになっていないものがあるかを確認します。

functions-test/functions
# アップデート検証ツールをインストール
$ npm install -g npm-check-updates

# 検証
$ ncu
Checking \functions-test\functions\package.json
[====================] 5/5 100%

 eslint                   ^5.12.0  →  ^7.14.0     
 eslint-plugin-promise     ^4.0.1  →   ^4.2.1
 firebase-functions-test   ^0.2.0  →   ^0.2.3

Run ncu -u to upgrade package.json

# package.jsonをアップデート
$ ncu -u

# 改めて最新バージョンをインストール
$ npm install

プロジェクト初期化(TypeScript)

先ほど作成したディレクトリ内でプロジェクトを作成

/functions-test
$ firebase init

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

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

  \functions-test

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? (Y/n)
# -------------------------------------------------------------------------
# ここで Enter もしくは y を入力して Enter
# ※(Y/n)のような選択肢の場合、何も入力せずにEnterを押すと大文字になっている方が選択されます
# -------------------------------------------------------------------------

? 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: Configure Firebase Realtime Database and deploy 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
 ( ) Emulators: Set up local emulators for Firebase features
 ( ) Remote Config: Get, deploy, and rollback configurations for Remote Config
 
# -------------------------------------------------------------------------
# FirestoreとFunctionsを使うので、矢印キーで下に移動し、スペースキーで選択した後にEnter
※GitBashでうまく選択できない場合はPowerShellやコマンドプロンプトを使ってください
# -------------------------------------------------------------------------

=== 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
  
# -------------------------------------------------------------------------
# 既存のFirebaseプロジェクトを利用するか、新しくプロジェクトを作成するか聞かれるので、Use an existing project を選択してEnter
# -------------------------------------------------------------------------

? Select a default Firebase project for this directory:

> functions-test-ce134 (functions-test)

# -------------------------------------------------------------------------
# 先ほど作成したプロジェクトを選択して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)

# -------------------------------------------------------------------------
# Firestoreのルールを記述するファイル名を聞かれているので、デフォルトのまま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)

# -------------------------------------------------------------------------
# Firestoreインデックスのファイル名を聞かれているのでデフォルトのままEnter
# -------------------------------------------------------------------------

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions?
  JavaScript
> TypeScript

# -------------------------------------------------------------------------
# Cloud Functionsで利用する言語を聞かれるので、TypeScriptを選択してEnter
# -------------------------------------------------------------------------

? Do you want to use ESLint to catch probable bugs and enforce style? (Y/n)
# -------------------------------------------------------------------------
# コードのバグチェック等にES Lintを使うか聞かれるのでEnter。
# -------------------------------------------------------------------------
+  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? (Y/n)

# -------------------------------------------------------------------------
# npmで依存関係のあるモジュールをインストールするか聞かれるので、そのままEnter
# ここでインストールされるモジュールは関数を書くのに必要なものです
# -------------------------------------------------------------------------

> protobufjs@6.11.2 postinstall \functions-test\functions\node_modules\protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 405 packages from 285 contributors and audited 405 packages in 14.789s

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

found 0 vulnerabilities


=== 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)
# -------------------------------------------------------------------------
# Storageルールのファイル名を聞かれているのでデフォルトのままEnter
# -------------------------------------------------------------------------

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

+  Firebase initialization complete!

ログの最後に+ Firebase initialization complete!と表示されることを確認。

ここまでうまくいくと、以下のようなファイルとフォルダが生成されています。

$ ls -a
.  ..  .firebaserc  .gitignore  firebase.json  firestore.indexes.json  firestore.rules  functions  storage.rules

作成したプロジェクトのコードを最新版にするために、以下コマンドを実行

$ cd functions
$ npm install firebase-admin@latest firebase-functions@latest

最後にnpmで最新バージョンになっていないものがあるかを確認します。

# アップデート検証ツールをインストール
$ npm install -g npm-check-updates

# 検証
$ ncu
Checking \functions-test\functions\package.json
[====================] 5/5 100%

 @typescript-eslint/eslint-plugin   ^3.9.1  →  ^4.25.0     
 @typescript-eslint/parser          ^3.8.0  →  ^4.25.0
 eslint                             ^7.6.0  →  ^7.27.0
 eslint-plugin-import              ^2.22.0  →  ^2.23.3
 firebase-functions-test            ^0.2.0  →   ^0.2.3
 typescript                         ^3.8.0  →   ^4.3.2

Run ncu -u to upgrade package.json

# package.jsonをアップデート
$ ncu -u

# 改めて最新バージョンをインストール
$ npm install

これで環境構築は完了です。

functions/node_modulesというディレクトリがありますが、こちらは必要なモジュールが格納されています。中を見るとわかりますが、まだほとんど何もしていない状態でもフォルダが多く存在しています。
これらは、同じディレクトリにあるpackage.jsonが管理しているので、Git等でバージョン管理をしている場合は必ずnode_modulesを例外に追加しておきましょう。
予めgit initされている場合は、プロジェクトルートに.gitignoreというファイルが存在し、その中にnode_modulesが記述されているので、例外として追加されています。
なければプロジェクトルートに.gitignoreを新規作成し、1行目にnode_modulesと記述しておきましょう。