laravel-mixでAPP_ENVごとに読み込む.envを変更する

Laravelで環境ごとの.envファイルを
.env.local
.env.staging
.env.production

と分けたりすると思うんですが
このLaravel側の.envを
js側でも環境に応じて読み込みを変えていきたい場合の対応法です

前提条件

• docker-composeでAPP_ENVを定義している(local/staging/production)
• Laravelで下記のような.envファイルが環境ごとに存在する
  • .env.local
  • .env.staging
  • .env.production
• laravel-mixでwebpackのビルドステップを定義している

対応方法

1. dotenvとdotenv-expandをnpm install
2. webpack.mix.js に下記を追記
   webpack.mix.js

   const dotenvExpand = require('dotenv-expand');
   dotenvExpand(require('dotenv').config({path: `./.env.${process.env.APP_ENV}`}));
   

3. 読み込みされていることを確認
   _env.js

   const env = {
     studiounbuilt_url: process.env.MIX_STUDIOUNBUILT_URL,
   }
   
   export default env
   

最後に

js環境構築周りナニモワカラナイと言って数年経ってます。
laravel-mixはもう卒業した方がいい気もしている。

---

私はバックエンドをめっちゃ頑張るので
一緒に働いてくれるフロントエンジニアを募集しています。

↓興味のある方はこちらから↓
Wantedly - スタジオアンビルト株式会社

こんなWebサービスを作っています。
・マドリー
・Studio Unbuilt