프로젝트 발표가 이번 달 29일이었습니다. 아직 구현해야 할 기능들이 많이 있고, 보완해야 할 부분이 있는 반쪽짜리 결과물이지만, 일단 발표를 해야 하는 상황에서 서비스 배포는 필수적이었습니다. 그렇기에 빠른 배포가 필요했고 배포에 필요한 서드파티 라이브러리를 찾다가 Netlify라는 클라우드 서비스를 발견했습니다.
Netlify
장점
- 직관적이다.
- github과 연동해서 배포가 가능하다
- 연동해 놓은 repository에 push가 발생하면 바로 배포할 수 있다.
- 개인은 무료이다
등등의 장점으로 인해 선택하게 되었습니다. github으로 버전을 관리하고 있었고, 직관적이고 바로 배포가 가능했기에 현재의 상황에 딱 알맞은 서비스라고 생각을 했습니다. (단, 팀원 추가 시 유료 요금이 부과됩니다.)
회원가입/로그인
사이트에 들어가서 회원가입을 클릭한 다음에, 간단하게 github으로 로그인할 수 있스빈다.
서비스 배포
로그인을 하면 대시보드가 나타나게 되는데 Add new site라는 버튼이 나타나게 됩니다. 해당 버튼을 클릭해 줍니다.
기존에 있는 프로젝트를 선택을 한다면, Import an existing project를 클릭을 해줍니다.
프로젝트를 클릭한다면, 연동된 github에 있는 repository 리스트가 나타나게 됩니다. 그중에 배포하고자 하는 repository를 선택합니다.
repository를 선택하고 나면, build와 관련해서 setting들이 나타나게 됩니다. 거기서 본인의 파일 구조와 배포하고자 하는 브랜치를 설정해서 배포를 해주시면 됩니다.
오류
build Command 값 불일치
netlify에서 깃허브 레포지토리에 연결하여 배포를 진행했는데. 이 과정에서 배포 오류가 발생했습니다.
build가 진행되는 repository의 root 폴더에. toml 형식의 파일의 command와 netlify의 설정의 Build commad의 값이 일치해야 하는데, 해당 값을 맞추지 못하였습니다.
종속성 충돌
배포 시에 npm 패키지 설치를 하는데, 해당 과정에서 종속성 충돌이 발생하였습니다. 기존에 react-script 버전이 자동으로 5로 설치되는 CRA 형식과 절대 경로 지정을 위해 carco를 설치하면서 carco로 버전 관리를 하게 되었는데, carco는 react-script 4버전까지만 지원하게 됩니다. 즉 종속성에서 서로 다른 버전을 지원하기 때문에 그 과정에서 충돌이 발생한 것입니다.
해결
공식 문서에 해당 이슈와 관련해서 해결 방법이 있습니다. netflity에 배포 설정에서 환경 변수를 변경해 주면 됩니다. npm 패키지 설정 과정에서 NPM_FLAGS라는 환경 변수를 사용하여 설정에 적용이 가능합니다.
해당 값에 --force 혹은 --legacy-peer-deps를 설정해 주면 됩니다.
--force:충돌을 우회해 package-lock.json에 다른 의존 버전을 추가하고 설치--legacy-peer-deps:peer dependencies 충돌을 무시하고 설치한다.
쉽게 배포할 수 있을줄 알았지만, 난관에 마주쳐서 살짝 헤메었습니다. 그래도 직접 배포를 하는것 보다 훨씬 간편하게 할 수 있었습니다.
