🔨

Firebase v9をGatsbyで使う方法

2022/04/21に公開

Firebase

Gatsby.js

React

tech

前提

GatsbyとFirebaseは知ってるけど組み合わせ方法を知りたい人向けです。

使うプラグイン

下記のプラグインを使います。
探した感じなかったので自分で書いたものです。
(スターしていただけると嬉しいです)

gatsby-plugin-firebase-v9.0-typescript

インストール

use npm:

npm install firebase gatsby-plugin-firebase-v9.0-typescript --save

or use yarn:

yarn add firebase gatsby-plugin-firebase-v9.0-typescript -D

In gatsby-config.js:

module.exports = {
  plugins: [
    ...otherPlugins,
    {
      resolve: 'gatsby-plugin-firebase-v9.0-typescript',
      options: {
        credentials: {
          apiKey: '<YOUR_FIREBASE_API_KEY>',
          authDomain: '<YOUR_FIREBASE_AUTH_DOMAIN>',
          databaseURL: '<YOUR_FIREBASE_DATABASE_URL>',
          projectId: '<YOUR_FIREBASE_PROJECT_ID>',
          storageBucket: '<YOUR_FIREBASE_STORAGE_BUCKET>',
          messagingSenderId: '<YOUR_FIREBASE_MESSAGING_SENDER_ID>',
          appId: '<YOUR_FIREBASE_APP_ID>',
          measurementId: '<YOUR_FIREBASE_MEASUREMENT_ID>'
        }
      }
    }
  ]
}

設定

下記の記事を参考にプロジェクトの作成をお願いします。

プロジェクトを追加したら、Realtime DatabaseとStorageの追加をしてください。
Storageのリージョンを私はいつもasia-northeast1にしています。
プロジェクトの概要からアプリを追加してください。
認証コードが吐き出されるのでそれを.envなどにかいて、 gatsby-plugin-firebase-v9.0-typescript の options 設定をしてください。
一個でも欠けていると失敗します。

使い方

Storageを使う場合下記のように初期化します。

import app from "gatsby-plugin-firebase-v9.0-typescript";
import { getStorage } from "firebase/storage";
const storage = getStorage(app);

まとめ

以上Firebase v9をGatsbyで使う方法でした。
バグ報告などはTwitterにお願いします。

宣伝

ブログやってます。

前提

使うプラグイン

インストール

設定

使い方

まとめ

宣伝

Discussion