どこにでもいるTSコーダーの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

Firebaseプロジェクトの作り方

Firebaseのプロジェクトをセットアップする

まずはコンソール上でFirebaseのセットアップを行う。

プロジェクトを追加をクリックする

プロジェクト名を入力する

今回は「このプロジェクトでGoogle Analyticsを有効にする」をONにして「続行」をクリックする。

アナリティクスを既存のアカウントから選択するか新しく作成する。 そして地域を「日本」に選択して、「続行」をクリックする。

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

Authenticationのページに移動して、「メール/パスワード」を選択する。

「メール/パスワード」を有効に設定して、「保存」をクリックする。

プロジェクトの設定ページに移動して、ウェブアプリを追加する。 アプリのニックネームを入力して、「アプリを登録」をクリックする。

保存が完了したら、表示されているfirebaseConfigの内容をメモしておく。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

ローカルでFirebaseのプロジェクトディレクトリを初期化する

Firebase CLIをインストールする。

npm install -g firebase-tools

Firebase CLIを使ってログインする。開かれたページの内容に従って進める。

firebase login

ログインが正しく成功したかを確認するため、ログインしたアカウントで作成したFirebaseプロジェクトの一覧を表示する。

firebase projects:list

プロジェクトを初期化する。まずプロジェクト用のフォルダを作成する。フォルダ名は先ほど作成したプロジェクト名と一致させとておいた方が良い。

mkdir project-name
cd ./project-name

FunctionsEmulatorsを選択して、エンターキーを押す。

firebase init


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

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

  /Users/username/firebase-lab

? 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 <ent
er> 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

Use an existing projectを選択して、先ほど作成したプロジェクトを選択する。

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

TypeScriptを選択する。

=== Functions Setup

A functions directory will be created in your project with sample code
pre-configured. Functions can be deployed with firebase deploy.

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

ESLintを自動セットアップしてもらうためにYを入力する。

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

npmを使用したい場合はyを入力する。yarnなどを使用したい場合はnを入力する。

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

Authentication EmulatorFunctions Emulatorのみを選択する。必要な場合は他のエミュレーターも選択する。

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

それぞれのエミュレーターで使用するポート番号が聞かれるのでそのままエンターキーを押し続ける。

? Which port do you want to use for the auth emulator? (9099) 
? Which port do you want to use for the functions emulator? 5001
? Would you like to enable the Emulator UI? (Y/n)
? 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? (y/N) 

✔ Firebase initialization complete!が表示されたセットアップ完了である。

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

✔  Firebase initialization complete!

lsを実行して次のファイル群が表示されることを確認する。

$ ls
firebase.json   functions