firebase authを使用した環境をVercelにデプロイする方法

firebaseで新規プロジェクトの立ち上げ

Firebaseでプロジェクトを立ち上げます。立ち上げた際に環境変数をコピーしておきましょう。

Firebaseをインストール

yarn add firebase

環境変数を定義

.env.localに環境変数を定義します。このファイルはGitHubにpushしないよう注意が必要です。Next.jsではデフォルトで.gitignoreに登録されています。 環境変数名に”NEXT_PUBLIC＂を付けるとクライアント側でも環境変数が使えるようになるそうです（この辺りの仕組みはまだ曖昧…)。

NEXT_PUBLIC_FIREBASE_API_KEY=“******”
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=“******”
NEXT_PUBLIC_FIREBASE_PROJECT_ID=“******”
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=“******”
NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID=“******:”
NEXT_PUBLIC_FIREBASE_APP_ID=“******”
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=“******”

next.config.jsを作成

next.config.jsを作成し、環境変数を登録します。

module.exports = {
  env: {
      NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
      NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
      NEXT_PUBLIC_FIREBASE_PROJECT_ID: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
      NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
      NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
      NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
  }
}

firebaseを初期化

.src/lib/firebase.tsを作成し、以下のように記述。initializeを一度だけ実行するように設定します。

import firebase from "firebase/app";
import "firebase/auth";

export const config = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

!firebase.apps.length ? firebase.initializeApp(config) : firebase.app();

export const auth = firebase.auth();
export const Firebase = firebase;

これで、指定のファイルでauthをインポートすることでそのファイル内で、authが使えるようになります。

Vercelに環境変数を追加していく

Vercelのデプロイするアプリから Settings → Environment Variablesを選択 .env.localで設定した環境変数を一つずつ加えていきます。

下記のようにfirebaseの環境変数を追加していきます。



firebaseのコンソールにドメインを追加

firebase authでドメイン追加からドメインを追加

Firebaseのコンソールから、Authentication → Sign-in method → 承認済みドメインへ移動し、「ドメイン追加」からデプロイ先のドメインを登録します。

 以上で、デプロイ先でも正常にauth機能が動くようになると思います。