Svelte入門：リファレンス Configuration -Vol.8-

今日は、SvelteKitのリファレンスについて解説しています。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

KitConfig

kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：

svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。

例えば：

const config = {
  kit: {
    // KitConfig プロパティがここに入ります
    adapter: adapter(),
    paths: {
      base: '/my-app',
      assets: 'https://cdn.example.com'
    },
    // その他の設定...
  }
};

KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：

• adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
• paths: ベースパスやアセットパスなどのパス設定
• prerender: プリレンダリングの設定
• env: 環境変数の扱い方
• csp: コンテンツセキュリティポリシー設定
• alias: インポートパスのエイリアス
• files: さまざまなファイルやディレクトリの場所
• outDir: ビルド出力先のディレクトリ
• version: アプリケーションのバージョン管理方法

こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

env

env 環境変数の設定

dir?: string;

• デフォルト値: "." .env ファイルを検索するディレクトリです。

publicPrefix?: string;

• デフォルト値: "PUBLIC_" 環境変数がクライアント側のコードに公開しても安全であることを示すプレフィックスです。$env/static/public および $env/dynamic/public を参照してください。Vite の環境変数処理を使用している場合は、Vite の envPrefix を別途設定する必要がありますが、一般的にはその機能を使用する必要はありません。

privatePrefix?: string;

• デフォルト値: ""
• バージョン 1.21.0 以降で利用可能 環境変数がクライアント側のコードに公開すべきでないことを示すプレフィックスです。public プレフィックスまたは private プレフィックスのいずれにも一致しない環境変数は、完全に破棄されます。$env/static/private および $env/dynamic/private を参照してください。

環境変数の重要性

環境変数は、アプリケーションの設定や機密情報を管理するための重要な手段です。SvelteKit では、環境変数の安全な処理と使用方法に関する細かい制御が可能です。

SvelteKit の環境変数設定

1. .env ファイルの場所:
   • dir オプションを使用して、.env ファイルが配置されているディレクトリを指定できます
   • デフォルトでは、プロジェクトのルートディレクトリ（.）が使用されます
   • 例：複数の環境設定を分離したい場合は dir: "./config/env" などと指定できます
2. 公開環境変数:
   • publicPrefix で始まる環境変数は、クライアント側（ブラウザ）でも安全に使用できる変数として扱われます
   • デフォルトでは PUBLIC_ がプレフィックスとして使用されます
   • 例：PUBLIC_API_URL, PUBLIC_FEATURE_FLAGS など
   • これらは $env/static/public または $env/dynamic/public 経由でアクセス可能です
3. 非公開環境変数:
   • privatePrefix で始まる環境変数は、サーバー側でのみ使用できる変数として扱われます
   • デフォルトでは空文字（""）が設定されており、プレフィックスのない変数すべてが非公開とみなされます
   • 例：API_SECRET, DATABASE_PASSWORD など
   • これらは $env/static/private または $env/dynamic/private 経由でアクセス可能です
4. フィルタリング:
   • バージョン 1.21.0 以降、どちらのプレフィックスとも一致しない環境変数は破棄されます
   • これにより、意図しない環境変数の流出を防ぐセキュリティレイヤーが追加されます
5. 設定例:

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    env: {
      dir: './environments',
      publicPrefix: 'PUB_',
      privatePrefix: 'PRIV_'
    }
  }
};

6. Vite との関係:
   • SvelteKit は Vite 上に構築されていますが、環境変数の処理に関しては独自の仕組みを持っています
   • Vite の環境変数機能（import.meta.env）も使用できますが、SvelteKit の環境変数モジュールを使用する方が推奨されます

この設定により、セキュリティを維持しながら環境変数を効率的に管理できます。特に、クライアント側に公開して良い変数と、サーバー側だけで使用すべき機密変数を明確に区別できます。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。