aws amplfy 로 홈페이지를 호스팅하는데 빌드 과정에서 에러가 났다. 호스팅이란게 어떤 방식으로 해야 가장 비용 효율이 좋은지 설계하는 게 어렵지 막상 정해지면 그냥 가이드대로 연결하면 된다고 생각했는데, 여기서 또 에러가 났다. 뭐 하나 그냥 넘어가는 일이 없다.
일단 에러 메시지를 차근차근 읽어보며, 부분 부분 검색해봤다. 결과적으로 봤을 때 npm 패키지 의존성 문제인 것 같았고 (현재 루트에 리액트 17.0.2 가 설치되어 있는데, 몇몇 패키지는 다른 리액트 버전에 의존하고 있다) 내가 템플릿 코드를 컴팩트화 하는 과정에서 뭔가를 지워서 그랬나 싶기도 했는데, 아무튼 검색결과나 에러메시지 하단에 --legacy-peer-deps 를 써서 해결하라는 말이 많았다.
그래서 그냥 해당 파일안에서 npm install --legacy-peer-deps 로 재설치만 했는데, 오류가 해결되지 않았다. 리액트 버전을 바꿔보고, 리액트 모션, 리액트 이미지등 오류가 난 것들을 지우고 다시 설치해보고 하다가 npm-check로 현재 설치된 패키지들을 확인하는데, 오류가 난 패키지들이 사용하지 않는다고 해서 지워보려고 했고 그것도 잘 안되었다.
그래서 결국.. cto 분에게 이런 맥락을 슬랙 스레드로 길게 공유했는데, 바로 상황을 파악하고 문제를 해결해주셨다. 저 --legacy-peer-deps 을 amplify 빌드 설정에 가서 해줘야 하는 거였다..
amplify 는 다수의 인원이 공통된 환경에서 빌드를 배포하므로 로컬 환경과 다른 빌드 설정을 따로 해주게 된다. 빌드 설정 탭의 .yml 부분의 script 를 수정하면 되는데, 여기 commands 에 npm ci --legacy-peer-deps 를 써주는 것이다. 이렇게 빌드 설정을 해두면 모든 인원이 일관된 환경에서 설치하고 배포할 수 있다.
오늘 중으로 호스팅하고 링크를 전달해야 해서, 정 안되면 vercel 해볼까 했는데, 그것도 비슷한 에러로 빌드가 안되어서 포기했다. 다시 보니 이것도 위에처럼 vercel에서 빌드설정을 세팅해주니까 호스팅이 된다. 이런 망할.
프로젝트 세팅에서 install command 세팅 해주면 됨.
