質問: { NODE_ENV: '"production"', VUE_APP_BUTTER_API_KEY: '"464a98d163b954e9ac9ee91798f56547b0e48eb4"' } ``` ### 考えていること * どうすればNetlifyに設定した環境変数が読めるのか? . * 「Netlifyに環境変数を設定した」と言っているが、`Build Environment Variables`であるため、これはビルド時に使用するためだけのもので、アプリケーション内でAPIを叩くなどのときに使用するものではないのでは? * 仮にそうだとすると、NetlifyでホスティングするときにCredentialは隠せないのではないか? . * ローカルで`export VUE_APP_BUTTER_API_KEY=ababababababab`(仮の値です)を実行し、ローカルで`npm run dev`を実行しても読めない(読む方法がわからない)ので、そもそもマシン毎の環境変数にAPI tokenを設定することが間違っている? * こちらの場合でも上と同じで、ではどうやって安全にAPI tokenをGithub上に置いてホスティングすればよいのか? ### 補足情報(FW/ツールのバージョンなど) Butter CMS API Reference ### まとめ 以上となります。VueもwebpackもNetlifyも触り始めた段階で前提から違っている可能性もありますが、ご存知の方がいらっしゃれば教えていただけると幸いです。よろしくお願いいたします。
回答: 手元で試せてはいないのですが node.jsとwebpack以後で環境変数は分断されているので、 prod.env.jsを調整してみるといかがでしょうか? ``` const settings = { NODE_ENV: '"production"', VUE_APP_BUTTER_API_KEY: `"${process.env. VUE_APP_BUTTER_API_KEY}"` // 修正箇所 } console.log(settings) // デバッグ用 module.exports settings ```