過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>Laravel の <code>.env</code> 値を Vue.js 側で参照する方法</li><li><strong>Mix (旧 Laravel 9 以前)</strong>: キー名に <code>MIX_</code> プレフィックス → Vue 側 <code>process.env.MIX_API_URL</code></li><li><strong>Vite (Laravel 9.19+ 推奨)</strong>: キー名に <code>VITE_</code> プレフィックス → Vue 側 <code>import.meta.env.VITE_API_URL</code></li><li>ビルド時に埋め込まれる → <code>npm run dev/build</code> 後に値が反映</li><li><strong>機密情報はフロント露出 NG</strong> — API キー等はバックエンド側で扱う</li></ul></td></tr></table>
<h2>概要</h2>

<p>Laravel の <code>.env</code> に書いた値を Vue.js / フロントエンド JavaScript で参照したい場合、専用のプレフィックスを付けた変数だけがビルド時にフロントに公開されます。これは<strong>機密情報の意図しない流出を防ぐ仕組み</strong>です。</p>

<h2>Vite の場合（Laravel 9.19+ 推奨）</h2>

<p>Laravel 9.19 以降は <strong>Vite</strong> が標準ビルドツールになりました。プレフィックスは <code>VITE_</code>:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME="My App"
VITE_GOOGLE_MAPS_KEY=AIzaSy...</code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// Vue コンポーネント / JS ファイル
const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl);
// → "https://api.example.com"

// Vue テンプレート内
<template>
    <h1>{{ appName }}</h1>
</template>
<script setup>
const appName = import.meta.env.VITE_APP_NAME;
</script>

// 全変数を見る
console.log(import.meta.env);
// → { VITE_API_URL: "...", VITE_APP_NAME: "...", BASE_URL: "/", MODE: "production", ... }</code></pre>
<h2>Mix の場合（Laravel 9 以前 / レガシー）</h2>

<p>古い Laravel では Mix (webpack ラッパー) を使用。プレフィックスは <code>MIX_</code>:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># .env
MIX_API_URL=https://api.example.com
MIX_APP_NAME="My App"
MIX_SAMPLE=123</code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// Vue コンポーネント / JS ファイル
const apiUrl = process.env.MIX_API_URL;
console.log(apiUrl);  // → "https://api.example.com"

const value = process.env.MIX_SAMPLE;  // → "123" (文字列で返る)</code></pre>
<h2>ビルド必須</h2>

<p>これらの値はビルド時に静的に埋め込まれます。<code>.env</code> を変更したら必ず再ビルド:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 開発時（HMR 監視）
npm run dev
# Vite なら自動で再ビルドされる

# 本番ビルド
npm run build           # Vite
npm run production      # Mix

# .env 変更後は dev サーバを一度止めて再起動</code></pre>
<h2>config 経由で渡す方法（推奨パターン）</h2>

<p>直接 <code>.env</code> 値を JS に埋め込むのではなく、Blade 経由で渡す方が柔軟:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-blade">{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <script>
        window.AppConfig = @json([
            &apos;apiUrl&apos; => config(&apos;app.api_url&apos;),
            &apos;appName&apos; => config(&apos;app.name&apos;),
            &apos;csrfToken&apos; => csrf_token(),
            &apos;userId&apos; => auth()->id(),
        ]);
    </script>
</head>
<body>
    <div id="app"></div>
    @vite(&apos;resources/js/app.js&apos;)
</body>
</html></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// Vue 側
const apiUrl = window.AppConfig.apiUrl;
const userId = window.AppConfig.userId;

// この方式の利点:
// 1. ビルド不要（Blade レンダリング時に値が決まる）
// 2. ユーザ依存の値を埋め込める（userId / 権限 等）
// 3. 動的な設定（時刻・抽選結果）にも対応可能</code></pre>
<h2>注意: フロントに露出していい値だけ</h2>

<p><strong>VITE_ / MIX_ プレフィックスを付けた値はビルド成果物の JS に埋め込まれます</strong>。ブラウザの開発者ツール / view-source で読めるため、<strong>機密情報は絶対に付けない</strong>:</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#f3f4f6"><th>OK（フロント露出可）</th><th>NG（バックエンドのみ）</th></tr></thead>
<tbody>
<tr><td>API のベース URL</td><td>DB パスワード</td></tr>
<tr><td>アプリ名</td><td>JWT 署名キー</td></tr>
<tr><td>環境名（production/staging）</td><td>Stripe シークレットキー</td></tr>
<tr><td>Google Maps の公開キー</td><td>AWS Secret Access Key</td></tr>
<tr><td>Sentry DSN（半公開）</td><td>メール SMTP パスワード</td></tr>
</tbody>
</table>

<h2>Mix から Vite への移行</h2>

<p>Laravel 9.19+ で新規プロジェクトを作ると Vite がデフォルト。既存の Mix プロジェクトを Vite に移行する場合:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 1. 依存削除・追加
npm remove laravel-mix
npm install --save-dev vite laravel-vite-plugin

# 2. .env の MIX_ → VITE_ にリネーム
sed -i &apos;s/^MIX_/VITE_/&apos; .env

# 3. JS / Vue 内の参照を書き換え
# process.env.MIX_FOO → import.meta.env.VITE_FOO

# 4. webpack.mix.js → vite.config.js
# 5. Blade で @vite ディレクティブを使うように変更</code></pre>
<h2>環境ごとに値を変える</h2>

<p>開発・ステージング・本番で別の値を使う場合:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 開発: .env (or .env.local)
VITE_API_URL=http://localhost:8000/api

# 本番: .env.production
VITE_API_URL=https://api.example.com

# ビルド時に環境を指定
npm run build -- --mode production</code></pre>
<h2>よくあるハマりどころ</h2>

<ul>
<li><strong>値が undefined になる</strong>: プレフィックス忘れ。<code>VITE_</code> / <code>MIX_</code> が付いているか確認</li>
<li><strong>再ビルドしていない</strong>: <code>.env</code> 変更後は必ず <code>npm run dev/build</code></li>
<li><strong>HMR で反映されない</strong>: <code>.env</code> 変更は HMR でも検知しない場合あり → dev サーバ再起動</li>
<li><strong>本番だけ undefined</strong>: 本番用 .env が VITE_ プレフィックス付きで設定されているか CI/CD で確認</li>
<li><strong>キー名のスペース</strong>: <code>VITE_API URL=xxx</code> はダメ。スペースなし</li>
</ul>