AWS Amplify로 monorepo 배포하기

Background

사이드 프로젝트에서 yarn workspace , yarn berry 를 통해 monorepo 구축하는 것을 성공시켰다. 프로젝트 구조는 다음과 같다.

apps

client - 실제 서비스
design-system - storybook 디자인 시스템

이제는 client 와 design-system 을 모두 배포하여 팀원들과 함께 공유해야한다. monorepo 구축 이전 실제 서비스를 AWS Amplify로 배포했기 때문에 monorepo 환경 역시 간단하게 AWS Amplify를 통해 배포를 하려고 한다. AWS Amplify가 monorepo에 적절한지는 조금 더 고민을 해봐야겠다.

배포하기

배포 자체는 매우 쉽다. client 와 design-system 모두 개별 앱으로 등록하고 directory만 잘 설정해주면 끝이다. AWS Amplify에서 제공하는 가이드를 모두 마치면 다음과 같이 앱이 생성된다.

신기하게 CI/CD가 적용되어 code push가 이루어지면 자동으로 client 와 design-system 이 빌드되고 배포된다. 매우 편리하다.

Issues

storybook 기반의 design-system 이 배포는 성공되었지만, 로그를 보니 다음과 같은 에러가 있고, 도메인에 접속할 수 없었다.

찾아보니, storybook을 정적 앱으로 배포하기 위해서는 배포 서비스인 Chromatic 을 사용해야한다고 한다.

apps/design-system 에 chromatic을 설치해준다.


$ yarn add -D chromatic

Chromatic 페이지에 들어가서 깃허브 아이디로 로그인하고, 원하는 저장소를 선택한다.

발급된 token으로 명령어를 실행한다.


$ yarn chromatic --project-token=<내 토큰>

해당 커맨드를 입력하면 다음과 같은 url을 제공받고, 해당 url에서 확인이 가능하다.

Amplify에 적용하기

storybook 배포를 CI/CD에 적용하려고 한다.

제공받은 storybook project 토큰을 환경변수에 저장한다.

amplify.yml 파일을 수정한다.


version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn build-storybook
            - yarn chromatic --project-token=$STORYBOOK_PROJECT_TOKEN          
      artifacts:
        baseDirectory: apps/design-system
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
      buildPath: /
    appRoot: apps/design-system