環境変数:$env/staticと$env/dynamic
SvelteKitでサーバーとクライアントから環境変数に安全にアクセスします。
「環境変数:$env/staticと$env/dynamic」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
SvelteKit env API
SvelteKitは、4つのモジュールを通じて環境変数を公開します:static/private、static/public、dynamic/private、dynamic/publicです。
静的・プライベート
ビルド時に読み込まれ、サーバーでのみ使用されます。クライアントバンドルからは除外されます。
import { DB_URL } from "$env/static/private";静的・パブリック
ビルド時に読み込まれ、PUBLIC_で始める必要があります。クライアントバンドルに含まれます。
import { PUBLIC_API_URL } from "$env/static/public";動的・プライベート
サーバー上で実行時に読み込まれます。再ビルドせずに設定を変更できるため便利です。
import { env } from "$env/dynamic/private";
console.log(env.SECRET);動的・パブリック
実行時に読み込まれ、クライアントとサーバーの両方で利用できます。PUBLIC_で始める必要があります。
適切なものを選ぶ
実行時に値が変わらない場合はstaticを、変わる場合(例:機能フラグ)はdynamicを使用します。
シークレットを公開しない
シークレットにPUBLIC_という接頭辞を付けないでください。クライアントバンドルに漏洩します。
Envファイル
値は.env(gitignore対象)と.env.example(コミット対象)に保存します。
型安全性
static変数には自動的に型が付きます。dynamic変数はRecord
VercelとCloudflare
各プラットフォームには独自の環境変数UIがあります。環境間の同期は意図的に行ってください。
テスト
環境変数モジュールに依存する場合は、テストでモック化します。
確認
パブリックな環境変数に必要な接頭辞は何ですか?
まとめ
シークレットには$env/static/privateを、クライアントで安全に扱える値にはPUBLIC_接頭辞付きの変数を使用します。必要に応じてstaticとdynamicを選びます。
よくある質問
「環境変数:$env/staticと$env/dynamic」レッスンは無料ですか?
はい。「環境変数:$env/staticと$env/dynamic」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「環境変数:$env/staticと$env/dynamic」で何を学びますか?
SvelteKitでサーバーとクライアントから環境変数に安全にアクセスします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「環境変数:$env/staticと$env/dynamic」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか?
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Form ActionsでのCSRF対策
- {#html}でのXSS対策
- 環境変数:$env/staticと$env/dynamic
- Hooksによるレート制限