• ホーム
• ブログ
• Firebase情報

VueとViteの環境変数でFirebaseのプロジェクト情報を設定する！

2022年5月17日

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する！

前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。

Firebase のプロジェクト情報

Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。

直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。

もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。

また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。

環境変数を利用した Firebase の初期化のコード

では、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹介します。

Firebase コンソールから取得できる Firebase のプロジェクト情報は以下のようになっています。 環境変数を利用しない場合には、このコードをコピーしてそのまま利用すれば良いだけです。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDHrGtFCB1Tatv1fcqtTM3LjbXcbKIFaVc",
  authDomain: "sample-833e0.firebaseapp.com",
  projectId: "sample-833e0",
  storageBucket: "sample-833e0.appspot.com",
  messagingSenderId: "398002306781",
  appId: "1:398002306781:web:f525f35314a61163cb2534",
};

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

この情報があれば、この Firebase のプロジェクトのデータベースやストレージにアクセスが可能になります。しかし、Javascript のソースコードは Web ブラウザから参照可能なので、第三者が不正に利用しないように、セキュリティルールを設定して、必要なアクセス以外はできないように設定する必要があります。

この点は環境変数を利用する場合でも同じです。

この部分のコードを環境変数を利用するように変更すると以下のようになります。

（＊）この例では、Vite を利用して Vue のプロジェクトを作成する例を前提にしています。 （＊）Vue CLI などで作成した場合は、扱い方が若干違いますので注意が必要です。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_apiKey,
  authDomain: import.meta.env.VITE_authDomain,
  databaseURL: import.meta.env.VITE_databaseURL,
  projectId: import.meta.env.VITE_projectId,
  storageBucket: import.meta.env.VITE_storageBucket,
  messagingSenderId: import.meta.env.VITE_messagingSenderId,
  appId: import.meta.env.VITE_apiKey,
};

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

これで、プログラミ自体は特定の Firebase のプロジェクトに依存しない形になります。 変更が最小限になるような形で環境変数に置き換えています。

環境変数の設定は「.env」ファイルで！

環境変数は「.env」という名前のファイルをプロジェクトのトップフォルダに作成して定義します。

VITE_apiKey=AIzaSyDHrGtFCB1Tatv1fcqtTM3LjbXcbKIFaVc
VITE_authDomain=sample-833e0.firebaseapp.com
VITE_projectId=sample-833e0
VITE_storageBucket=sample-833e0.appspot.com
VITE_messagingSenderId=398002306781
VITE_appId=1:398002306781:web:f525f35314a61163cb2534

このように、プロジェクトの情報の変数の前に「VITE_」をつけて、「:」の代わりに「=」にして、文字列の「""（double quatation）」を削除します。

これで先ほどのコードからこの値を参照できるようになります。 このファイルは、プログラムの本体とは別に管理可能なので、このように、特定のプロジェクトの情報を切り離す事で、プログラムの再利用が簡単にできるようになります。

環境変数を利用する際の注意

これは、前回の記事でも書いていますが、環境変数を利用する場合の注意です。

一番重要なのは、きちんとドキュメントに環境変数について書いておく事です。 ソースコードを読めばわかることというのも事実ですが、プログラムを書いた人以外がプログラムを再利用する場合、全部ソースコードを見るのは大変な作業です。特にどこで環境変数が使われているかはソースコードを全部読まない限りわかりません。

従って、プログラム中で利用している全ての環境変数と、その意味や値の設定の仕方をドキュメントとして残しておく事が必要です。

上の例では、「VITE_apiKey」は「アプリケーションの公開鍵（public key）」で Firebase コンソールから取得して設定するような記述を書いておきます。

できれば、テンプレートのような形で実際の情報ではなくて、「XXXXX」などのような値で良いので、実際の「.env」ファイルの例があると便利です。実際のファイルではなくて、ドキュメントに、ファイルの例として入れておけば、コピー＆ペーストで簡単にファイルが作成できます。

# .envファイルの例
VITE_apiKey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
VITE_authDomain=XXXXXXXXXXXX.firebaseapp.com
VITE_projectId=XXXXXXXXXXXX
VITE_storageBucket=XXXXXXXXXXXX.appspot.com
VITE_messagingSenderId=XXXXXXXXXXXX
VITE_appId=X:XXXXXXXXXXXX:XXX:XXXXXXXXXXXXXXXXXXXXXX

のように書いておくと親切です。

今回の Firebase の例では、値を設定しないとアプリが正常に動作しないのでわかりますが、ドキュメントに値を正確に設定しないとプログラムが動作しない旨を書いて置くと、利用者が環境変数の設定が原因でプログラムが上手く動作しない場合の手がかりになります。

GitHub でプログラムを公開する場合には、「.env」を「.gitignore」に指定しておくと、GitHub では公開されません。公開の前に確認しておく事をお勧めします。

まとめ

この記事では、環境変数を利用する具体的な例として、 Firebase のプロジェクト情報を環境変数として指定する例を紹介しました。今回は、Vite で Vue のプロジェクトを作成した例を紹介しています。 環境変数の扱いは、使用するツール（Vite など）やフレームワークの種類によっても違ってきます。インターネットで検索すると詳細の情報が得られるので必要に応じて調べながら使う必要があります。

今回は、フロントエンドのみの実装ですが、バックエンドを含む実装では、環境変数をアクセスできる範囲を変えることもできるので、バックエンドで利用する API の「秘密鍵（private key）」などは、フロントエンドから見えない分類にするなどの注意も必要です。

環境変数は上手く利用すると、プログラムの再利用などがやりやすくなるので便利です。是非、上手く利用してみてください！

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.