서버리스 함수로 API 키 같은 민감 정보를 어떻게 관리할까요?

API 키·토큰 같은 민감 정보를 브라우저에 내려보내면 누구나 볼 수 있습니다. 개발자 도구나 네트워크 탭, 번들 파일에서 그대로 노출되기 때문입니다. 그래서 비밀은 서버 측에서만 다뤄야 합니다.

왜 프런트엔드에 두면 안 되나

클라이언트로 전송된 코드와 통신은 모두 사용자가 들여다볼 수 있습니다. 환경 변수로 넣더라도 빌드 시 번들에 박히면 결국 노출됩니다. (Next.js의 NEXT_PUBLIC_ 접두사 변수도 마찬가지로 공개됩니다.)

서버리스 함수로 중계(proxy)하기

서버리스 함수(예: Vercel Functions, AWS Lambda, Cloudflare Workers)를 중간 계층으로 두는 패턴입니다.

1. 클라이언트는 우리 서버리스 함수의 엔드포인트만 호출합니다.
2. 서버리스 함수가 서버 환경 변수에 저장된 비밀 키를 사용해 외부 API를 호출합니다.
3. 결과만 클라이언트로 돌려줍니다.

// /api/weather  (서버리스 함수 — 서버에서만 실행)
export async function GET(req) {
  const key = process.env.WEATHER_API_KEY; // 서버 전용, 번들에 안 실림
  const res = await fetch(`https://api.example.com/weather?key=${key}`);
  return Response.json(await res.json());
}

안전 관리 원칙

• 비밀 키는 서버 환경 변수(플랫폼의 시크릿 설정)에 저장하고 코드·저장소에 커밋하지 않습니다.
• .env는 .gitignore로 제외합니다.
• 키에 최소 권한과 가능하면 사용량 제한·도메인 제한을 둡니다.
• 키 유출 시 즉시 로테이션(재발급) 합니다.

핵심은 “비밀은 절대 클라이언트로 보내지 않고, 서버리스 함수가 대신 호출한다”는 것입니다.