4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

SvelteKitの環境変数の仕組みを使って接続先を切り替える

Last updated at Posted at 2025-12-17

この記事はRust+SvelteKit+CDK で RSS 要約アプリを作ってみる Advent Calendar 2025の 18 日目の記事になります。

また、筆者が属している株式会社野村総合研究所のアドベントカレンダーもあるので、ぜひ購読ください。

はじめに

SvelteKit などのモダンなフレームワークでアプリケーションを開発する際、環境変数の管理方法はそのフレームワークの仕様に強く依存します。
今回は、ローカル開発(LocalStack)とクラウド環境(AWS)のように複数の環境を行き来するので、DB への接続情報などをどのように切り替えるかは重要な設計ポイントになります。

SvelteKit の環境変数モジュール($env)を活用して、これらを管理する方法を紹介します。

SvelteKit の環境変数モジュール:Static vs Dynamic

SvelteKit には、環境変数を扱うためのモジュールが 4 つ用意されています。

モジュール 特徴 用途の例
$env/static/private ビルド時 に値が定まり、クライアントには漏れない API キー、シークレット(ビルド時に確定するもの)
$env/static/public ビルド時 に値が定まり、クライアントからも見える Google Analytics ID、API のエンドポイント
$env/dynamic/private 実行時 に値を読み込み、クライアントには漏れない 実行環境によって変わる DB 接続先
$env/dynamic/public 実行時 に値を読み込み、クライアントからも見える ブラウザからアクセスする動的な API URL

実装例:  DynamoDB クライアント

src/lib/db.tsの実装を見てみましょう。ここでは、ローカル開発時(LocalStack)と本番環境(AWS)の両方に対応するために、Static と Dynamic を組み合わせています。

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb";
// ビルド時に確定する基本的な認証情報
import {
  AWS_ACCESS_KEY_ID,
  AWS_REGION,
  AWS_SECRET_ACCESS_KEY,
} from "$env/static/private";
// 実行時に注入される可能性のあるエンドポイント設定
import { env } from "$env/dynamic/private";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const clientConfig: any = {
  region: AWS_REGION,
};

// ローカル開発環境の場合のみ明示的な認証情報を設定
// 本番環境(IAMロール使用時)は環境変数が空になることを想定
if (AWS_ACCESS_KEY_ID && AWS_SECRET_ACCESS_KEY) {
  clientConfig.credentials = {
    accessKeyId: AWS_ACCESS_KEY_ID,
    secretAccessKey: AWS_SECRET_ACCESS_KEY,
  };
}

// LocalStack用のエンドポイントURL設定
// Docker Composeなどで立ち上げたLocalStackに向ける場合はここを設定する
if (env.AWS_ENDPOINT_URL_DYNAMODB) {
  clientConfig.endpoint = env.AWS_ENDPOINT_URL_DYNAMODB;
}

const client = new DynamoDBClient(clientConfig);
export const docClient = DynamoDBDocumentClient.from(client);

Static Private の活用

AWS_REGIONなどは基本的に変更しないため、$env/static/privateから読み込んでいます。これにより、ビルド時に値が埋め込まれ、最適化されます。static な環境変数の場合、あらかじめ決まっているはずなので環境変数名で import します。

Dynamic Private の活用

AWS_ENDPOINT_URL_DYNAMODBは、$env/dynamic/private(コード内のenvオブジェクト)から取得しています。
これは、開発者が自分のマシンで LocalStack を別のポートで起動した場合や、CI/CD パイプライン上でのテスト時など、開発サーバ起動時に動的に値を差し替えたいケースがあるためです。こうすることで、static な環境変数で実環境への接続を想定しつつ、実行時に動的にローカル環境に向けさせることが可能になります。

LocalStack と本番環境の共存

この設計により、環境変数を切り替えるだけで動作モードを変更できます。

ローカル開発(LocalStack)

.envファイルに以下を記述します。

AWS_REGION=ap-northeast-1
AWS_ACCESS_KEY_ID=test
AWS_SECRET_ACCESS_KEY=test
AWS_ENDPOINT_URL_DYNAMODB=http://localhost:4566

本番環境(AWS Lambda / App Runner など)s

AWS リソースには IAM ロールが割り当てられるため、アクセスキーの環境変数は設定しません。
また、DynamoDB への接続はネイティブのエンドポイントを使うため、AWS_ENDPOINT_URL_DYNAMODBも設定しません。

コード上の if 文がうまく働き、環境変数の有無だけで自動的に正しい接続方法が選択されます。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?