환경 변수 설정

Next.js App Router 애플리케이션에서 환경 변수를 효과적으로 관리하는 것은 보안과 유연성을 위해 매우 중요합니다.

이 절에서는 환경 변수 설정 방법, 개발 및 프로덕션 환경에서의 처리, 그리고 관련 보안 고려사항에 대해 알아보겠습니다.

.env 파일 사용하기

Next.js는 .env 파일을 통해 환경 변수를 쉽게 관리할 수 있습니다. 프로젝트 루트에 다음과 같은 .env 파일들을 생성할 수 있습니다.

.env : 모든 환경에서 사용되는 기본 환경 변수
.env.local : 로컬 환경에서만 사용되는 환경 변수 (Git에 커밋되지 않음)
.env.development : 개발 환경에서 사용되는 환경 변수
.env.production : 프로덕션 환경에서 사용되는 환경 변수

예시

# .env.local
DATABASE_URL=mongodb://localhost:27017/myapp
API_KEY=your_api_key_here

클라이언트 사이드와 서버 사이드에서의 환경 변수 접근

Next.js는 환경 변수를 서버 사이드와 클라이언트 사이드에서 다르게 처리합니다.

서버 사이드에서는 모든 환경 변수에 접근할 수 있습니다.

// app/api/hello/route.js
export async function GET() {
  const dbUrl = process.env.DATABASE_URL;
  // 데이터베이스 연결 로직
  return new Response('Hello from API');
}

클라이언트 사이드에서는 NEXT_PUBLIC_ 접두사가 붙은 환경 변수만 접근 가능합니다.

// app/components/PublicConfig.js
'use client'
 
export function PublicConfig() {
  return <div>Public API URL: {process.env.NEXT_PUBLIC_API_URL}</div>
}

Vercel에서의 환경 변수 설정

Vercel과 같은 호스팅 플랫폼에서는 대시보드를 통해 환경 변수를 쉽게 설정할 수 있습니다.

Vercel 프로젝트 대시보드 접속
'Settings' > 'Environment Variables' 메뉴로 이동
키-값 쌍으로 환경 변수 추가
필요에 따라 특정 환경(개발, 프리뷰, 프로덕션)에만 적용되도록 설정

민감한 정보 관리

보안을 위해 다음 사항을 고려해야 합니다.

API 키, 비밀 키 등 민감한 정보는 절대 버전 관리 시스템에 포함시키지 않습니다.
.gitignore 파일에 .env.local과 같은 로컬 환경 파일을 추가합니다.
프로덕션 환경의 실제 값 대신 플레이스홀더를 사용합니다.

# .env.example
DATABASE_URL=your_database_url_here
API_KEY=your_api_key_here

11장 API 라우트와의 연관성

환경 변수 설정은 11장에서 다룬 API 라우트와 밀접하게 연관됩니다. API 라우트에서 환경 변수를 사용하여 데이터베이스 연결, 외부 API 인증 등을 처리할 수 있습니다. 예를 들어:

// app/api/users/route.js
import { connect } from '@/lib/database'
 
export async function GET() {
  const db = await connect(process.env.DATABASE_URL)
  const users = await db.collection('users').find().toArray()
  return new Response(JSON.stringify(users))
}

이렇게 환경 변수를 사용함으로써, 애플리케이션의 설정을 코드와 분리하여 유연성과 보안성을 높일 수 있습니다.

실습 : 다중 환경 설정 구현

다음과 같이 개발, 스테이징, 프로덕션 환경에 따라 다른 설정을 적용하는 환경 변수 구조를 설계하고 구현해보세요.

프로젝트 루트에 다음 파일들을 생성합니다.
- .env.development
- .env.staging
- .env.production
각 파일에 환경별 설정을 추가합니다.

# .env.development
NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL=mongodb://localhost:27017/myapp_dev
 
# .env.staging
NEXT_PUBLIC_API_URL=https://staging-api.myapp.com
DATABASE_URL=mongodb://staging-db.myapp.com/myapp_staging
 
# .env.production
NEXT_PUBLIC_API_URL=https://api.myapp.com
DATABASE_URL=mongodb://prod-db.myapp.com/myapp_prod

next.config.js 파일에서 환경별 설정을 로드하는 로직을 추가합니다.

// next.config.js
const path = require('path')
 
module.exports = {
  env: {
    ENVIRONMENT: process.env.NODE_ENV,
  },
  webpack: (config, { dev, isServer }) => {
    // 현재 환경에 따른 .env 파일 로드
    const envPath = path.join(__dirname, `.env.${process.env.NODE_ENV}`)
    require('dotenv').config({ path: envPath })
 
    return config
  },
}

애플리케이션에서 환경 변수를 사용하는 컴포넌트를 만듭니다.

// app/components/EnvironmentInfo.js
'use client'
 
export function EnvironmentInfo() {
  return (
    <div>
      <h2>Current Environment: {process.env.ENVIRONMENT}</h2>
      <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  )
}

이 컴포넌트를 페이지에 추가하고, 다양한 환경에서 애플리케이션을 실행하여 환경 변수가 올바르게 적용되는지 확인합니다.

이 실습을 통해 다중 환경 설정을 구현하고, 각 환경에 맞는 설정을 효과적으로 관리하는 방법을 익힐 수 있습니다. 이는 실제 프로덕션 애플리케이션에서 매우 중요한 기술입니다.

Vercel 배포 과정 커스텀 도메인 연결