TypeScriptでdotenvを使う

APIキーをgithubに公開したくない

Firebaseを使うときに、githubにAPIキーを公開したくないため、今回react-native-dotenvを用いる

• 使い方
• 終わりに

使い方

まずnpmにインストールする

terminal

npm install --save react-native-dotenv

次に、babel.config.jsに記述する

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module:react-native-dotenv',
+      {
+        moduleName: '@env',
+        path: '.env',
+      },
+    ],
+  ],
};

型定義を用意する。rootフォルダにenv.d.tsを新規作成する(どこでもいい気はする、未検証)

env.d.ts

declare module '@env' {
  export const FIREBASE_API_KEY: string;
  export const FIREBASE_AUTH_DOMAIN: string;
  export const FIREBASE_DATABASE_URL: string;
  export const FIREBASE_PROJECT_ID: string;
  export const FIREBASE_STORAGE_BUCKET: string;
  export const FIREBASE_MESSEGING_SENDER_ID: string;
  export const FIREBASE_APP_ID: string;
  export const FIREBASE_MEASUREMENT_ID: string;
}

次に、firebaseAuth.tsに記述する(Firebaseの認証情報等が書かれたファイル)

firebaseAuth.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
+ import {
  + FIREBASE_API_KEY,
  + FIREBASE_AUTH_DOMAIN,
  + FIREBASE_PROJECT_ID,
  + FIREBASE_STORAGE_BUCKET,
  + FIREBASE_MESSEGING_SENDER_ID,
  + FIREBASE_APP_ID,
  + FIREBASE_MEASUREMENT_ID,
} from '@env';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
-  apiKey: "<Firebase API Key>",
+  apiKey: FIREBASE_API_KEY,
-  authDomain: "<Firebase Auth Domain>",
+  authDomain: FIREBASE_AUTH_DOMAIN,
-  projectId: "<Firebase Project ID>",
+  projectId: FIREBASE_PROJECT_ID,
-  storageBucket: "<Firebase Storage Bucket>",
+  storageBucket: FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: "<Firebase Messaging Sender ID>",
+  messagingSenderId: FIREBASE_MESSEGING_SENDER_ID,
-  appId: "<Firebase App ID>",
+  appId: FIREBASE_APP_ID,
-  measurementId: "<Firebase Measurement ID>",
+  measurementId: FIREBASE_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

rootフォルダに.envファイルを作成する

.env

FIREBASE_API_KEY=<Firebase API Key>
FIREBASE_AUTH_DOMAIN=<Firebase Auth Domain>
FIREBASE_PROJECT_ID=<Firebase Project ID>
FIREBASE_STORAGE_BUCKET=<Firebase Storage Bucket>
FIREBASE_MESSEGING_SENDER_ID=<Firebase Messaging Sender ID>
FIREBASE_APP_ID=<Firebase App ID>
FIREBASE_MEASUREMENT_ID=<Firebase Measurement ID>

.gitignoreに.envファイルを追加する !ここが一番大事!

.gitignore

\# CocoaPods
/ios/Pods/
+ .env

終わりに

あとはeslintやらVSCode上で問題が出ないことを確認すれば、Firebaseの認証情報をgithubに公開することなく、使うことができる

githubに今回変更箇所をプッシュしておいたのでもしよければ→github
また、疑問点や間違ってる箇所があったissueやTwitterまで