[Web] Vercel로 무료 배포하기 (+ .env 파일 환경변수 등록하기)

✔ Vercel 이란?

💡

 프론트엔드 개발자들을 위한 클라우드 서비스를 제공하고 있는 회사.

 React.js의 확장판 개념인 Next.js를 개발하는 회사.

 호스팅 뿐만 아니라 다양한 기능을 제공하고 있고 무료 플랜에서도 많이 이용할 수 있다.

 

 

 

 

 

Vercel로 프로젝트 배포를 해보자!

 

 

1. 회원가입

 

 

교육을 목적으로 한 개인 프로젝트 배포용으로 사용할 예정임으로 Hobby 체크.

Name 칸에는 한글 입력은 불가능하다.

 

 

Github 연동으로도 회원가입이 가능하다.

아무것도 원하지 않는다면 Continue with Email로 진행하면 되지만, 나는 깃허브를 연결해줬다.

 

 

이메일 연동 후 이런 화면이 떴다면, 회원가입 완료!

 

 

2. VSCode 실행하기

Build가 완료된 프로젝트 파일에 Terminal을 켜준다.

 

2-1 ) Vercel을 VScode에 설치해준다.

 

npm i -g vercel

 

2-2) Vercel에 로그인을 해준다.

 

vercel login

 

여러가지 로그인 수단이 보여주는데, 가입한 방식으로 로그인한다.

나는 깃허브로 로그인 했음으로 깃허브로 연결해보려 한다.

 

 

Success 가 뜨면 연결 완료

 

 

 

 

3. 배포하기

vercel

 

명령어 vercel을 입력하면 배포를 위한 여러가지 질문을 한다.

 

방금 만든 계정임으로 vercel 자체에 내가 가진 repo는 없다. '

따라서 existing project는 없다고 체크해주고, 그밖의 물음은 모두 기본값으로 진행했다.

 

마지막 Want to modify these settings 또한 세팅을 바꾸고 싶지 않아 N를 선택했다.

 

 

 

 

배포가 완료되면 링크를 여러가지 주는데

✅ Production 이 바로 배포된 링크다

 

 

---

 

 

그런데, 내 파일은 배포된 후에 오류가 생겼다.

 

영화 API를 가져와서 만드는 프로젝트였는데, API KEY들을 local에 위치한 .env 파일에서 관리하고 있었고

env파일을 .gitignore로 커밋되지 않도록 관리하고 있었기 때문에 당연하게도 화면이 로딩이 되다가 오류가 났다.

킹받는다

 

그리고 무엇보다 Vercel은 .env파일이 아닌 자체 repository setting에 환경변수를 설정해줘야 했다.

 

 

 

✔ 문제 해결 ) Vercel 환경변수 설정하기

1. Repo 접근하기

 

왼쪽 상단 프로필을 누르면, 내가 배포한 Repo를 볼 수 있다.

 

 

Repo 선택 후 Settings에 들어간다.

 

 

Environment Variables 탭에서 

Import로 .env 파일을 불러와 저장시킨다.

 

 

 

Save를 하고 다시 페이지를 열어보면?

역시나 안된다 ^___________^

 

정답은 재배포

 

 

vercel
vercel --prod

 

VS Code에서 재배포를 한 뒤 대부분은 이슈가 해결된다.

 

이 방법이 통하지 않을 경우 가능한 방법은

 

 

1. Data Cashe를 Purge Everything을 해준 뒤, Redeploy 하면 해결되는 방법

 

이마저도 되지 않는다면, 단순 환경변수의 문제가 아닐 확률이 높다.

 

 

 

나같은 경우는 콘솔 창을 켜보니 에러가 하나 떠있었다.

 

this request has been blocked; the content must be served over HTTPS.

 

놀랍게도, 암호화된 HTTPS 사이트 (내가 vercel로 배포한 사이트)에서 암호화되지 않은 HTTP 사이트에 요청을 보내서 Mixed content 에러가 발생한 것이었다.

 

 

💡 해결방법

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

Html 파일 head에 메타태그를 추가해주니 귀신같이 에러가 해결됐다.

 

그렇게... 2시간을 버렸다.....ㅋ