🌴 개발 환경
Vite, React, Typescript, Storybook, FastApi 사용중
📚 Vercel로 배포하기
프로젝트 배포를 해본 경험이 없어서 어떤 방법으로 배포할지 찾던 중에 Vercel을 사용하기로 했다.
Vercel은 정적 사이트 및 서버리스 기능을 위한 클라우드 플랫폼으로, Github 등과 연결하여 push할 때마다 자동 배포가 가능하다는 장점이 있었다. Next.js를 사용할 때 많이 사용하는 것 같았지만 쉽게 접근 가능하다는 점에서 선택하게 되었다.
🧐 시작하기
Vercel 사이트에 회원가입을 하고 새로운 프로젝트를 생성하면서 Git Repository를 연결한다.
1. 이렇게 Import 할 레포지토리가 나오는데, Import 버튼을 눌러준다.
2. 프로젝트 Configure을 작성한다.
프로젝트 이름과 Framework (나는 Vite)를 선택해준다.
이 때 Root Directory를 npm 이 실행되는 곳으로 해줘야한다. 그렇지 않으면...
이런 오류가 날 것이니..
3. 설정 완료 후 Deploy 버튼을 클릭
❓ 오류 없이 통과하였는가?
😉 축하드립니다.
하지만 저는 main 브랜치 코드 중에 Storybook 오류가 있었고, 그 파일을 먼저 수정해야했습니다. (친절하게 에러 로그로 알려줘요)
여기서 deploy 오류 난 것 때문에 github에서도 브랜치 PR 할 때 오류가 막 뜨긴 하지만 그 오류 고치려고 merge 하는거니까 그냥 하시면 됩니다.
4. deploy 완료 & 도메인 설정
성공하면 이렇게 프로젝트가 생성된다. 이제 개별 도메인을 연결해보자.
저는 가비아에서 저렴하게 .site 도메인을 구매했습니다.
프로젝트 세팅에서 Domain 을 클릭하고 add 하는 부분에 도메인 주소 입력 후 add를 눌러주면 된다.
혹시 add 눌렀는데 오류가 난다면 띄어쓰기 오류 일수도 (제가 그랬어요)
성공하면 이렇게 www 포함 같이 등록하면 됩니다.
그러면 아래에 A @ ~~~ 이런 정보가 뜨는데 이걸 도메인 구매하신 사이트에 들어가서 등록하시면 됩니다.
5. DNS 레코드 등록
저는 codetory.site를 A 타입으로 저장하고 www를 CNAME으로 지정해줬어요.
그리고 다시 Vercel 페이지로 돌아와서 Refresh를 해주시면 됩니다.
🐥 배운 내용
그동안 CI/CD 구축된 상태에서 개발해와서 배포 할 기회가 없었는데, 비록 CD만 가능한 반쪽짜리 자동화 경험이지만 그래도 처음 개발을 시작할 때 로컬이 아닌 진짜 사이트를 가져보고 싶다는 생각을 실현한 것 같아서 뿌듯한 작업이었다.
참고자료
[React] 클라이언트 배포 : Vercel 편
Vercel에서 정적사이트 도메인 변경 및 Git 시작하기
