[Vue.js] 영화 검색 사이트 예제 - 41. 로컬 및 서버의 환경 변수 구성
우리는 API_KEY를 숨기기 위해 1차적으로 서버리스 함수를 사용하여 더 이상 클라이언트 환경에 키를 보관하지 않는다.
그러나 이런 방식도 서버리스 함수가 저장된 파일을 GitHub에 업로드하게 되면 똑같이 key 정보를 열람할 수 있다.
이를 보완하기 위해서는 환경변수라는 것을 이용하면 된다.
환경변수 생성하기
참조) dotenv-webpack - npm (npmjs.com)
dotenv-webpack
A simple webpack plugin to support dotenv.. Latest version: 7.1.0, last published: 2 months ago. Start using dotenv-webpack in your project by running `npm i dotenv-webpack`. There are 421 other projects in the npm registry using dotenv-webpack.
www.npmjs.com
다음의 명령어로 dotenv-webpack을 설치한다
npm i -D dotenv-webpack/webpack.config.js
plugin에 Dotenv를 명시한다.
/.env 생성
중간에 띄어쓰기나 따옴표가 들어가지 않도록 주의한다.
사용하기
기존에 사용했던 부분에 process.env를 통해 환경변수를 할당한다.
객체 구조분해를 사용하면 더 간소화할 수 있다.
테스트
잘 동작한다.
배포하기
GitHub에 그대로 환경변수 파일을 배포하게 되면 .env를 바로 확인할 수 있으므로 .gitignore에 등록한다.
GitHub에 등록하지 않으므로 환경변수는 우리가 따로 관리해주어아 햔다.
즉, Netlify는 GitHub를 기반으로 만들어지므로 Netlify에 직접 환경변수를 등록해주어야 한다.
Netlify - Site Settings - Build & deploy - Environment
Edit variables를 눌러 환경변수를 등록해주면 된다.
이렇게 해주면 직접 Netlify 서버를 해킹하지 않는 이상 OMDB_API_KEY는 직접적으로 확인할 수 없다.