프론트엔드 개발

Bitbucket pipeline을 이용한 AWS S3 배포 본문

Front-End/기타

Bitbucket pipeline을 이용한 AWS S3 배포

태나미 2021. 6. 3. 17:59

React 프로젝트를 Bitbucket pipeline 이용하여 AWS S3에 배포하기

1. pipeline 클릭

2. pipeline select

 

3. Configure => 템플릿 설정

4. bitbucket-pipelines.yml

# This is an example Starter pipeline configuration
# Use a skeleton to build, test and deploy using manual and parallel steps
# -----
# You can specify a custom docker image from Docker Hub as your build environment.
image: node:10.15.3

pipelines:
  branches:
    master:
    - step:
        name: build and deploy
        deployment: production
        caches:
          - node
        script: # Modify the commands below to build your repository.
          - unset CI
          - yarn
          - yarn build
          - pipe: atlassian/aws-s3-deploy:0.4.5
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID # Optional if already defined in the context.
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY # Optional if already defined in the context.
              AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION # Optional if already defined in the context.
              S3_BUCKET: 'redate-admin'
              LOCAL_PATH: 'build'
              ACL: 'public-read'
              EXTRA_ARGS: '--delete' # Optional.
          
definitions:
  caches:
    node: node_modules

- script에서, 위에 예제는 package manager가 yarn인데, npm 을 이용한다면, yarn => npm install로 바꾸어 줘야한다.

- S3_BUCKET에는 해당 버킷네임으로 수정해주고,

AWS_접두어가 붙은 것들은 해당 값들을 AWS IAM에서 알아내고, 

 

5. 모든 설정 완료 후 Commit file을 누르면 자동으로 배포가 이루어진다.

** variables 셋팅방법

1) Repository settings 클릭

2) Repository variables 클릭

3) repository에 환경변수를 key와 value를 Add 해준다.

셋팅 후에, 성공적으로 빌드가 된다면,

위와 같이 status에 성공적으로 표시가 되고, 프로젝트에서 Builds에 표시가 뜨게 된다.

 

+ 퍼블릭 설정 

빌드 후 자동으로 퍼블릭으로 설정을 하려 할 때, 

ACL: 퍼블릭 설정 추가

출처: https://yunzema.tistory.com/257

 

 

Comments