15 환경 변수 설정하기 – 개발 및 배포 환경에서 환경 변수 사용하기

 Next.js 프로젝트를 개발할 때, 환경 변수는 중요한 역할을 합니다. 환경 변수를 활용하면 애플리케이션의 설정 값이나 중요한 정보를 코드에서 직접 관리하지 않고 안전하게 사용할 수 있습니다. 이번 글에서는 Next.js에서 환경 변수를 설정하고, 이를 개발 환경과 배포 환경에서 어떻게 사용하는지에 대해 알아보겠습니다.

1. 환경 변수란?

환경 변수(environment variables)는 시스템의 환경 설정을 위한 값으로, 애플리케이션의 설정이나 중요한 정보를 코드에서 분리하여 외부에서 관리할 수 있게 해주는 변수입니다. 예를 들어, 데이터베이스 접속 정보나 API 키와 같은 민감한 정보는 환경 변수로 관리하는 것이 안전합니다.

2. Next.js에서 환경 변수 설정하기

Next.js에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 프로젝트 루트 디렉토리에 .env 파일을 생성하고 그 안에 환경 변수를 정의할 수 있습니다.

(a) 개발 환경에서 환경 변수 사용하기

개발 환경에서는 .env.local 파일을 사용하여 로컬 개발에 필요한 환경 변수를 설정합니다. 예를 들어, 다음과 같이 API 키를 설정할 수 있습니다.

// .env.local
NEXT_PUBLIC_API_KEY=your-api-key-here

이 파일은 로컬 개발 서버에서만 사용되며, Git에 커밋하지 않도록 .gitignore에 추가하는 것이 좋습니다.

(b) 배포 환경에서 환경 변수 사용하기

배포 환경에서는 .env.production 파일을 사용하여 배포에 필요한 환경 변수를 설정합니다. 이 파일은 Next.js 프로젝트가 배포된 서버에서 사용됩니다.

// .env.production
NEXT_PUBLIC_API_URL=https://api.example.com

Next.js에서는 NEXT_PUBLIC_ 접두사를 가진 환경 변수만 클라이언트 사이드에서 접근할 수 있습니다. 따라서 클라이언트 사이드에서 사용하려면 반드시 NEXT_PUBLIC_을 붙여야 합니다.

3. 환경 변수 사용 예시

환경 변수를 설정한 후, 이를 코드에서 사용할 수 있습니다. process.env 객체를 통해 환경 변수를 접근할 수 있습니다.

(a) 서버 사이드에서 환경 변수 사용하기

서버 사이드에서는 환경 변수에 직접 접근할 수 있습니다. 예를 들어, API 서버와 통신할 때 환경 변수를 사용하여 API URL을 설정할 수 있습니다.

// pages/api/data.js
export default async function handler(req, res) {
  const response = await fetch(`${process.env.API_URL}/data`);
  const data = await response.json();
  res.status(200).json(data);
}

(b) 클라이언트 사이드에서 환경 변수 사용하기

클라이언트 사이드에서는 NEXT_PUBLIC_ 접두사가 붙은 환경 변수만 사용 가능합니다. 예를 들어, API 키를 클라이언트에서 사용할 경우, 다음과 같이 접근할 수 있습니다.

// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`${process.env.NEXT_PUBLIC_API_URL}/data`)
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>API Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

4. 배포 시 환경 변수 설정하기

Next.js 프로젝트를 Vercel과 같은 배포 플랫폼에 배포할 때, 환경 변수를 설정하는 방법은 다소 다를 수 있습니다. Vercel에서는 프로젝트의 "Environment Variables" 섹션에서 환경 변수를 설정할 수 있습니다. 이때 설정한 환경 변수는 배포된 애플리케이션에서 자동으로 사용할 수 있습니다.

(a) Vercel에서 환경 변수 설정하기

1. Vercel 대시보드에서 프로젝트를 선택합니다.
2. "Settings" 탭을 클릭한 후 "Environment Variables" 섹션으로 이동합니다.
3. "Add" 버튼을 클릭하여 환경 변수를 추가합니다.

5. 환경 변수 보안 관리

환경 변수는 민감한 정보를 다루므로 보안에 유의해야 합니다. 예를 들어, .env.local 파일에는 API 키나 데이터베이스 접속 정보와 같은 민감한 정보가 포함될 수 있습니다. 이 파일은 Git에 포함되지 않도록 .gitignore에 추가해야 합니다.

# .gitignore
.env.local

또한, 클라이언트 사이드에서 사용할 환경 변수는 NEXT_PUBLIC_ 접두사를 사용하여 공개해야 하므로 민감한 정보를 클라이언트에서 사용하지 않도록 주의해야 합니다.

---

Next.js에서 환경 변수를 설정하고 사용하는 방법에 대해 알아보았습니다. 환경 변수는 애플리케이션의 설정을 안전하게 관리하는 데 필수적인 도구입니다. 개발 환경과 배포 환경에서 적절하게 환경 변수를 설정하고 사용하는 방법을 익히셨다면, 프로젝트의 보안성과 유지보수성이 더욱 향상될 것입니다.