.env

.env 파일은 빌드/개발 시점의 환경 변수를 지정합니다.
이 파일은 비밀 값이 저장소에 푸시되는 것을 방지하기 위해 .gitignore 파일에 추가해야 합니다.

Dev, Build and Generate Time

Nuxt CLI는 개발 모드와 nuxt build, nuxt generate를 실행할 때 내장된 dotenv 지원을 제공합니다.

프로세스 환경 변수 외에도, 프로젝트 루트 디렉터리에 .env 파일이 있다면 dev, build, generate 시점에 자동으로 로드됩니다. 여기에 설정된 모든 환경 변수는 nuxt.config 파일과 모듈 내에서 접근할 수 있습니다.

.env
MY_ENV_VARIABLE=hello
.env에서 변수를 제거하거나 .env 파일 자체를 완전히 삭제하더라도 이미 설정된 값이 해제되지는 않는다는 점에 유의하세요.

Custom File

.env.local 또는 .env.production처럼 다른 파일을 사용하고 싶다면, Nuxt CLI를 사용할 때 --dotenv 플래그를 전달하여 사용할 수 있습니다.

Terminal
npx nuxt dev --dotenv .env.local

개발 모드에서 .env를 업데이트하면, 새로운 값을 process.env에 적용하기 위해 Nuxt 인스턴스가 자동으로 재시작됩니다.

애플리케이션 코드에서는 일반 env 변수가 아니라 Runtime Config를 사용해야 합니다.

Production

서버가 빌드된 이후에는, 서버를 실행할 때 환경 변수를 설정하는 책임은 여러분에게 있습니다.

이 시점에서는 .env 파일이 읽히지 않습니다. 이를 어떻게 설정하는지는 환경마다 다릅니다.

이러한 설계 결정은, Cloudflare Workers와 같은 엣지 네트워크나 서버리스 플랫폼처럼 전통적인 파일 시스템이 없을 수도 있는 다양한 배포 환경 간의 호환성을 보장하기 위해 이루어졌습니다.

프로덕션에서는 .env 파일이 사용되지 않으므로, 호스팅 환경에서 제공하는 도구와 방법을 사용해 환경 변수를 명시적으로 설정해야 합니다. 일반적인 접근 방식은 다음과 같습니다.

  • 터미널에서 인자로 환경 변수를 전달할 수 있습니다.

$ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs

  • .bashrc.profile 같은 셸 설정 파일에 환경 변수를 설정할 수 있습니다.
  • Vercel, Netlify, AWS와 같은 많은 클라우드 서비스 제공자는 대시보드, CLI 도구 또는 설정 파일을 통해 환경 변수를 설정할 수 있는 인터페이스를 제공합니다.
프로덕션에서는 runtimeConfigNUXT_로 시작하지 않는 환경 변수를 가져오지 못합니다 (https://nuxt.com/docs/4.x/guide/going-further/runtime-config#environment-variables).

Production Preview

로컬 프로덕션 프리뷰 목적이라면 nuxt preview를 사용하는 것을 권장합니다. 이 명령을 사용하면 편의를 위해 .env 파일이 process.env로 로드됩니다. 이 명령은 패키지 디렉터리에 의존성이 설치되어 있어야 한다는 점에 유의하세요.

또는 터미널에서 인자로 환경 변수를 전달할 수도 있습니다. 예를 들어, Linux 또는 macOS에서는 다음과 같습니다.

Terminal
DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs

순수 정적 사이트의 경우, 프로젝트가 사전 렌더링된 이후에는 런타임 설정을 구성하는 것이 불가능하다는 점에 유의하세요.

Read more in Docs > 4 X > Guide > Going Further > Runtime Config.
빌드 시점에 설정된 환경 변수를 사용하고 싶지만, 이후에 이를 업데이트할 필요가 없거나(또는 앱 내부 에서 반응형으로만 업데이트하면 되는 경우) appConfig가 더 나은 선택일 수 있습니다. appConfignuxt.config 내(환경 변수를 사용하여)와 프로젝트의 ~/app.config.ts 파일 내 양쪽 모두에서 정의할 수 있습니다.
Read more in Docs > 4 X > Directory Structure > App > App Config.