firebaseの.envファイルを自動出力

firebase

2022.11.10 2022.09.15

自動生成ファイルの作成
firebaseのfirebaseConfigを記述する
コマンドラインを実行して.envファイルを自動生成する
src配下で初期化をする

自動生成ファイルの作成

binフォルダーを作成して、generate-env-file.jsを作成する。

#!/usr/bin/env node

const fs = require('fs');
const firebaseSettings = require('../.firebase-config');

const ENV_LOCAL = `
REACT_APP_FIREBASE_API_KEY='${firebaseSettings.apiKey}'
REACT_APP_FIREBASE_AUTH_DOMAIN='${firebaseSettings.authDomain}'
REACT_APP_FIREBASE_DATABASE_URL='${firebaseSettings.databaseURL}'
REACT_APP_FIREBASE_PROJECT_ID='${firebaseSettings.projectId}'
REACT_APP_FIREBASE_STORAGE_BUCKET='${firebaseSettings.storageBucket}'
REACT_APP_FIREBASE_MESSAGING_SENDER_ID='${firebaseSettings.messagingSenderId}'
REACT_APP_FIREBASE_APP_ID='${firebaseSettings.appId}'
`;
const TRIMMED_ENV_LOCAL = ENV_LOCAL.trim();

const envFileName = '.env.local';

try {
  fs.writeFileSync(envFileName, TRIMMED_ENV_LOCAL);
  console.log(`Congrats! ${envFileName} was successfully generated!`);
} catch (e) {
  console.log(e);
}

firebaseのfirebaseConfigを記述する

.firebase-config.jsを作成する。

module.exports = {
  apiKey: "xxxxxxxx",
  authDomain: "xxxxx.com",
  databaseURL: "https://xxxxx.com",
  projectId: "xxxx",
  storageBucket: "xxxx.com",
  messagingSenderId: "1234123412",
  appId: "1234124"
};

コマンドラインを実行して.envファイルを自動生成する

./bin/generate-env-fileを実行する。

src配下で初期化をする

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  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_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const storage = getStorage();

Nextの場合

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage'

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BAKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const storage = getStorage();