[Vercel] 프론트엔드 단일 프로젝트 vercel로 배포해보기(vercel 404 not found, repo 찾기)

현재 진행중인 포트폴리오 사이트를 배포해보고 있다.

 

아직은 react로 만든 프론트엔드 단일 프로젝트이기 때문에 

EC2 + jenkins와 같은 도구로 직접 하나하나 하기보다는

vercel만을 이용해서 정적 파일로 배포하는 것이 충분하다고 생각해서 vercel을 이용해보고자 한다.

만약 나중에 백엔드가 추가된다면 바꾸는걸로,,

 

---

github에서 repo를 가져와서 이어주기만 하면 되는 간단한 과정이므로, 

이전에 pwa를 테스트하기 위해서 했던 방법과 거의 비슷하게 진행했다.

https://memezz.tistory.com/170

[React] VitePWA 를 이용해 Vite기반 React프로젝트에 PWA적용하기

---

 

 

하지만 그때와 다르게 소소하게 문제들이 생겼어서 해결했던 방법들을 기록해보자 한다.

1. vercel에게 repository 접근 권한 추가해주기

처음에 vercel로 프로젝트를 만들 때 연결할 git repo를 선택하는데, 목록에 원하는 repo가 보이지 않았다.

이걸 위해서 github에서 vercel에 특정 레포에 대한 접근권한을 줘보자

github -> setting -> Applications에 들어가서 Vercel옆에 configure을 통해 설정을 바꿔주자

내리다 보면 Repository access가 있는데 여기서 원하는 레포를 추가해주면 끗!

 

 

2. 빌드는 됐는데 사이트가 안떠요(404)

모두 기본 설정으로 했더니 빌드가 ok는 뜨는데 정작 들어가보면 다음과 같이 404 not found가 뜨더라

왜그럴까해서 빌드 로그를 보니까 npm install의 흔적도 없고, 빌드 또한 vite의 흔적이 전혀보이지 않았다.

그래서 vercel의 Project Setting에서 Root Directory를 확인해보니 ./로 되어있는걸 확인하고, 현재 repo의 폴더 구조를 확인해보았다.

 

 

현재 repo의 구조는 상위폴더 안에 portfolio라는 폴더가 있고, 그 안에 src폴더가 있는 구조였다.

즉, build를 상위폴더 안에 있는 portfolio폴더 안에서 해야했었다.

상위/portfolio

상위/portfolio 위치에 있는 src폴더

 

이를 해결하기 위해서 Root Directory를 단순하게 portfolio/로 바꿔주니 해결!

 

이렇게 바꿔주고 Deployments > 이전 deploy에서 ReDeploy를 해주자

 

 

다음에는 도메인을 한번 달아보려구 한다!

그런데 아직 어떤 도메인으로 할지 못정해서 좀만 더 고민해보고 바꾸는 걸로,,,