[vercel 배포] localhost, vercel 둘 다 쓰고 싶어요 (feat. domain/host 셋팅)

서론

next든, vite든 뭐든 쓰다보면 로컬 개발환경에서는 localhost:port 로 주소를 고정시킨 채 개발하게 된다.

일단 동작하는 것 보고 수정해야지~ 하고 까먹고 있다가 배포하게 되면, 어머나 세상에 production에서 localhost 를 찾는 괴상한 현상을 보게된다. 아 나는 둘다 쓰고 싶은데 도메인 인식 어떻게 하지?

 

원하는 것은 이거!

1. npm run dev로 로컬을 띄우고 기존 url(http://localhost:port) 그대로 사용하고 싶어요

2. vercel 배포했는데, vercel domain 인식하게 할 수 있는 방법은 없나요?  

 

해결책

환경변수로(.env 파일을 이용해) domain을 각기 설정하자.

 

1. vercel에 환경변수 추가하기

: vercel의 프로젝트 셋팅 메뉴의 하위에 환경변수를 설정하는 부분이 있다.

여기에서 vercel에서 사용할 domain 주소를 넣으면된다.

예시로 나는 NEXT_PUBLIC_HOST 라는 key로 값을 넣었다.

 

 

2. ide에서 root 폴더에 .env 파일에 환경변수 추가하기

: 본인이 사용하는 로컬 서버 주소를 넣자

 

 

3. 코드상에서 하드코딩되어 있던 주소들 환경변수 값을 바라보도록 변경하자

 

 

4. vercel 재배포 + local 올려서(npm run dev) 정상 동작하는 지 확인

: vercel 재배포 시는 기존에 cache 그대로 쓸거냐고 묻는데, 체크해제하고 배포하면 된다. 아주 깨끗한 상태! 로 배포하고 테스트하길

 

 

 

와 그럼 끝!

 

 

어.... 그런데... vercel 도메인 간에 CORS가 나요.... -> 이어서 https://reeny404.tistory.com/82 확인!

[vercel] 배포했더니 CORS가 난다 (next/node/vercel)

 

 

 

 

 

참고) 공식 문서 : https://vercel.com/templates/next.js/hostname-rewrites