AWS Amplify에 storybook 자동 배포

Amplify를 사용하여 Gatsyby.js의 호스팅과 백엔드를 구축하고 있습니다.
sotrybook을 사용하고 있었기 때문에 쉽게 호스팅할 수 있는 방법을 찾았는데, 여러가지 다른 서비스 있습니다만, BASIC 인증이 유료이기도 하기 때문에 AWS Amplify로 해 보았다.

1. amplify 앱 만들기

메인 앱과는 별도로 storybook용 앱을 만듭니다.
※ 저자는 이미 만든 뒤이므로 이렇게 두 개의 앱으로 나누도록 합니다.

2. 리포지토리 선택

포치포치, 리포지토리 및 분기를 선택합니다.

3. 빌드 설정

backend는 불필요하므로 체크를 해제해 둡니다(디폴트라고 체크가 들어가 있다)

yml은 초기에 자동으로 들어 있기 때문에 [Edit]합니다.

yarn run build → yarn run storybook:build 로 변경하여 저장합니다.
※자체 제품의 package.json의 script로 설정되어 있는 script를 실행하므로 명령명이 다른 경우는 적절히 변경을.

4. 공개

빌드를 다시 쓰면 [다음]을 누르고 확인 화면에서 [저장하고 배포]를 누르고 빌드가 끝날 때까지 기다리십시오.

오, 공개되었다!

5 BASIC 인증

이대로 URL 액세스하면 누구나 볼 수 있으므로 일단 BASIC 인증을 걸어 둡니다.
앱 안에 "액세스 컨트롤"이 있으므로 거기의 [액세스 관리]에서 환경별로 BASIC 인증을 걸 수 있습니다.

요약

그 밖에도 여러가지 호스팅 서비스는 있지만, BASIC 인증은 유료이거나, 드로잉이 느리든지, 배포가 번거롭거나 잘 되지 않거나 하는 등이 있기 때문에, AWS 사용하고 있다면 꼭 ampfliy는 추천하고 싶다.

정적 호스팅만으로도 사용할 수 있고, 백엔드도 구축할 수 있으므로 프런트 라이크한 환경을 간단하게 만들 수 있어 좋아합니다.
그리고는 지정한 브랜치(master)에 코드 수정을 병합하면 배포가 자동으로 달리므로 CI 툴의 설정도 불필요.

여기에서는 이야기하고 있지 않지만, 같은 앱 내에서 환경 전환도 할 수 있으므로 환경 변수는 물론, 간단하게 같은 환경을 복제도 할 수 있으므로 서버 세우는 작업도 필요없는 것도 매우 좋네요.