.env 파일을 통한 환경변수 관리하기

이번에 NewYorkTimes의 api를 활용하여  newpage 만드는 미니 프로젝트를 진행하는데 

API 토큰 키를 git에 포함시키지 않고 쉽게 교체할 수 있게 하라는 요구사항이 있었다.

 

 

앱과 서버 간의 통신 또는 자바 스크립트 웹 클라이언트와 서버 간 대부분의 통신이 이 API들을 이용해서,

이루어지기 때문에 한번 보안이 뚫리면 개인 정보가 탈취되는 것뿐만 아니라, 더 많은 문제를 일으킬 수 있다.

그렇기 때문에 api 토큰에 관해 보안에 대해 신경을 꼭 잘 써야 한다.

 

API 토큰을 관리하는 방법을 알아보자

 

dotenv 라이브러리를 활용

아래처럼 설치를 해주면 되는데

$ npm i dotenv

 만약 react프로젝트로 create-react-app으로 설치를 했다면 이미 함께 설치가 되어있기 때문에 

따로 설치하지 않아도 된다. 

 

난 react 프로젝트를 진행하고 있어 따로 설치하지 않고 진행하였다.

위 사진처럼 프로젝트 최상단 폴더에 .env 파일을 생성하고

 

안에 작성할때는 

 

키=값 이렇게 작성하면 된다.

예시)

NYT_API_KEY = ABCD

 

주의할 점!!

react 프로젝트 시 꼭 REACT_APP_ 를 앞에 작성하고 작성하면 된다.

예시는 위의 사진을 참고하자

 

 

 

그리고 키값을 사용할 때(API를 사용하는 컴포넌트나 redux위치)는 그 위에 변수로 불러와서 사용하면 되는데 

require("dotenv").config();

const 키변수 = process.env. 키

 

이렇게 작성하면 된다. 

 

React 프로젝트에서는 위에 작성된 아래 문구는 생략 가능하다.

require("dotenv").config();

그래서 아래 그림처럼

const 키 변수 = process.env. 키 이렇게만 작성해주면 된다.

 

 

그리고 .gitignore 파일에  .env 파일을 넣어주고 push 할 때는 올라가지 않도록 해준다.

 

 

---

Next.js 시 env키 설정하기

 

react와 동일하게 따로 설치는 필요 없다

 

많이 다를 것은 없다. 아래처럼 

const API_KEY=process.env.API_KEY;

//next.config.js

const API_KEY = process.env.API_KEY;

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

// .env

API_KEY=12345

만약  .env파일의 내용이 undefined로 읽어오지 못한다면 변수명 앞에 

NEXT_PUBLIC_를 붙여서 해보자

 

NEXT_PUBLIC_API_KEY=키번호

const API_KEY = process.env.NEXT_PUBLIC_API_KEY

 

위에 작성되어 있는 코드가 궁금하고 api를 숨기는 다른 방법이 궁금하다면 아래 게시글에 들어가서 확인하자

https://dkfma6033.tistory.com/173

[Next.js] api키 숨기기 / redirect / rewrite