Skip to content
SST
Blog Docs Console Examples
22K

Environment Variables

앱의 환경 변수를 관리하는 방법을 알아보세요.

환경 변수

여러분은 sst.config.ts를 통해 앱의 모든 스테이지에 걸쳐 모든 컴포넌트의 환경 변수를 관리할 수 있습니다.

SST는 자동으로 환경 변수와 .env 파일을 로드하지만, 이를 의존하는 것은 권장하지 않습니다.

권장 사항

일반적으로 데이터베이스 URL, 비밀 키, 기타 설정과 같은 정보를 공유하기 위해 환경 변수나 .env 파일을 사용합니다.

.env 파일을 권장하지 않는 이유를 이해하기 위해 각각의 방법을 자세히 살펴보겠습니다.

리소스 연결

.env 파일을 사용하는 일반적인 사례 중 하나는 앱 전체에서 데이터베이스 URL과 같은 정보를 공유하는 것입니다.

SST에서는 리소스를 직접 연결할 수 있습니다.

sst.config.ts
const rds = new sst.aws.Postgres("MyPostgres");


new sst.aws.Nextjs("MyWeb", {
  link: [rds]
});

그런 다음 Next.js 앱에서 JS SDK를 사용해 데이터베이스에 접근할 수 있습니다.

app/page.tsx
import { Resource } from "sst";


export const db = drizzle(client, {
  schema,
  database: Resource.MyPostgres.database,
  secretArn: Resource.MyPostgres.secretArn,
  resourceArn: Resource.MyPostgres.clusterArn
});

이 방식에는 몇 가지 주요 장점이 있습니다:

  1. 데이터베이스를 별도로 배포하고 .env 파일에 자격 증명을 저장할 필요가 없습니다.
  2. 각 단계마다 이를 업데이트할 필요가 없습니다.
  3. 팀원들과 이 URL을 공유할 필요가 없습니다.

팀원은 어떤 단계에서든 sst deploy를 실행하면 앱을 배포하고 리소스를 연결할 수 있습니다.

리소스 연결에 대해 더 알아볼 수 있습니다.

비밀값 관리

.env 파일의 또 다른 일반적인 사용 사례는 앱 전체에서 비밀값을 관리하는 것입니다.

SST는 비밀값을 처리하는 내장 방식을 제공합니다.

sst.config.ts
const secret = new sst.Secret("MySecret");


new sst.aws.Nextjs("MyWeb", {
  link: [secret]
});

sst secret CLI를 사용해 비밀값을 설정할 수 있습니다.

Terminal
sst secret set MySecret my-secret-value

이 방법은 .env 파일에 저장하고 실수로 Git에 커밋하는 것보다 훨씬 안전합니다.

비밀값에 대해 더 알아보세요.

기타 설정

마지막으로, 사람들은 일반적인 설정을 위해 .env 파일을 사용합니다. 이러한 설정은 단계별로 다르며 실제로 민감하지 않습니다. 예를 들어, 개발 환경과 프로덕션 환경에서 다른 SENTRY_DSN을 가질 수 있습니다.

이러한 설정을 sst.config.ts에 직접 넣고, 단계에 따라 적절한 값을 사용하는 것을 권장합니다.

sst.config.ts
const SENTRY_DSN = $app.stage !== "prod"
   ? "https://foo@sentry.io/bar"
   : "https://baz@sentry.io/qux";

또한 sst dev를 실행 중인지 sst deploy를 실행 중인지에 따라 조건부로 설정할 수도 있습니다.

sst.config.ts
const SENTRY_DSN = $dev === true
   ? "https://foo@sentry.io/bar"
   : "https://baz@sentry.io/qux";

이 값을 프론트엔드와 함수에 전달할 수 있습니다.

sst.config.ts
new sst.aws.Nextjs("MyWeb", {
  environment: {
    SENTRY_DSN
  }
});

$app과 $dev에 대해 더 알아보세요.

전통적인 방식

위에서 언급한 대로, SST는 전통적인 방식도 지원합니다. sst dev 또는 sst deploy를 실행할 때 환경 변수를 함께 사용할 수 있습니다.

Terminal
SOME_ENV_VAR=FOO sst deploy

sst.config.ts 파일에서 process.env를 사용해 이 환경 변수에 접근할 수 있습니다.

sst.config.ts
async run() {
  console.log(process.env.SOME_ENV_VAR); // FOO
}

하지만 이 환경 변수는 자동으로 프론트엔드나 함수에 추가되지 않습니다. 수동으로 추가해야 합니다.

sst.config.ts
new sst.aws.Nextjs("MyWeb", {
   environment: {
     SOME_ENV_VAR: process.env.SOME_ENV_VAR ?? "fallback value",
   }
});

SST가 이를 자동으로 처리하지 않는 이유는 여러 프론트엔드나 함수가 있을 수 있고, 모든 곳에 이 환경 변수를 로드하고 싶지 않을 수 있기 때문입니다.

이제 프론트엔드에서 이 환경 변수에 접근할 수 있습니다.

app/page.tsx
export default function Home() {
  return <p>Hello {process.env.SOME_ENV_VAR}</p>;
}

.env

프로젝트 루트에 .env 파일이 있는 경우에도 동일하게 작동합니다.

.env
SOME_ENV_VAR=FOO

이 파일은 sst.config.ts에서 process.env로 로드됩니다.

sst.config.ts
async run() {
  console.log(process.env.SOME_ENV_VAR); // FOO
}

또는 스테이지별 .env.dev 파일이 있는 경우,

.env.dev
SOME_ENV_VAR=BAR

--stage dev 옵션과 함께 sst deploy를 실행하면, 이 파일이 sst.config.ts에서 process.env로 로드됩니다.

sst.config.ts
async run() {
  console.log(process.env.SOME_ENV_VAR); // BAR
}

전통적인 방식도 작동하지만, 번거롭고 안전하지 않기 때문에 권장하지 않습니다.