Laravel+Viteで環境変数を設定する

こんにちは。株式会社リンクネット、ソリューション事業部の森正です。

いろんなお客様のサイトを作成していると、サブディレクトリでLaravelプログラムを動かさないといけないケースもあるのですが、
その際に、axiosで指定するURLが開発環境と本番環境で異なってしまうといった問題が発生しました。

上記問題を解決するために、当社では環境変数にプレフィックスを設定することで対応しました。

この記事ではLaravel+Viteを使用した環境で、環境変数を設定する方法を紹介します。

■ 環境

$ sail artisan -V
Laravel Framework 9.19.0

$ sail php -v
PHP 8.0.21 (cli) (built: Aug  1 2022 07:41:08) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.21, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.21, Copyright (c), by Zend Technologies
    with Xdebug v3.1.4, Copyright (c) 2002-2022, by Derick Rethans

■ .env ファイルで環境変数を定義する

.env に環境変数を定義します。

PREFIX="/xxx/xxx"

読み込まれた値は import.meta.env に格納されるため、console.log() で確認してみます。

console.log(import.meta.env.PREFIX); // undefined

結果、上記の記述では参照することができませんでした。

調べてみると、Viteは、ビルド時に .env ファイルで定義された VITE_ から始まる環境変数のみを読み込む仕様となっているみたいです。
（参考サイト）https://ja.vitejs.dev/guide/env-and-mode.html#env-files

そのため、PREFIX を VITE_PREFIX に変更

VITE_PREFIX="/xxx/xxx"

console.log() で再度確認してみます。

console.log(import.meta.env.VITE_PREFIX); // /xxx/xxx

VITE_PREFIX の値を参照することができました。

■ 本番環境用の .env を作成する

開発環境と本番環境で環境変数の値を切り替えたいので、 .env.production を作成。

viteは build コマンド実行時、.env より .env.production が優先して適用されます。
（参考サイト）https://ja.vitejs.dev/guide/env-and-mode.html#modes

VITE_PREFIX="/yyy/yyy"

これで dev コマンド実行時は VITE_PREFIX="/xxx/xxx" が適用され、
build コマンドを実行時は .env.production が優先されるため VITE_PREFIX="/yyy/yyy" が参照できるようになりました。

■ 環境変数の使用

今回、開発環境ではプレフィックスを設定しないので、 .env の環境変数 VITE_PREFIX の値を空に変更。

VITE_PREFIX=""

本番環境は 『本番環境用の.envを作成する』 で定義した .env.production を使用します。

VITE_PREFIX="/yyy/yyy"

axiosのinterceptors で、本番環境で使用するURLにプレフィックスを追加します。
※interceptorsについては こちら をご確認ください。

import axios from 'axios';

window.axios = axios;

axios.interceptors.request.use(request => {
    // 環境変数（VITE_PREFIX）に値がある場合、URLに追加
    request.url = (import.meta.env.VITE_PREFIX ?? '') + request.url;
    return request;
});

開発環境では '/sample/user'、本番環境では '/yyy/yyy/sample/user' にアクセスされます。

axios.get('/sample/user')
    .then(response => {
        // 成功処理
    })
    .catch(error => {
        // 失敗処理
    });

■ まとめ

今回は本番プログラムをサブディレクトリで動かす必要があり、開発環境と本番環境でURLが異なったため、
環境変数を使用しプレフィックスの切り替えを行いました。
PHP側(controller)でURLを整形するといった方法もありますが、jsファイルを読み込んでいるViewが複数ある場合、
その都度整形する必要があったため、環境変数で切り替える方法を採用しました。
また、viteは本番環境だけでなく「mode」オプションを使用する事で、検証環境（staging）等の環境変数を定義することも可能です。