이 장의 내용 · 7
앞의 장들에서 계속 "비밀 키는 조심하세요"라고 했습니다. 그럼 비밀 키는 어디에 둬야 할까요? 답은 환경변수입니다.
16.1환경변수가 뭔가요?
코드 밖에 따로 적어 두는 설정값입니다. 코드에는 "SUPABASE_URL이라는 값을 써라"라고 이름만 적고, 실제 값은 별도 파일이나 서버 설정에 둡니다.
Next.js12장에서는 프로젝트 폴더의 .env.local 파일에 적습니다.
# .env.local
SUPABASE_URL=https://xxxx.supabase.co
SUPABASE_SECRET_KEY=sb_secret_...
NEXT_PUBLIC_TOSS_CLIENT_KEY=test_gck_...코드에서는 process.env.SUPABASE_URL처럼 이름으로 꺼내 씁니다.
16.2왜 코드 밖에 두나요?
- 코드는 공유됩니다: GitHub11장에 올리고, 팀원과 나누고, AI에게 보여 줍니다. 키가 코드에 있으면 함께 퍼집니다.
- 환경마다 값이 다릅니다: 내 컴퓨터에서는 테스트 키, 실제 사이트에서는 진짜 키. 코드는 그대로 두고 값만 바꾸면 됩니다.
- 교체가 쉽습니다: 키를 바꿔야 할 때 코드를 고칠 필요가 없습니다.
16.3NEXT_PUBLIC_, 공개 표시
Next.js에서 이름이 NEXT_PUBLIC_으로 시작하는 환경변수는 브라우저로 전달됩니다. 누구나 볼 수 있다는 뜻입니다.
- 공개해도 되는 값: 토스 결제위젯의 클라이언트 키처럼, 원래 브라우저에서 쓰도록 만든 키 → NEXT_PUBLIC_을 붙입니다.
- 비밀 값: Supabase14장 비밀 키, 결제 시크릿 키, 관리자 비밀번호 → 절대 붙이지 않습니다.
16.4.env.local은 GitHub에 올리지 않습니다
.gitignore 파일에 적힌 파일은 Git이 무시합니다. Next.js 프로젝트는 보통 처음부터 .env 파일들이 여기에 들어 있지만, 꼭 한 번 확인하세요.
# .gitignore
.env*16.5배포할 때는?
.env.local은 내 컴퓨터에만 있으니, 배포17장 서버에는 따로 알려 줘야 합니다. Vercel이나 Netlify 같은 호스팅 서비스는 대시보드에 환경변수 입력 칸이 있고, 직접 운영하는 서버라면 서버의 환경 설정에 넣습니다. 이름은 .env.local과 똑같이 맞추세요.
16.6자주 하는 실수 세 가지
- 비밀 키에 NEXT_PUBLIC_: 편하려고 붙였다가 키가 전 세계에 공개됩니다.
- 코드에 직접 붙여 넣기: "일단 테스트만" 하려다 그대로 올라가는 경우가 많습니다.
- .env 파일을 GitHub에: 한 번 올라간 키는 커밋을 지워도 기록에 남을 수 있습니다. 새어 나갔다면 즉시 그 키를 폐기하고 새로 발급하세요.
16.7AI에게 이렇게 말해 보세요
- “이 키는 브라우저에 공개해도 되는 키야?”
- “코드에 직접 들어간 키가 있는지 찾아서 환경변수로 옮겨 줘”
- “.env.local이 GitHub에 올라가지 않게 되어 있는지 확인해 줘”
17장에서는 드디어 내 컴퓨터 밖으로, 사이트를 세상에 내놓는 배포를 알아보겠습니다.
— 16장 끝 —