Vercel 환경설정

정말 물건이다.

 

Vercel은 웹 어플리케이션 배포를 위한 end-to-end 플랫폼이다.

쉽게말하자면, 깃 저장소에 소스코드를 올리고 연결하기만 하면 Deploy, CI/CD, 도메인, 모니터링까지 제공해주는 아주 간편한 툴이다.

 

배포하는 방법은 너무 간단해서 아래에 텍스트로만 설명해놓을 예정이다.

 

- 배포방법

1. vercel 로그인 (현재 사용 중인 github으로 로그인)

2. github에서 배포하고 싶은 프로젝트 선택

3. 배포 진행

 

 

이제 환경 설정에 대해 기술해놓고자 한다.

 

Local환경에서는 .env에 환경변수를 설정한 뒤, 아래와 같은 형식으로 환경변수를 활용했다.

Local환경 .env 적용과정

1. dotenv 설치

npm install dotenv

 

dotenv란?

Node.js 애플리케이션에서 환경 변수를 관리하기 위한 모듈. 이를 사용하면 .env 파일에 정의된 환경 변수를 로드하여 애플리케이션에서 사용할 수 있음.

 

2. 루트 경로에 .env 파일 생성 및 환경변수 키=값 형태로 추가

 

3. .env에 있는 파일을 대상으로 환경변수를 아래와 같이 읽어서 처리

* Node.js에서는 보통 process.env 를 통해서 환경 변수에 접근함.

* .env 파일에 저장해놓은 환경 변수들은 dotenv 라이브러리가 process.env에 설정해줌

(Vue에서는 .env를 읽기 위해서는 VUE_APP으로 환경변수가 시작해야한다)

(React에서는 REACT_APP 라고한다)

const apiKey = process.env.VUE_APP_{{변수이름}}

 

이런 식으로 Local환경에서 환경변수를 세팅했다.

 

Vercel 환경변수 적용과정

위에서 설정한 환경변수는 보안을 위해 gitignore 시켜두었기 때문에, 깃헙 레포지토리를 대상으로 배포하는 Vercel에는 환경변수를 적용할 수 없었다. 

 

하여 찾아보던 중, Vercel에서 내가 배포한 앱에 환경변수를 세팅하면 되는 것으로 파악하여 아래와 같이 진행하였다.

 

1. 배포한 프로젝트의 Environment Variables 접근 후, 아래와 같이 키=값 세팅

 

2. 세팅한 환경변수 적용을 위해, 꼭 재배포(Deploy) 진행

* 값만 변경한 경우에도, 기존에 캐싱된 값을 활용할 수 있으므로 재배포를 꼭 진행하는 게 안전하다.

 

테스트해본 결과, 아주 잘된다 ㅎㅎ

Vercel 짱짱. 정말 좋은 도구다.