フロント

locationプロパティでの環境別デプロイ

locationプロパティでの環境別デプロイ

Vue.jsでのLaravel環境変数の利用(process.env)

Laravel×Vue.jsでアプリ開発を進めていて、テスト環境や本番環境にデプロイする際に、
Vue.jsのコンポーネントからLaravelに対してaxiosのリクエスト先を環境毎に変えなければいけなくなります。
Vue.js側のファイルにLaravelの.envの値を読み込ませたい場合は、Node.jsのProcessオブジェクトを利用し
以下のようにコンパイル時に取得させるのが一般的だと思います。

let $axios = axios.create　({ 
　　baseURL: process.env.MIX_API_URL, 
　　timeout: 1000, 
　　headers: { 'Content-Type': 'application/json' } 
})

.env 
MIX_API_URL={APP_URL}

Node.js Processオブジェクト

Locationオブジェクトの利用

今回紹介したいのは、BプランとしてJSのLocationオブジェクトを利用する方法です。Locationオブジェクトでは現在のページの情報が取得できます。このブログだとlocation.protocol => https:となり、location.host=>mecha-labo.comとなります。もしテスト環境のテストメカラボ(http://test-mecha-labo.com)が存在したら、location.protocol=>http:となり、location.host=>test-mecha-labo.comとなります。ということで以下のように書けばprocess.envを利用せずともデプロイ先の内部apiのリクエストURLを自動的に読み込んでくれます。

let $axios = axios.create　({ 
　　baseURL: location.protocol + '//' + location.host,
　　timeout: 1000, 
　　headers: { 'Content-Type': 'application/json' } 
})

こんな書き方一体いつ使うのかという問題は置いときましょう、パイプラインでのjsコンパイルをやめたいとか、Bプランはあっても損は無いはずです。

Locationオブジェクトの使い方
Location

(補足).envの切替方法

環境毎に作成した,envファイル、.env.prodや.env.devを切り替えるタイミングは様々な方法があると思います。こういった細部のデプロイスクリプトも統一しておかないとどんどん分派して後で持ち寄って見ると後で面白かったりするのですが、チームや組織だと予め揃えられると良いですね。

①サーバー側で.envを置き換える
自動デプロイ時のコマンドで先に,envに置き換えた後にコンパイルします。

@project
cp .env.prod .env
npm run prod

②コンパイル時に読み込ませるファイルを切り替える

package.json
"scripts": 
　　　　{ "dev": "cross-env NODE_ENV=development ENV_FILE=env/.env.dev npm run development",
 　　　　"prod": "cross-env NODE_ENV=production ENV_FILE=env/.env.prod npm run production",
　　　　　// ... 略
 },
おすすめの記事