vercel로 배포하기

한국에 서버가 있는 vercel로 배포해보자

 

vercel도 기본사용자는 공짜다!

 

1. 로그인을 한 후에 자신의 repository에서 배포하고싶은 repository를 선택하자

 

아래 프레임워크 설정은 해당 프레임워크의 빌드환경을 자동으로 만들어주는데 현재는 별도에 프레임워크가 없기때문에 Other을 선택한다.

또한 빌드옵션, 환경변수 다 안쓰기때문에 넘어간다.

마지막으로 Deploy를 누르면 아래와 같이 배포가 완료된다!

 

 

History API 사용으로 인한 SPA 404에러 해결하기! (fallback)

하지만 만약에 이전 포스팅과 같이 SPA를 만들기 위해 history API를 사용했다면

url 경로에 index.html이 없어 생기는 404에러를 예외로 처리해줘야한다.

 

해결 방법은 구글링으로 검색하면 된다!

 

아래와 같은 형식으로 검색한다.

그래서 알맞은 해결 방법을 찾아서 사용하면 된다!

 

https://hidde.blog/how-deployment-services-make-client-side-routing-work/

How deployment services make client-side routing work

vercel.json 파일을 생성하고 아래 명령어를 추가하면 된다.

혹시나 싶어서 공식문서에서도 찾아보았다.

https://vercel.com/docs/projects/project-configuration#routes/advanced/spa-fallback

Configuring Projects with vercel.json

해당 명령어를 입력하고 push하면 끝이다.

 

혹시나해서 아래에있던 명령어를 같이 입력했는데 깃허브에서 충돌이 났다고 오류가 떴다.

그래서 vercel에도 푸쉬한 데이터가 적용이 안됐다.

d

위 두 코드중 하나만 써야하는 것 같다.

 

다시 돌아와서 커밋을 하고 푸쉬를 하면 아래와 같이 Deployments 탭에서 push한 내용을 확인가능하다

netlify에서는 브랜치를 바꾸면 옵션을 바꿔줘야했는데

vercel은 push하면 자동으로 바꿔준다.

 

 

그러면 404에러도 뜨지않고 정상적으로 배포가 된 것을 볼 수 있다!