Netlifyの環境変数が使えない

Question

Netlifyで以下のように環境変数を設定し

JavaScriptで以下のように書いたところ

const firebaseConfig = {
  apiKey: API_KEY,
  authDomain: AUTH_DOMAIN,
  databaseURL: DATABASE_URL,
  projectId: PROJECT_ID,
  storageBucket: STORAGE_BUCKET,
  messagingSenderId: MESSAGING_ID,
  appId: APP_ID,
  measurementId: MEASUREMENT_ID
};

正常に読み込めませんでした。何が間違っているのでしょうか

Comments

[CHERRY]

JavaScript は、Node.js ではなく、Web ブラウザで実行される JavaScript ですか？

[Kota.Y]

はい。Firebaseのトークンを環境変数に代入したのですがこれはNode.jsでしか使えないのでしょうか

Answer 1

前提として、

• Netlify で Web サイトをホスティングしている
• サイト上から直接 (サーバーなどを介することなく) firebase の API_KEY を使いたい
• Netlify 上で API_KEY などを環境変数として設定したが、読み込めずにエラーになっている

ということと判断して回答します。

結論から言いますと、Netlify 上に設定した環境変数を、
Web サイトから直接参照することはできません。

もうちょっと説明加えますと、 Netlify 上で設定している環境変数は、
Netlify 上でビルドを実行する際に、サーバー側の設定として入っている環境変数になります。

一方、（こちらは当然のことではありますが）Web サイト上で JS を実行する際には、
クライアントのブラウザ上で JS のコードが実行されるため、
そのタイミングでは Netlify に設定している環境変数は存在していない、と言うことになります。

Netlify 上で設定した環境変数を使用したい場合、
Netlify 上でビルドする際に、該当の箇所を環境変数の内容で文字列置換してしまうのが
簡単な方法で、わかりやすい解決法です。

ただし、もちろんその場合はクライアントに API_KEY などの情報が全て渡る事になりますので、
セキュリティ上問題が無いかどうかは、ご自身でご確認いただければと思います。

---

補足1

もし、仮に Node.js 上で環境変数を参照する場合は、
process.env.{環境変数名} で参照することができます。

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  ...
};

という感じですね。

(もちろん、単純にこう書き直したとしても、
そもそも実行されるタイミングがクライアントのブラウザ上なので、
やっぱり環境変数は存在せずエラーになるかと思います。)

---

補足2

こちらは完全に蛇足ですが、もしかしたら役に立つかもしれないので。

Netlify には function と言う、サーバーサイドでコードを実行できる機能がありますが、
今回設定されている環境変数は、ビルド時のみでなく、こちらの実行時の環境にも設定されるようです。

https://docs.netlify.com/functions/configure-and-deploy/#configure-the-functions-folder

クライアント側に渡したくないキーがある場合は、こちらを使用して
サーバー側で処理させてしまうのも手ですね。
（その際は、サーバー側の処理の中で 補足1 のような書き方をすれば
環境変数は参照できるかと思います。）