HTML + CSS + JSでAPIを使って画像を取得し、表示しているのですが、
JSではAPIKeyがJSファイル上に載ってしまっていてよろしくないので隠匿する方法を探しています。
いろいろ確認していたところ、.env ファイルを作って.gitignoreに入れればよいという書き込みも見つけたのですが、GitHub上に.envファイルが無いと結果読み込まれないため実用性がなく、誤って公開するリスクも有るとのことで、Keyは1つなのでファイルにしない別の方法を探していたところ、
herokuに公開し、Herokuの環境変数に入れてそれを取り出す方法をみつけ試しています。
以下の通り、ひとまずHerokuの環境変数に入れることは完了している状況です。
heroku config
=== sample-app Config Vars
key_test: test
環境変数には登録されているようなのですが、
App.js上に以下のように記載したところ、登録がないと怒られます。
{console.log(JSON.stringify(process.env.key_test))}
なお、以下も試したのですが、一覧を表示しても一覧に出ない状況でした。
{console.log(JSON.stringify(process.env))}
(Console.log(process.env)ではデータが受け取れなかったので探したところ上記で動くことがわかりました)
console
1 {"NODE_ENV":"development","PUBLIC_URL":""}
developmentで設定していない(特に指定はしていない)のですが、どこかで入力が足りていないのでしょうか?
dotenv.jsの導入も検討しましたが、グループ開発で行っており、他のメンバーはNode.jsをローカルに入れていないため、最小限の構成で動くものを作りたい(Herokuの環境変数を読み込むだけなら別のJSファイルも不要なのでメンバーへの影響もあまりない)と考えています。
お手数ですが確認よろしくお願いいたします。
また、他に情報が必要でしたらお知らせください。
追記:
以下について、追記していただいた通りReactで作ったテスト(本来テスト環境ではないですがConsoleにテストデータを投げるために利用)です。ややこしくなって申し訳ないです。
> heroku config === sample-app Config Vars key_test: test 環境変数には登録されているようなのですが、 App.js上に以下のように記載したところ、登録がないと怒られます。 > {console.log(JSON.stringify(process.env.key_test))} なお、以下も試したのですが、一覧を表示しても一覧に出ない状況でした。 > {console.log(JSON.stringify(process.env))} (Console.log(process.env)ではデータが受け取れなかったので探したところ上記で動くことがわかりました)
エラーは「undefined」ですが、それは「process.env」の中に「key_test」がないということだと理解してます(環境変数を受け取れない仕様ならprocess.envでデータが受け取れないはずですよね。)
ちなみにConsoleを開いてConsole.log(process.env)を後から取得しようとしても
Uncaught ReferenceError: process is not defined
at <anonymous>:1:1
と出ますので開いた後は任意のユーザーがprocess.envにアクセス出来ないようになっている、という認識でいました。
回答3件
あなたの回答
tips
プレビュー