[Storybook, React] S3로 후뚜룩 마뚜룩 배포하기

 

디자이너 파티?에서 스토리북 초안을 작업 하면서,

그떄그떄 핑퐁칠 일이 많았다.

 

크로마틱 Chormatic 등으로 배포할 수 있지만,

 

대부분 로컬 컴퓨터에서 작업하고, 바로 확인하는 일들이 많았다.

 

-

 

매번 githubaction 돌려서 배포하는 것도 규ㅣ찮고,,

 

바로바로 보여주고 핑퐁을 치고 시펐다.

 

예전 인아웃에서 그 Ec2에 github로그인해서 백엔드 순팍팍 배포 2초컷 했던 낭만마냥...

 

그런 낭만이 필요했던 것이다.

 

그래서 깔끔하고 쉽고 심플하게

 

로컬에서 명령어 치면

 

빌드해서 나오는 storybook-static파일을 S3에 통짜로 올리자~! 했따.

-

 

1. S3 버킷 생성

버킷을 생성한다.

 

이때 속성에 들어가서 웹으로 설정해주고, index.html 넣어놓는다.

버킷 설정도 대강해놓쟈

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷이름/*"
        }
    ]
}

 

자세한 설명은 생략ㅎㅏㄴ다.

 

2. 로컬 컴퓨터에 aws configure 명령어로 S3 권한 있느거 등록해놓쟈

과식해서 배가 아프다

 

 

3. package.json 수정

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "deploy-storybook": "storybook build && aws s3 sync storybook-static s3://내버킷이름/"
  },

 

yarn deploy-storybook 쳐서 빠루게 후뚜룩 스토리뷱 배포

 

추후 프로덕트로 배포할 땐 크로마틱이나 github action 연동해서 하면 되겠다^^