Zenn
🔥

Firebase入門 セットアップ編(v9)

2021/11/21に公開
Firebase
React
TypeScript
tech

はじめに

Firebaseのセットアップを何回かやって慣れてきたので記事に残す。v9の記事があまりないのでFirestoreやAuthentication、Hostingなんかも勉強したら記事にしようと思う。

セットアップは以下の4工程で進める。

  1. Firebaseに登録する
  2. プロジェクトを追加する
  3. アプリを追加する
  4. 環境変数の設定

1.Firebaseに登録する

以下公式リンクから登録を行う。
https://firebase.google.com/

2.プロジェクトを追加する

ヘッダーの「コンソールへ移動」をクリック

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

プロジェクト名を決める。


URLがここで決まる(プロジェクト名の下に出ている)。プロジェクト名をもとにURLが作られる。プロジェクト名が重複していなければプロジェクト名イコールURLになる。一意でない場合はキャプチャのように自動的に番号が振られる。
次画面のgoogleアナリティクス有効は必須ではないので、無効でOK。

3.アプリを追加する

</>をクリック

アプリのニックネームを決める。(自由に命名してOK)


Hostingはチェック外したままでOK

パッケージをインストール

firebaseをアプリから利用するために必要。

yarn add firebase

4.環境変数の設定

画面左のサイドバーから「プロジェクトの選択」をクリック


画面の一番下まで移動して構成のラジオボタンをクリック

以下のfirebaseConfigとfirebaseパッケージを使ってアプリからfirebaseへ接続する。

// ダブルクォーテーションで囲まれている部分は消しています。
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

firebaseConfigのプロパティが第三者にわたると誰でもデータベースにアクセスできたりするので注意。
※のちほど.gitignoreファイルを使って外部に公開されないようにします。

.envファイルの作成

※Create-react-appのディレクトリ構造を想定
srcと同階層に「.env」という名前でファイルを作成する。
以下を張り付ける

REACT_APP_FIREBASE_APIKEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_MESSAGING_APP_ID=""

これに先ほど確認したfirebaseConfigの値を詰めていく。
例えばfirebaseConfig.apikeyが"A"ならREACT_APP_FIREBASE_APIKEY="A"とする。
ちなみにREACT_APPは接頭辞でReactアプリで環境変数を扱うなら必ず必要な記述。
REACT_APP以降は任意の文字列でOK

.gitignoreに.envを記述

以下の様に書くだけ。これでGitHubなどのリモートリポジトリにpushできなくなる。

.env

firebaseConfig.tsを作成する

src/firebaseConfig.tsを作成して以下を張り付ける。

import { initializeApp } from "firebase/app";

export const app = initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_MESSAGING_APP_ID,
});

※今回はsrc/firebaseConfig.tsを作ったがsrc配下ならどこでもいいし名前も自由。

これでセットアップは完了。

const app にfirebaseの情報が詰まっていて、例えばfirestoreを利用したい場合はgetFirestore(app)とすれば良い。用意された関数を利用すればCRUD機能の実装も簡単に行える。

次回以降はログイン機能かfirestoreの操作を書いていくと思う。
ここまで来ることができれば以下の公式ドキュメントを読んで自走も可能。
https://firebase.google.com/docs?hl=ja

※firestoreとはfirebaseのデータベースのこと

Discussion