리액트는 github로 배포를 할 수 없어서 저번 개인 프로젝트때부터 Vercel 을 처음 써봤는데 생각보다 까다로운 부분이 많다...
파일 경로라든가 환경설정 같은? 그래서 메모장처럼 프로젝트를 할 때마다 생긴 트러블슈팅이랑 해결방법을 정리해두고 볼 생각이다!
Vercel 배포할 때 주의할 것
01. 파일 경로
src 에 있던 이미지 파일을 public 폴더로 옮기고 github에 있는 이미지 절대주소를 사용하거나
src="./images/common/logo.png" , "../assets/logo.png" 처럼 img 태그의 경로를 public 폴더 명 기입하지 않고 바로 ./ 부터 시작해서 작성한다.
02. 라우팅 에러
로컬에서는 잘 작동하지만 페이지를 이동하면 404 에러가 떴다. 예를 들어 예를 들면 https://project.vercel.app 에서 https://project.vercel.app/mypage으로 주소변경했을 때 에러가 발생했다.
vercel.json이라는 배포 설정 파일을 root루트 폴더에 위치하여 아래 코드를 입력해 해결했다.
//vercel.json
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
03. .env 파일을 사용할 경우 환경변수 설정하기
깃허브는 .env 를 읽지 못하기 때문에 Vercel로 배포할 때 따로 환경변수 설정을 해줘야한다.
- vercerl 프로젝트 들어가기
- settings 클릭
- environment variables 보면
- create new가 기본으로 되어있을 것..!
- 거기에 key value 입력하는 공간에
- 로컬에서 쓰던 api_key 입력 후 save 누르기!
편한 듯 불편한 Vercel... 깃허브 배포링크 생성도 그렇고 각각 편한 부분과 까다로운 부분이 많은 것 같다. 리액트는 Vercel로 많이 배포하는 것 같으니
앞으로 프로젝트 하면서 새로 알게되는 게 있다면 바로바로 추가해주도록 하자!
