Vercel에서 Nuxt 서버 API 환경변수 안전하게 관리하기

Vercel에 Nuxt 프로젝트를 배포할 때, API 키 등 민감한 정보를 안전하게 서버에서만 사용하고 싶다면 환경변수를 올바르게 설정하는 것이 중요합니다. 이 글에서는 Vercel에서 환경변수(.env)를 등록하고, Nuxt 서버 API에서 안전하게 활용하는 방법을 단계별로 정리해 설명합니다.

1. Vercel에서 환경변수 등록하기

1️⃣ 프로젝트 대시보드 진입

• Vercel 대시보드에 로그인한 뒤
• 원하는 Nuxt 프로젝트를 클릭하세요.

2️⃣ Settings → Environment Variables

• 상단의 Settings 탭으로 이동
• 좌측 메뉴에서 Environment Variables를 선택합니다.

3️⃣ 환경변수 추가

아래 표와 같이 필요한 환경변수를 한 줄씩 추가해줍니다.

• Value 칸에 실제 키 전체를 입력합니다.
• Key 이름은 Nuxt 코드에서 process.env.XXX 로 사용할 이름이어야 합니다.
• Environment는 보통 All로 지정하면 모든 환경(Production, Preview, Development)에 적용됩니다.

4️⃣ 저장 후 재배포(Redeploy)

• 환경변수를 저장해도 자동으로 반영되지 않으니
  반드시 Deployments 탭에서 Redeploy 버튼을 눌러야 적용됩니다.

2. Nuxt에서 환경변수 사용하는 방법

Vercel에 등록한 환경변수는 서버 API 코드(server/api/*.ts) 에서 다음과 같이 사용할 수 있습니다.

const openaiKey = process.env.OPENAI_API_KEY

• 서버 코드에서는 process.env.XXX로 직접 접근 가능합니다.

⚡ 클라이언트 코드에서 사용하는 방법

• 만약 클라이언트(브라우저)에서 직접 환경변수를 써야 한다면
• 변수명에 NUXT_PUBLIC_ 접두사를 붙여야 합니다.

예시:

// 서버에서만: process.env.OPENAI_API_KEY
// 브라우저에서도: import.meta.env.NUXT_PUBLIC_SOME_KEY

3. 환경변수 활용 예시

서버 API에서 인증 헤더로 API 키를 사용하는 코드 예시:

headers: {
  Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
  'Content-Type': 'application/json',
}

4. 테스트 및 디버깅 팁

• console.log(process.env.OPENAI_API_KEY)는
  브라우저 콘솔이 아니라 Vercel 서버 함수 로그에서만 확인할 수 있습니다.
• 로그 확인은 Functions > Logs 탭에서 가능합니다.

5. 추가 팁: .env 템플릿과 관리

• 로컬 개발용 .env 파일은 git에 올리지 말고,
  .env.example 처럼 템플릿 파일로 공유하면 협업에 도움이 됩니다.
• 필요하다면 vercel.json에서 빌드 및 배포 설정을 세분화할 수도 있습니다.

이번 글에서는 Vercel에서 Nuxt 서버 API용 환경변수를 안전하게 설정하고, 실제 Nuxt 코드에서 활용하는 방법까지 정리해봤습니다.
환경변수는 민감 정보 보호의 핵심이므로, 항상 서버 전용(클라이언트 노출 금지)과 공개 변수를 분리해 관리하세요.
추후 vercel.json 고급 설정이나 다중 환경별 변수 관리 등 심화 내용도 다뤄볼 예정입니다.
안정적인 Nuxt 배포와 운영을 위해 환경변수 관리에 늘 신경 써주세요!