Storybook S3로 배포하기 (S3, cloudfront, route53) git actions 자동배포까지!

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/

Storybook Tutorials

 

안녕하세요. 사내 디자인시스템을 만들며 스토리북을 배포할 일이 생겼는데요,

공식문서에서도 배포 튜토리얼이 chromatic으로만 소개되어있고, 스토리북배포를 구글링해봐도 대부분의 글이 chromatic을 통한 방법 뿐이었습니다. 

이미 S3 배포 프로세스가 구축되어있는 경우, chromatic을 사용할 필요가 없기 때문에! 

 

S3로 스토리북 배포부터 git actions 자동배포까지 알아보겠습니다.

 

 

 

사실! S3에 버킷을 만들고 Route53으로 도메인에 연결하기까지의 과정은 일반 배포와 같습니다만,

다시 한 번 정리한다는 마음으로 작성해볼게요

 

1. S3 버킷 세팅

버킷이름은 도메인과 동일하게입력,

ACL활성화됨으로 변경, 

객체 소유권 객체 라이터로 변경

 

 

나머지 설정은 변경하지 않고 버킷 만들기!

 

버킷 리스트에 들어가서 방금 만들어진 버킷이름을 클릭하고,

권한 탭을 클릭합니다. 

 

버킷 정책 편집으로 들어가서 정책 생성기를 클릭하면 Json형식의 정책을 만들어주는 페이지가 열립니다.

 

 

조금 무섭게생긴 이 사이트에서 침착하게 평정심을 유지하시구요,

Select Type of Policy 는 S3 Bucket Policy

Principal 에는 * 별 하나만 입력, (모든 유저를 지정한다는 의미)

Actions 는 GetObject를 찾아 선택합니다. 

그리고 마지막으로!

Amazon Resource Name 에는

arn:aws:s3:::버킷명/*

이걸 본인의 버킷명을 넣어서 입력하세요. 

 

 

이제 Add Statement버튼을 눌러 열린 아래 Step3에서 Generate Policy버튼을 누르면 JSON형식의 정책이 생성됩니다.

 

이 내용을 복사해둡니다.

 

다시 aws 버킷 정책 편집 페이지로 돌아가서, 

 

이렇게 그대로 붙여넣습니다 :)

 

이제 속성탭으로가서 정적호스팅을 세팅해줍니다.

아래로 쭉내리면 '정적 웹사이트 호스팅'이 나와요. 편집버튼을 클릭합니다. 

 

 

2. Cloud front 설정하기

클라우드프론트에서 배포 생성버튼을 누릅니다.

 

choose origin domain(원본 도메인) 인풋을 클릭하면 만들어둔 S3 bucket이 모두 나타납니다. 

그 중 이번에 생성한 프로젝트의 bucket을 선택하고,

Origin Path (원본경로)는 비워둡니다. 

이름은 자동으로 들어오는 값을 그대로 둡니다!

원본 엑세스는 공개로 세팅합니다.

그리고 Enable Origin Shield 는 아니요!

 

뷰어 프로토콜 정책만 

Redirect HTTP to HTTPS로 바꿔주고, 함수연결과 웹 애플리케이션 방화벽은 스킵합니다.

SSL인증서는 해당 프로젝트의 ACM인증서를 선택해주고, HTTP/2, HTTP/3 둘 다 체크해줍니다. 

기본값 루트 객체는 index.html을 입력해주세요. (S3에 존재하는 FrontEnd 빌드파일의 index.html의 경로를 의미합니다)

 

배포 생성하기버튼 클릭!

 

방금 생성된 배포에 대해 오류페이지를 설정해줄겁니다. 

 

사용자 정의 오류 응답 생성을 클릭합니다.

 

3. Route53으로 도메인 열결하기

S3와 연결된 CloudFront를 Route53과 연결하는 방법을 알아보겠습니다.

별칭을 on으로 바꿔주고, 트래픽 라우팅대상을 CloudFront 배포에 대한 별칭으로 설정합니다.

그 아래 배포선택엔 이번에 cloudfront로 배포한 도메인 이름으로 선택하고 레코드 생성을 누르면 진짜 끝!

 

 

이제 사실상 배포 준비는 다 되었고, 자동배포는 선택사항입니다.

$ aws s3 sync ./storybook-static s3://버킷명

위 명령어면 스토리북 그대로 방금 배포해둔 버킷에 자동으로 빌드돼서 업로드됩니다.

 

4. Git Actions 연결하기

하지만 푸쉬를 할 때 마다, 혹은 merge를 할 때 마다 배포가 자동으로 된다면? 기분이 더 째지겠죠?

 

해당 프로젝트의 setting에 들어가서, 

Security - Actions - Secrets 를 설정해줍니다. 

 

SLACK_BOT_TOKEN은 슬랙채널에 배포 후에 메시지를 보내는 설정인데, 옵션입니다!

 

 

그리고 프로젝트의 가장 root위치에 .github폴더를 만들고, 그 안에 worflows 폴더를 만들어주세요.

 

그 안에 deploy.yml 파일을 만들어주세요. 

저는 dev브랜치용, main 브랜치용을 따로 만들었어요! (파일명은 원하는대로 작성해주세요)

 

name: Template Deploy_Dev # workflow의 이름을 자유롭게 지어주세요.

on:
  push:
    branches:
      - dev # 해당 브랜치에서  push 이벤트가 일어났을 때 실행되도록 여기 특정 브랜치를 지정해주세요

  pull_request:
    branches:
      - dev # 마찬가지로, 해당 브랜치에서  PR 이벤트가 일어났을 때 실행되도록 지정해주세요

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Cache node modules # node modules 캐싱
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.os }}-master-build-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      # yarn install 명령어 실행
      - name: Install dependencies
        run: yarn install

      # yarn build 명령어 실행
      - name: Build
        run: CI='' yarn build

      # Storybook 빌드
      - name: Build Storybook
        run: yarn build-storybook

      - name: Upload storybook build files to temp artifact
        uses: actions/upload-artifact@v3
        with:
          name: Storybook
          path: ./storybook-static
          
       # Storybook 업로드
      - name: Sync Storybook to S3
        run: yarn deploy-storybook
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ap-northeast-2

      - name: Post to a Slack channel
        id: slack
        uses: slackapi/slack-github-action@v1.23.0
        with:
          channel-id: "dev"
          slack-message: "*:heartbeat: [Storybook] Front Server Deploy :heartbeat: *\n :white_check_mark: ${{ job.status }}\n${{ github.event.head_commit.message }}"
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

 

node.js 버전문제랑 기타 여러 문제들로 여러번 퇴짜맞다가 끝내 해결해써요

자료가 많이 없더라고요 ㅠㅠ 

이건 제 P;ㅠ 이 묻은 yml입니다 (생색 지송요)

고구마와 사이다

 

 

마지막으로, 

workflow에서 지정한 수행 명령어에 맞게 작동하도록 package.json의 script를 수정합니다.

 

"script": {
	...
    "build-storybook": "storybook build",
    "deploy-storybook": "aws s3 sync ./storybook-static s3://당신들의버킷명"
}

 

이렇게 수정하면 workflow가 실행될 때 마다 스토리북이 S3버킷에 잘 올라가서 자동으로 배포가 될거예요

 

스토리북을 S3로 배포하는 분들이 많지 않은건지, 찾아봐도 레퍼런스가 진짜 없어서 참 힘들었는데 🥺 

큰 도움을 받은 글은 바로.. 

https://velog.io/@cube823/cicd-storybook-github-actions%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%B4-s3-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[ci/cd] storybook github actions를 활용해 s3 배포하기

 

감사합니다.