Bitbucket Pipeline으로 AWS S3 + CloudFront에 storybook 배포하기

Github를 계속해서 사용해오다가 최근 Jira의 도입으로 Bitbucket으로 이전하게 되어 기존 Github-Actions로 AWS S3-CloudFront 형태로 배포하던 Storybook을 Bitbucket Pipelines로 이전하게 되었다.

Bitbucket Pipelines

Bitbucket Pipelines : Bitbucket에 내장된 CI / CD 서비스. 기본적으로 bitbucket-pipelines.yml 에 script를 작성하고 이를 저장소에 commit하면 Bitbucket에서 알아서 이를 인식하고 해당 설정에 따라 CI / CD가 진행된다.

Bitbucket 좌측의 Pipelines에서 설정 할 수 있다.

또한 Bitbucket측에서 여러 template들을 기본으로 제공해주었는데 운좋게도 Deploy React app to AWS S3 template가 있었고, 이전에 작업했던 Github-Actions를 토대로 template에 맞춰 재 작업을 해주었다.

아래는 bitbucket-pipelines.yml 파일의 내용이다.
storybook을 storybook-static 폴더에 빌드 후 S3업로드, CloudFront 캐시 무효화를 진행해주는 script이다.

#  Template React Deploy

#  This template allows you to deploy your React app to an AWS S3 bucket and invalidate the old AWS Cloudfront distribution.
#  The workflow allows running tests, code linting and security scans on feature branches (as well as master).
#  The react app will be validated, deployed to S3 and trigger an AWS Cloudfront distribution invalidation to refresh the CDN caches after the code is merged to master.

# Prerequisites: $AWS_ACCESS_KEY_ID, $AWS_SECRET_ACCESS_KEY setup in the Deployment variables.
# For advanced cases, please, follow examples from the pipe's:
# README https://bitbucket.org/atlassian/aws-s3-deploy/src/master/README.md
# README https://bitbucket.org/atlassian/aws-cloudfront-invalidate/src/master/README.md

image: node:16

# Workflow Configuration

pipelines:
  branches:
    develop:
      - step:
          name: install and Build
          deployment: Production
          caches:
            - node
          script:
            - yarn
            - yarn build-storybook
            # CI=true in default variables for Bitbucket Pipelines https://support.atlassian.com/bitbucket-cloud/docs/variables-in-pipelines/
          artifacts:
            - storybook-static/**
      - step:
          name: Deploy to Production
          script:
            # sync your files to S3
            - pipe: atlassian/aws-s3-deploy:1.1.0
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
                S3_BUCKET: 'storybook.{{도메인}}.com'
                LOCAL_PATH: 'storybook-static'
                EXTRA_ARGS: '--delete'
            # triggering a distribution invalidation to refresh the CDN caches
            - pipe: atlassian/aws-cloudfront-invalidate:0.6.0
              variables:
                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
                DISTRIBUTION_ID: '{{CloudFront key}}'