実行手順

1. .envファイルの作成

適切な値を文字列として設定する。

• .env.development.local

NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_VAPID_KEY=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=

• .env.development.local

NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_VAPID_KEY=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=

2. 各パラメータの設定

各パラメータは、プロジェクトの設定→全般→Firebaseの初期化コードのfirebaseConfigから取得する。

また、NEXT_PUBLIC_FIREBASE_VAPID_KEYは、プロジェクトの設定→Cloud Messaging→ウェブプッシュ証明書の公開鍵をコピーして割り当てる。

NEXT_PUBLIC_FIREBASE_APP_ID="/* appId */"
NEXT_PUBLIC_FIREBASE_VAPID_KEY="/* ウェブプッシュ証明書の公開鍵 */"
NEXT_PUBLIC_FIREBASE_API_KEY="/* apiKey */"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="/* authDomain */"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="/* projectId */"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="/* storageBucket */"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="/* messagingSenderId */"

3. ルートにserviceAccountKey.jsonを追加する

プロジェクトの設定→サービスアカウント→新しい秘密鍵の生成 をクリックして、 jsonファイルをダウンロードし、serviceAccountKey.jsonに改名して、ルートに配置する。

• json:serviceAccountKey.json

{
    "type": "service_account",
    "project_id": "/* projectId */",
    "private_key_id": "/* privateKeyId */",
    "private_key": "/* privateKey */",
    "client_email": "/* clientEmail */",
    "client_id": "/* clientId */",
    "auth_uri": "/* authUri */",
    "token_uri": "/* tokenUri */",
    "auth_provider_x509_cert_url": "/* authProviderX509CertUrl */",
    "client_x509_cert_url": "/* clientX509CertUrl */"
}

4. 開発サーバーの起動

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

5. ブラウザを開く

http://localhost:3000 を開いて確認する。