APIキーやデータベース認証情報などの環境変数は、.envファイルに追加でき、アプリケーションで使用可能になります。

.env.localまたは.env.[mode]ファイルも使用できます。詳細はViteのドキュメントを参照してください。機密情報を含むファイルはすべて.gitignoreファイルに追加してください！

process.env内の環境変数は、$env/static/privateからも利用可能です。

この演習では、正しいパスフレーズを知っていれば、ユーザーがウェブサイトにアクセスできるようにしたいと考えています。環境変数を使用します。

まず、.envに新しい環境変数を追加します。

PASSPHRASE="open sesame"

src/routes/+page.server.jsを開きます。$env/static/privateからPASSPHRASEをインポートし、フォームアクション内で使用します。

import { redirect, fail } from '@sveltejs/kit';
import { PASSPHRASE } from '$env/static/private';

export function load({ cookies }) {
	if (cookies.get('allowed')) {
		redirect(307, '/welcome');
	}
}

export const actions = {
	default: async ({ request, cookies }) => {
		const data = await request.formData();

		if (data.get('passphrase') === PASSPHRASE) {
			cookies.set('allowed', 'true', {
				path: '/'
			});

			redirect(303, '/welcome');
		}

		return fail(403, {
			incorrect: true
		});
	}
};

これで、正しいパスフレーズを知っている人なら誰でもウェブサイトにアクセスできるようになりました。

秘密の保持

機密データが誤ってブラウザに送信され、ハッカーや悪意のある者によって簡単に盗まれる可能性があるのを防ぐことが重要です。

SvelteKitは、これを簡単に防ぐことができます。PASSPHRASEをsrc/routes/+page.svelteにインポートしようとするとどうなるか見てみましょう。

<script>
	import { PASSPHRASE } from '$env/static/private';
	let { form } = $props();
</script>

エラーオーバーレイが表示され、$env/static/privateはクライアントサイドコードにインポートできないことが示されます。サーバーモジュールでのみインポートできます。

• +page.server.js
• +layout.server.js
• +server.js
• .server.jsで終わるモジュール
• src/lib/server内のモジュール

これらのモジュールは、他のサーバーモジュールからのみインポートできます。

静的と動的

$env/static/privateのstaticは、これらの値がビルド時に既知であり、静的に置き換えられることを示しています。これにより、便利な最適化が可能になります。

import { FEATURE_FLAG_X } from '$env/static/private';

if (FEATURE_FLAG_X === 'enabled') {
	// code in here will be removed from the build output
	// if FEATURE_FLAG_X is not enabled
}

場合によっては、動的な環境変数、つまりアプリを実行するまでわからない環境変数を参照する必要があるかもしれません。このケースについては、次の演習で説明します。