Svelte(SvelteKit)의 단계 및 환경 변수

Svelte 애플리케이션을 개발하는 동안 애플리케이션이 실행되는 단계(로컬, 스테이징, 프로덕션 등)에 따라 다른 값을 사용해야 하는 시나리오를 접하게 될 것입니다.

예를 들어 로컬 서버에서 블로그 게시물을 가져와 +page.server.ts 경로 페이지로 전달하는 load 함수를 사용하는 다음 +page.svelte 파일이 있다고 가정해 보겠습니다.
+page.server.ts

import { error, type Load } from '@sveltejs/kit';

export const load: Load = async () => {
    const res = await fetch(`http://localhost:1337/api/blog-posts`);

    const { data } = await res.json();

    if (res.ok) {
        return { posts: data };
    }

    throw error(404, 'Unable to fetch posts');
};

이제 백엔드(API)를 배포했고 프로덕션에 프런트엔드(Svelte 애플리케이션)를 배포할 준비가 되었습니다. fetch에 제공된 URL이 localhost를 가리키고 있기 때문에 아직 할 수 없습니다. 배포된 API에서 가져오려면 해당 URL이 필요합니다(https://APP.herokuapp.com/api/blog-posts에 배포된 것으로 가정).

당연히 URL을 프로덕션 URL( https://APP.herokuapp.com/api/blog-posts )로 교체하고 배포한 다음 로컬을 변경할 때마다 다시 localhost( http://localhost:1337/api/blog-posts )로 변경할 수 있지만…

애플리케이션이 실행되는 단계에 따라 어떻게 동적으로 다른 URL을 사용할 수 있습니까?

SvelteKit 의 최신 버전에서 사용된 빌드 스크립트는 다음과 같습니다.

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  //...
}

(예전에는 그렇지 않았으며 이전에는 각각 svelte-kit dev 및 svelte-kit build였습니다.)

즉, 자동으로 제공되는 ViteMODE 환경 변수를 사용할 수 있습니다(더 나은 솔루션을 위해 계속 읽으십시오). 기본적으로 dev 서버(dev 명령)는 development 모드에서 실행되고 build 명령은 production 모드에서 실행됩니다. (모드에 대한 자세한 내용을 읽을 수 있습니다here ).
import.meta.env 를 사용하여 Vite를 통해 환경 변수에 액세스할 수 있으므로 MODE 를 참조하려면 const { MODE } = import.meta.env (또는 나처럼 destructuring 의 팬이 아닌 경우 const MODE = import.meta.env.MODE )을 사용할 수 있습니다.

예제로 돌아가서 다음을 제공하는 MODE에 삼항을 추가할 수 있습니다.
+page.server.ts

import { error, type Load } from '@sveltejs/kit';

const { MODE } = import.meta.env;
const LOCAL_URL = 'http://localhost:1337/api/blog-posts';
const PROD_URL = 'https://APP.herokuapp.com/api/blog-posts'; // Replace with whatever your deployed URL is

export const load: Load = async () => {
    const res = await fetch(MODE === 'development' ? LOCAL_URL : PROD_URL);

    const { data } = await res.json();

    if (res.ok) {
        return { blogs: data };
    }

    throw error(404, 'Unable to fetch blogs');
};

엔드포인트에 API 키가 필요하지 않다고 가정하면 위의 코드는 올바른 엔드포인트에 도달하고 단계별 데이터(🥳)를 반환해야 합니다. npm run build 모드에서 애플리케이션을 실행하기 위해 "production"를 실행하여 이를 확인할 수 있습니다.

사용자 지정.env 변수를 사용하여 이를 어떻게 단순화할 수 있습니까?

Vite는 dotenv 패키지를 사용하여 envDir(기본적으로 루트 디렉터리로 설정됨)에 추가 환경 변수를 로드합니다.

.env (loaded in all cases)
.env.local (loaded in all cases, ignored by git)
.env.[mode] (only loaded in specified mode)
.env.[mode].local (only loaded in specified mode, ignored by git)

주목해야 할 또 다른 몇 가지 사항:

특정 모드에 대한 env 파일(예: .env.production)은 일반 모드(예: .env)보다 우선 순위가 높습니다.

추가 환경 변수에는 VITE_ 접두사가 있어야 합니다.

이를 알면 다음을 만들 수 있습니다.
.env.development ("development" 모드의 루트 디렉토리에 있는 파일)

내용물:

VITE_API_URL=http://localhost:1337/api/blog-posts

.env.production ("production" 모드의 루트 디렉토리에 있는 파일)

내용물:

VITE_API_URL=https://APP.herokuapp.com/api/blog-posts

...삼항을 제거하고 VITE_API_URL 환경 변수만 사용하여 로드 기능을 단순화할 수 있습니다. SvelteKit은 $env/static/public 을 제공하므로 import.meta.env 대신 import { VITE_API_URL } from '$env/static/private'; 를 사용할 수 있습니다.
+page.server.ts

import { error, type Load } from '@sveltejs/kit';

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

export const load: Load = async () => {
    const res = await fetch(VITE_API_URL);

    const { data } = await res.json();

    if (res.ok) {
        return { blogs: data };
    }

    throw error(404, 'Unable to fetch blogs');
};

그게 다야! 👨‍💻

위 또는 다른 항목에 대한 추가 정보가 필요한 경우(예: staging 와 같은 새 환경 추가) Vite docs , SvelteKit docs 또는 공식Svelte discord 을 확인하십시오.