프로젝트 vercel로 배포하기 (환경변수 에러 해결하기)

 

💡

이번에 과제 프로젝트를 진행하고 배포는 vercel에서 진행는데요.

github page, firebase으로 배포를 해봤는데 

개인적으로 vercel에서 배포하는게 제일 쉽고 빨랐던거 같습니다. 

 

---

 

✨프로젝트 배포하기 

 

1. vercel 홈페이지 접속하기 → 로그인

Meet our Customers – Vercel

 

 

2. add new 버튼 클릭 → project 클릭

 

3. 내 깃허브 목록에서 내가 배포하고자 하는 프로젝트 import 클릭

 

4. 프로젝트 이름, 프레임 워크등 확인한 후 deploy 클릭 (다 기본으로 셋팅 되어져 있기 때문에 변경할 게 없으면 그대로 진행하면 된다.)

 

5. 완료 후 continue to dashboard 버튼 클릭해서 배포된 내용 확인

 

6. 해당 대시보드에서 배포된 주소 확인!

 

---

 

🚨 배포한 뒤 사이트에 들어가 새로고침을 하니 404에러가 발생했다.

 

찾아보니 새로고침하면 버셀에서 라우트로 이동시킬 수 있는 파일을 생성해줘야 한다고 한다.

vercel.json 파일을 추가하고 아래 코드를 입력해줬다.

 

{
  "rewrites":  [
    {"source": "/(.*)", "destination": "/"}
  ]
}

 

🚨 하지만 그 후 해결을 하고 todo로 이동하니 영문을 알수없는 타입에러들이 발생했다. 

 

다른 페이지들을 잘 작동됐으나 todo에서 에러가 나 API가 전달되지 않아 생기는 에러라고 생각했고 

다시 찾아보니 .env 파일을 사용해 환경변수를 설정해줘도 vercel에 따로 환경변수에 추가해줘야한다고 한다. 

 

 

다시 vercel 페이지로 돌아와 setting탭을 클릭한다. 

Environment Variables로 가서 내가 .env파일에 입력해준 key와 value를 입력해준다. (값의 "" 따옴표는 빼고 넣으면 됨!)

 

✨ 이렇게 환경 변수를 추가해준 뒤에는 꼭 다시 재배포를 해줘야 적용된다. 

(다른 사람들은 Promote to Production 버튼을 눌러줘야 한다고 했으나 나는 찾을 수 없어 Redeploy 버튼을 눌렀다.)

 

 

 

📌

[Vercel] 버셀 프론트 배포 후 새로고침 시 404 에러 (tistory.com)