SveletkitとVercelにおける環境変数

この投稿はこちらからmy blog .
Webアプリケーションで環境変数を使用する場合は、process.env.YOUR_ENV ほとんどの場合.
私は、VertexでSvelteKitアプリを展開することについて書きましたprevious post .
この記事では、SveletKitで環境変数を使用して、Vercelでそれらを使用することについてあなたに言いますprocess.env .

1 . aを作成する.env ファイル
最初に、作成する.env プロジェクトのルートにファイルを追加し、変数を追加します.例えば、

// .env
VITE_MY_API_KEY="<MY_API_KEY>"
VITE_MY_URL="<MY_URL>"

変数にprefixを追加する必要があります.これはSvelteKitが使用するためですVite フードの下.
私はあなたが.env to .gitignore ところで.

Sveltekitにおける環境変数の使用
それはあなたのプロジェクトで使用できるように変数を変換します.
例えば、CREATEEnv.js インlib ディレクトリと宣言します.
ファイル名Env.js ) が、.svelte ファイル.

// src/lib/Env.js
export const MY_API_KEY = import.meta.env.VITE_MY_API_KEY;
export const MY_URL = import.meta.env.VITE_MY_URL;

import.meta.env オブジェクトはVITEです.
これで、プロジェクトでそれらを使用することができます.

// sample.svelte
import { MY_API_KEY } from '$lib/Env';

console.log(MY_API_KEY);

3 .使用process.env Vercelアプリで
環境変数を使用するにはprocess.env Vercelでは、svelte.config.js .

// svelte.config.js

const config = {
    kit: {
        // ...
        vite: {
            define: {
                'process.env': process.env,
            },
        },
    }
};

export default config;

次の設定をチェックcompilerOptions.paths of jsconfig.json . そうでない場合は、追加します.

// jsconfig.json
{
    // ...
    "compilerOptions": {
        "baseUrls": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"]
        }
    },
    // ...
}

最後に、これがベストプラクティスであることを知りませんが、例えば以下のようにします.

// sample.svelte
import { MY_API_KEY } from '$lib/Env';

let myApiKey;

if (process.env.NODE_ENV === 'production') {
    // For production
    myApiKey = process.env.MY_API_KEY;
} else {
    // For development
    myApiKey = MY_API_KEY;
}

Vercelの設定
これを参照article どのようにVercelであなたのアプリケーションを展開するために.
Vercel設定で環境変数を追加します.


完了
これでprocess.env VervelerでホストされているSveletKitアプリで.