Amplify Console에 monorepo를 연결해서 웹호스팅 할 때의 주의사항

안녕하세요. 화해팀 프론트엔드 개발자 박찬민입니다. Amplify Console

 

버드뷰(화해팀) 프론트엔드 플랫폼에서는 monorepo를 도입하여 사용하고 있는데요. 최근에 monorepo에 포함된 프로젝트를 Amplify Console로 웹호스팅 하면서 느낀 주의사항이 있어서 블로그를 통해 공유해보려 합니다.

 

우선 Amplify Console에 monorepo를 연결하는 방법으로 가볍게 시작해보겠습니다.

 

Amplify Console에 App을 새로 등록하는 단계 중 Git repository를 연결하는 단계가 있습니다. 이 단계에서 repository가 monorepo인지 체크할 수 있는데, 여기에 체크하고 연결하려는 프로젝트가 monorepo 내 어느 경로에 있는지만 작성하면 됩니다.

 

 

 

Amplify Console에서 App을 생성할 때 monorepo 옵션을 선택한 화면

 

 

 

작성했던 package 경로는 빌드스펙의 ‘appRoot’ 항목에 표시됩니다. 위와 같이 간단하게 monorepo를 연결할 수 있는데요. 연결이 간단한 것에 비해서 주의할 점들은 친절히 안내되지 않는 것 같습니다.

 

아래에서 제가 느낀 주의할 점 3가지를 정리해보겠습니다.

 

 

 

1. 스크립트의 실행 위치는 package directory입니다.

 

Amplify Console에 monorepo의 git repo 자체를 연결하기 때문에 빌드를 실행할 때의 directory 위치가 repo의 root directory라고 생각할 수 있습니다.

 

하지만 빌드를 실행하는 directory 위치는 monorepo 연결 설정에서 입력한 package directory입니다. 그렇기 때문에 빌드스펙에 작성하는 빌드 스크립트는 package directory 내의 package.json에 있는 스크립트를 이용해야 합니다.

 

 

 

2. Preview 기능은 monorepo에는 적합하지 않습니다.

 

Preview 기능은 지정한 branch를 타겟으로 Pull Request(이하 PR)를 생성했을 때, PR의 마지막 커밋을 기준으로 자동으로 빌드하고 배포하여 서비스 환경을 구축해주는 기능입니다.

 

monorepo에서 package별로 main branch 역할을 하는 브랜치를 각각 만들어서 사용한다면 문제가 없을 것입니다. 그러나, 현재 프론트엔드 플랫폼은 monorepo에서 main branch 하나를 상시 유지 브랜치로 사용하고 있고 모든 package의 작업 브랜치는 같은 main branch를 타겟으로 PR을 생성합니다.

 

이로 인해서 Amplify Console에 연결한 (가정) A package 이외의 (가정) B package의 작업 브랜치를 monorepo의 main branch로 PR을 생성했을 때도 Preview 기능이 동작하게 됩니다. 이러면 불필요한 인프라 환경이 만들어져서 비용 측면에서 비효율적입니다. 또한 Github에서 B package의 PR을 볼 때 의미 없는 Preview 환경이 표시됩니다.

 

그래서 monorepo이면서 모든 package가 같은 main branch를 이용한다면 Preview 기능을 사용하지 않는 것을 추천합니다.

 

 

대안으로 아래의 방법을 추천합니다.

 

(1) 작업 브랜치 전용의 개발 환경이 필요하면 작업 브랜치를 upstream remote에 push하고, 이 브랜치를 Amplify Console에서 수동으로 브랜치를 연결해서 새로운 환경을 생성합니다.

 

(2) 위의 방법이 번거롭다면 Amplify Console의 Branch autodetection 기능과 Branch auto-disconnection 기능을 이용합니다. 개발환경이 필요한 브랜치는 특정 문자열로 시작하도록 규칙을 정해 autodetection 패턴으로 등록하면 자동으로 개발환경을 만들 수 있습니다. 작업이 끝난 브랜치는 불필요한 과금을 줄이기 위해서 브랜치를 지워서 개발환경도 제거합니다.

 

 

 

 

‘Branch autodetection’과 ‘Branch auto-disconnection’ 설정 화면

 

 

 

 

3. 배포 기준이 되는 브랜치는 Auto-build 기능을 disable 해야 합니다.

 

위의 2번 이유와 같이 모든 package가 동일한 main branch를 사용하기 때문에 (가정. Amplify Console에 연결되지 않은 package) B package의 코드가 main branch에 merge 되었을 때 (가정. Amplify Console에 연결된 package) A package가 새로 빌드 됩니다. 즉 A package가 불필요하게 다시 빌드되고 배포되는 것입니다.

 

이런 불필요한 빌드와 배포를 방지하기 위해서 auto-build 기능을 disable 하는 것이 좋습니다.

 

그렇다면 배포가 필요할 때는 어떻게 할까요? Amplify Console의 webhooks 기능을 이용합니다. webhooks를 이용하면 필요한 시점에 직접 빌드를 트리거 할 수 있습니다.

 

 

 

 

‘Incoming webhooks’ 설정 화면

 

 

 

webhook을 생성하면 http 기반의 링크가 생성되고 POST 요청을 보내면 연결한 Branch에 연결된 환경이 새로 빌드 및 배포됩니다.

 

 

 

Amplify Console은 조금씩 기능들을 추가해가고 있습니다. 비록 monorepo 연결에서 조금 아쉬운 점이 있었지만 분명 앞으로도 더 편리한 기능을 제공하기 위해 업데이트될 거라고 생각합니다. 앞으로도 Amplify Console의 소식을 주시하면서 프론트엔드와 관련해서 좋은 기능이 나오면 화해팀에서 경험하는 것들을 발 빠르게 공유해보겠습니다. Amplify Console

 

 

---

 

✅ 찬민님의 다른 글이 궁금하다면 웹브라우저의 이미지 캐싱 이슈 해결하기 편도 확인해보세요!

✅ 프론트엔드 플랫폼이 만드는 문화와 환경도 확인해보세요!