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
FunctionsとEmulatorsを選択して、エンターキーを押す。
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 EmulatorとFunctions 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
