Laravel Reactでenvに設定した環境変数を読み取る

2022年1月23日

Laravel Reactでenvに設定した環境変数を読み取る

https://laravel-mix.com/extensions/env-file

上記のlaravel mixのドキュメントを参考に、以下をwebpack.min.jsに以下を記載。

let mix = require('laravel-mix');
require('mix-env-file');

mix.env(process.env.ENV_FILE);

package.jsonの内容を変更

環境ごとのenvファイルを読み込めるように設定する。

変更前

"scripts": {
        "dev": "npm run development",
        (中略)
        "prod": "npm run production",
 },

変更後

"scripts": {
        "dev": "cross-env ENV_FILE=./.env.dev npm run development",
        (中略)
        "prod": "cross-env ENV_FILE=./.env.prod npm run production",
},

必要なパッケージをインストール

npm install dotenv
npm install mix-env-file

環境変数の設定、読み取り

envファイルに「MIX_」のプレフィックスをつけた変数を定義し、以下のような形で取得します。

console.log(process.env.MIX_SAMPLE);