Bitbucket pipeline으로 AWS S3에 Vue SPA 배포하기

bitbucket pipeline 이용 기본적인 내용은 이전 글을 참고 https://yunzema.tistory.com/257

bitbucket pipeline을 이용한 배포

 

bitbucket pipeline을 이용하여 특정 브랜치, 태그, 북마크로 push되면 원하는 플랫폼으로 배포까지 연결할 수 있다.

그러기 위해서는 bitbucket-pipeline.yml 이라는 스크립트를 작성해야 한다.

 

구체적인 작성법은 아래 문서를 참고하면 되겠고, 제목과 같이 S3로 배포하는 위주의 내용을 설명하겠다.

configure 파일 참고 : https://confluence.atlassian.com/bitbucket/configure-bitbucket-pipelines-yml-792298910.html

Configure bitbucket-pipelines.yml - Atlassian Documentation

bitbucket-pipeline.yml의 기본구조는 아래와 같다.

 

1) image : build&배포 작업은 bitbucket cloud내에 docker container로 이루어지므로 어떤 이미지를 사용할 것인지 먼저 정의 한다.

 

2) pipelines : 본격적인 pipeline 블럭들을 정의하는 부분이다.

 

3) pipeline (중간 명도 파랑 블럭): pipelines 하위에 default, branches, tags, bookmarks, pull requests, custom으로 pipeline 블럭을 정의한다.

- 모든 상황에 보편적으로 동작해야하는 부분은 default 블록에 작성.

- branches, tags, bookmarks 특정 branch, tags, bookmarks의 push시 동작하게 할 경우 사용

- 이하 pull request, custom에 대한 내용은 생략. 문서 참고

 

4) step (가장 어두운 파랑 블럭): 빌드 수행 단위 정의 한다. 각 step은 정의한 순서대로 수행되고, 최대 100step개 까지 정의 가능 하다.

- 메모리 최대 4GB 사용가능 하다.

- 각 step은 다른 독립적인 docker image를 사용한다. ( 주의해야할 부분이다. 다른 step에서 생성한 파일을 찾을 수 없는 문제가 발생한다. artifacts를 이용해 가능한 것 같은데 동작안했다. 문서를 더봐야겠다... )

 

5) script : 실제 명령어를 정의 하는 부분이다. linux 명령어를 이용하면 된다.

- ex) cd src, ls -al, npm install 등

 

 

실제 작성한 예제를 살펴보자.

pipeline이라는 branch에 새로운 커밋이 push 됬을때 자동으로 aws s3로 배포되도록 구현한 bitbucket-pipeline.yml 파일이다.

 

image: node:10.15.3

pipelines:
  branches:
    pipeline:
        - step:
            name: build and deploy
            caches:
                - node
            script:
                - cd src                                                   #repository 경로에서 프로젝트 파일이 있는 src로 이동
                - npm install                                              #npm 모듈 설치 및 build
                - npm run build                                            
                - ls -al                                                   #build 후 dist 디렉토리 생성된 것 확인차 조회
                #s3로 deploy 설정 부분
                - pipe: atlassian/aws-s3-deploy:0.3.7
                  variables:
                        AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID               #repository variable 이용
                        AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY       #repository varibale 이용
                        AWS_DEFAULT_REGION: 'ap-northeast-2'
                        S3_BUCKET: $S3_BUCKET                               #repository varibale 이용
                        LOCAL_PATH: 'dist'                                  #배포할 경로
                        EXTRA_ARGS: '--delete'                              #기존 중복되지 않는 s3 데이터는 삭제하는 option

definitions:
  caches:
    node: src/node_modules                                                  #cache할 node_modules 경로 정의

** 아래 링크에서 bitbucket-pipeline.yml validator 편집기와 다른 플랫폼으로의 배포 template을 제공하니 여기서 작성해보면 되겠다.

https://bitbucket-pipelines.atlassian.io/validator

 

**name : 아래 스샷과 같이 배포 pipeline이 시작하면, step과 step별 상태를 표시해주는데 표시될 name title을 정해주는 부분이다.

 

 

** cache : 프로젝트 개발 초기를 제외하고 대부분의 경우는 프로젝트가 의존하는 라이브러리나 패키지는 자주 변하지 않기 때문에 의존 패키지들은 빠른 배포/빌드를 위해 캐시에 저장할 수 있는 기능이 있다.

node, pip, maven 등 많이 사용하는 것들은 bitbucket이 이미 경로를 정의 default로 해놓았다. 

문서참고 https://confluence.atlassian.com/bitbucket/caching-dependencies-895552876.html#Cachingdependencies-defined-caches

하지만 repository root 경로에 바로 node project가 있지 않으면 cache가 정상적으로 저장되지 않는다. 왜냐하면 앞서 말했듯이 이미 정의되있는 default 경로가 root경로의 node_modules 이기 때문이다. 그래서 맨 아래 definitions 블록을 통해 캐시할 경로를 따로 추가 정의해 주었다. 예제는 {repository root 디렉토리}/src/{node 프로젝트} 형태로 구성되어있는 경우의 예시이다.

 

** script 의 pipe 이하 부분은 bitbucket pipeline에서 다른 제공하는 template을 가져온 부분이다. 위의 링크로 들어가 validator에서 작성 시 우측에 pipe template 목록이 있는데 여기서 기본 틀을 복붙에서 필요한 부분을 추가/제거해서 사용하면 된다.

variables에는 aws 서비스를 써봤으면 다들 알만한 access_key_id, acces_key, region, bucket명 등을 정의한다.

이외의 다른 옵션 설정들은 pipe template마다 해당 repository가 있으니 들어가서 확인해보면 된다.

ex) s3 pipe repository https://bitbucket.org/atlassian/aws-s3-deploy/src/0.3.7/

 

** EXTRA_ARGS : s3 deploy pipe는 aws s3 cli 명령어 중 sync를 사용하는 거라고 보면된다. EXTRA_ARGS에서는 이 sync 명령어에 줄 수 있는 옵션을 파라메터로 줄 수 있는 부분이다. aws docs 참고하면 된다. https://docs.aws.amazon.com/cli/latest/reference/s3/sync.html

예제에 있는 '--delete'는 s3 bucket에 source upload 후 upload한 파일에는 없지만 s3에는 있는 파일을 지우는 옵션이다. (즉, 업데이트하고 원본에 없는데, S3에 남는 이전의 쓰레기 파일들을 제거)

 

** 환경변수 사용 : $AWS_ACCESS_KEY_ID, $AWS_SECRET_ACCESS_KEY, $S3_BUCKET 같은 환경 변수가 예제에 보일 것이다. access key 같이 노출되거나 repository에 남겨지면 안되는 정보의 경우 직접 yml파일에 키를 기입하는 것이 아닌 bitbucket에서 환경변수로 관리하는 것이 낫다.

또한 $S3_BUCKET 버킷명 같이 테스트 단계에서 자주 바뀔 수 있는 부분은 변수로 관리해주는 것이 더 수월하다. (배포할 버킷명을 변경할때마다 새로 커밋 푸시하는 것보다 repository setting에서 변경하는 것이 편하다!)

 

repository variables는 repository 메뉴의 Settings>PIPELINES>Repository variables 에서 설정이 가능하다.

변수명과 값을 입력하여 추가하는 방식이며, access_key나 비밀번호 같이 노출되면 안되는 경우 secured를 check해주면 아래와 같이 settings창에서나 build 과정에서 노출되지 않는다.

환경변수에 대한 문서 참고 https://confluence.atlassian.com/bitbucket/environment-variables-794502608.html