Next js로 빌드한 "MediGo" 프로젝트를 Vercel를 통해 배포했다.
배포 과정에서 발생했던 이슈와 과정에 대해 정리해봤다.
Type정의 에러
- TypeScript로 프로젝트를 구현했기 때문에 Props로 받아오는 데이터의 타입이 정확하지 않으면 빌드 자체가 되지 않았다.
- 해결을 위해 각 Props를 위한 interface를 페이지마다 구현했다.
Export Import 에러
- pages 디렉토리에 페이지 컴포넌트에서 styled-component를 활용한 스타일 코드를 분리해서 사용중이었다. 하지만, 빌드 과정에서 export import관련 에러가 발생했다.
- 우선, 임시로 스타일 코드를 페이지 컴포넌트 안에 선언했다. 다른 방법이 있는지 찾아보고 추후 리팩토링 예정이다.
ERESOLVE unable to resolve dependency tree 에러
- npm peerDependency 충돌 에러였다.
- Vercel 배포전 NPM_FLAGS 환경변수에 --legacy-peer-deps 값을 넣어 충돌을 무시하고 설치하도록 했다.
Organization 리포지토리 배포
- Organization 리포지토리를 Vercel로 배포하려면 Vercel team을 생성해야 했다. 상업용 프로젝트가 아닌 단순 학교 캡스톤 프로젝트를 유료로 배포하기엔 부담이 있었다. 따라서 다음과 같은 브랜치 전략을 사용하기로 했다.
- organization 리포지토리의 frontend --merge--> organization 리포지토리의 main 브랜치
- organization 리포지토리의 main 브랜치 --merge--> organization 리포지토리의 prod 브랜치
- organization 리포지토리의 prod 브랜치 --merge--> fork 리포지토리의 main 브랜치
- organization 리포지토리의 frontend에서 기능을 구현한 후, main으로 머지하여 서비스를 개선하고, 이 개선사항을 prod로 머지하여 배포용 코드를 유지한 뒤, prod에서
- fork한 리포지토리에서 개발과 머지 및 배포를 하는 방법도 있었지만, 기존의 PR내역과 라벨 등을 지키고싶었다. 따라서, 무료 배포를 위해 추가적인 작업이 필요해 번거롭지만, 어쩔수 없이 다음과 같은 전략을 선택했다.
참고 사이트
깊이 있는 학습, 클린 코드, 의사소통