SvelteKitの環境変数でハマる理由：
devでは読めるのにbuild後のクライアントで反映されない原因と対策

# PUBLIC_ が付いた変数 → ブラウザに公開される可能性がある
PUBLIC_SITE_URL=https://www.example.com
PUBLIC_API_BASE_URL=https://api.example.com

# PUBLIC_ がない変数 → サーバーのみで使える（クライアントからアクセス不可）
DB_HOST=localhost
DB_PASSWORD=super_secret
MYSQL_SOCKET=/run/mysqld/mysqld.sock

import { PUBLIC_SITE_URL, PUBLIC_API_BASE_URL } from '$env/static/public';

// クライアントでもサーバーでも使える
export const siteUrl    = PUBLIC_SITE_URL;
export const apiBaseUrl = PUBLIC_API_BASE_URL;

# 1. ローカルで staging 向けにビルド
$ bun run build
  → この時点で .env の PUBLIC_SITE_URL が JS に埋め込まれる

# 2. build/ フォルダをステージングサーバーに配置
# 3. Docker Compose で env_file を指定して起動
$ docker compose up
  → env_file の値はサーバー（Node.js プロセス）には届く
  → しかし build/client/*.js はビルド済み = 値は変わらない

# クライアント側では古い値のまま...

import { env } from '$env/dynamic/private';

// Docker の env_file に書かれた値がここで読める
export const dbConfig = {
  host:     env.DB_HOST,
  socket:   env.MYSQL_SOCKET,
  password: env.DB_PASSWORD,
};

services:
  app:
    image: my-sveltekit-app
    env_file:
      - ./app/.env.staging   # ← コンテナ起動時の環境変数として適用

PUBLIC_SITE_URL=https://staging.example.com
PUBLIC_API_BASE_URL=https://api.staging.example.com
DB_HOST=staging-db.internal

# --mode を指定すると .env.staging を読み込む
$ vite build --mode staging

# bun を使っている場合
$ bun run build --mode staging

import { env } from '$env/dynamic/private';  // ← サーバー専用ファイルならOK
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  // DB から取得した値など、クライアントに渡してよいものだけを返す
  return {
    origin: env.ORIGIN,
  };
};

# ブラウザに公開される値（PUBLIC_ 付き）
PUBLIC_SITE_URL=https://staging.example.com
PUBLIC_API_BASE_URL=https://api.staging.example.com

# サーバー側でのみ使う値
ORIGIN=https://staging.example.com
MYSQL_SOCKET=/run/mysqld/mysqld.sock
DB_PASSWORD=staging_secret

import { PUBLIC_SITE_URL, PUBLIC_API_BASE_URL } from '$env/static/public';

// ビルド時に確定。クライアントでもサーバーでも使える。
export const siteUrl    = PUBLIC_SITE_URL;
export const apiBaseUrl = PUBLIC_API_BASE_URL;

<script>
  import { siteUrl } from '$lib/config';
</script>

<svelte:head>
  <link rel="canonical" href={siteUrl} />
  <meta property="og:url" content={siteUrl} />
</svelte:head>

import { env } from '$env/dynamic/private';

// Docker の env_file → コンテナ起動時に process.env 経由で読まれる
export const dbConfig = {
  socket:   env.MYSQL_SOCKET,
  password: env.DB_PASSWORD,
};

import { json } from '@sveltejs/kit';
import { env } from '$env/dynamic/private';

export const GET = () => {
  // 公開してよい値だけを返す。DB パスワードなどは絶対に含めない。
  return json({
    siteUrl: env.ORIGIN,
  });
};