API キーやデータベースの認証情報などの環境変数は .env ファイルに追加することでき、アプリケーションから使えるようになります。
また、
.env.localファイルや.env.[mode]ファイルも使えます — 詳細は Vite のドキュメント をご覧ください。機密情報を含むファイルは必ず.gitignoreファイルに追加してください！
process.envにある環境変数も$env/static/private経由で使うことができます。
この練習問題では、環境変数を使って、正しいパスフレーズを知っているユーザーのみ web サイトを見ることができるようにしたいと思います。
まず、.env に新しい環境変数を追加します。
PASSPHRASE="open sesame"src/routes/+page.server.js を開いてください。$env/static/private から PASSPHRASE をインポートし、form action の中でそれを使用してください。
import { redirect, fail } from '@sveltejs/kit';
import { PASSPHRASE } from '$env/static/private';
export function load({ cookies }) {
if (cookies.get('allowed')) {
throw 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: '/'
});
throw redirect(303, '/welcome');
}
return fail(403, {
incorrect: true
});
}
};正しいパスフレーズを知っている人が、web サイトにアクセスできるようになりました。
Keeping secrets
機密データが誤ってブラウザに送信されるとハッカーや悪者に簡単に盗まれてしまうので、そうならないようにすることが重要です。
SvelteKit では、これを簡単に防ぐことができます。もし PASSPHRASE を src/routes/+page.svelte にインポートしようとしたらどうなるか確認してみましょう。
<script>
import { PASSPHRASE } from '$env/static/private';
export let form;
</script>エラーオーバーレイが表示され、$env/static/private はクライアントサイドコードにインポートできないことを教えてくれます。これはサーバーモジュールにのみインポートすることができます。
+page.server.js+layout.server.js+server.js.server.jsで終わるモジュールsrc/lib/serverに置いてあるモジュール
同様に、これらのモジュールは他のサーバーモジュールにのみインポートすることができます。
Static vs dynamic
$env/static/private にある static とは、これらの値がビルド時に解決され、 静的に置き換えられる ということを示しています。これによって最適化が可能になります。
import { FEATURE_FLAG_X } from '$env/static/private';
if (FEATURE_FLAG_X === 'enabled') {
// FEATURE_FLAG_X が enabled でない場合、
// ここにあるコードはビルド出力から削除されます
}場合によっては、 動的 な環境変数 — 言い換えると、アプリの実行時までわからない環境変数を参照する必要があるかもしれません。これについては、次の練習問題で説明します。