こんにてぃあ。もぐめっとです。
本日はnuxtで環境変数を参照する際にひっかかったのでご紹介します。
どんな罠？
最近のNuxtはdotenvを使わずとも.envファイルをトップディレクトリに置いていると環境変数を読み込んでくれるようになりました。
しかし、process.env.HOGEとか参照しても値が全然とれないんです。
下記記事によると、RuntimeConfigに定義するという話があります。
しかし、これは$configにセットされるようでprocess.envに読み込まれるわけではないです。
私はprocess.envが使いたいんだーーー！
解決策
ということで社内で解決策を聞いたらサクッと答えが出ました。
答えは簡単でnuxt.config.jsのenvフィールドに追加するだけでした。
nuxt.config.js
export default {
env: {
HOGE: process.env.HOGE
}
}
これでどこから読んでもprocess.env.HOGEが呼ばれるようになりました。やったね！
まとめ
process.envをわざわざセットし直すのはなんだか手間に感じますが、nuxt.config.jsでもenvをセットすることで環境変数が使えるようになります！
最後に、ワンナイト人狼オンラインというゲームを作ってます！よかったら遊んでね！
他にもCameconやOffchaといったサービスも作ってるのでよかったら使ってね！
また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。