41. Vue - 로컬 및 서버의 환경변수 구성

- 본 포스팅은 이전 포스팅에서 사용한 프로젝트와 이어지는 내용입니다. 

 

1. 개요 

- 이전 포스팅에서 Netlify serverless 함수를 사용하여 중요한 API key가 사용자측 브라우저에 노출되는 것을 막는 방법을 알아 보았다.

- 해당 프로젝트는 git이라는 공개 플랫폼에 소스코드가 공유되어 있다.

- 이 경우, 소스코드를 통해서 API key가 노출되는 문제점이 발생한다. 

- 이를 해결하기 위해 환경변수라는 것을 이용하여 API key를 감추는 방법을 알아보자.

---

2. 환경변수 설정

- 환경변수를 사용하기 위해서는 하나의 패키지를 설치해야한다. 

• 터미널 입력: npm i -D dotenv-webpack

 

a) webpack.config.js

- 새로운 패키지를 설치했으니 환경구성을 해줘야 한다. 

- webpack.config.js에 다음과 같이 작성한다. 

클릭하면 확대됩니다.

클릭하면 확대됩니다.

 

b) .env 파일 생성 및 작성 

- 루트경로에 .env 라는 이름의 파일을 생성한다. 

- 해당 파일에 API KEY를 작성한다. 

- 중간에 띄어쓰기나 따옴표를 작성하지 않도록 주의하자. 

클릭하면 확대됩니다. 

 

c) 기존 코드 수정

- 이제 기존에 API key가 노출되어 있던 소스코드 부분을 수정한다. 

클릭하면 확대됩니다.

- 위의 코드를 살펴보면, env는 점(.) 표기법을 사용하여 데이터를 가져온다. 

- 이는 env가 객체라는 것을 의미한다.

- 그러므로 자바스크립트의 객체 구조 분해 기능을 이용하여 코드를 간략화 할 수 있다. 

- 아래의 사진을 참고하자. 

 

클릭하면 확대됩니다.

 

---

3. git ignore 

- 지금까지 과정을 복기 해보자. 

- 소스코드에 존재하는 API key를 감추기 위해서 dotenv-webpack 패키지를 설치하였다. 

- 설치한 패키지를 프로젝트와 연결하기 위해 webpack.config.js 파일에 추가하였다. 

- .env파일을 생성 및 작성하여 환경변수를 선언하고 그 안에 API key 값을 저장하였다. 

- 그러나 해당 프로젝트를 git에 다시 업로드하면 이전처럼 .env파일에서 API key를 확인할 수 있게 된다.

- 어떻게 해야할까? 

 

a) git ignore 파일 작성 

- .env 파일이 git에 업로드 되지 못하게 하면 되는 부분이다. 

- 이를 위해서는 .gitignore 파일을 통해 해당 파일이 git에 업로드되지 못하도록 하면 된다. 

클릭하면 확대됩니다.

 

- 이제부터 API key 값은 로컬에서 관리할 수 있게 되었다. 

- git에 프로젝트를 올려도, API key가 없으니 함부로 사용할 수 없게 된다. 

- 하지만 문제가 한가지 있다. 해당 프로젝트를 netlify를 통해 배포하고 있기 때문이다. 

- API Key 없이 해당 프로젝트를 빌드한다면 아무런 기능도 동작하지 않는다. 어떻게 해야할까? 

 

---

4. Netlify 환경변수 구성 

- Netlify에 접속하여 배포된 프로젝트를 클릭하면, 다음과 같이 site settings라는 메뉴를 확인할 수 있다. 

클릭하면 확대됩니다.

 

- 그리고 Build & deploy라는 메뉴를 선택하여 들어가보면 Environment variables라는 부분이 있다. 

- 이 부분에 환경변수를 설정해주면 된다. 

- 반드시 .evn 파일에 작성한 환경변수의 key, value와 동일하게 작성해야 한다. 

클릭하면 확대됩니다.

클릭하면 확대됩니다.

- 이로써 API key를 로컬에서 환경변수로서 관리할 수 있게 되었으며, 

- Netlify 서버가 해킹되지 않는 이상, 해당 프로젝트의 API key는 보호받게 되는 것이다.