bitbucket pipelines 사용하기 (실전편)

이전 bitbucket pipeline 사용하기(https://jamcode.tistory.com/57) 에 간단한 pipeline 에 대한 설명을 참고 할 수 있다. 이번에는 실제로 적용한 예를 공유하려고 한다. 

프론트는 node 환경에서 ReactJS 를 통해서 개발하고 webpack 으로 빌드된 bundle.js 및 기타 resource 를 배포할 것이고 백엔드는 java 를 gradle 로 빌드하여 jar 를 만들어 배포할 것이다. 우선 bitbucket-pipelines.yml 을 작성해 보자.

bitbucket 은 docker 환경에서 빌드를 진행하며 전체의 docker 이미지를 설정할 수도 있지만 각 step 의 image 를 별도로 설정할 수도 있다. 기본적으로 제공해 주는 image 중 아주 좋은 default environment 가 있는데 https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html 여기를 통해서 확인해 볼 수 있다.

내가 사용한 이미지로 내가 필요했던 것은 빌드를하고 scp 를 통해서 빌드 결과를 전송하여 서버에 바로 적용하기 위해서 위에 것들이 모두 필요했다.

step 은 하나만 사용했으며 순서는 아래와 같다.
1. 내가 빌드하려는 node project 로 이동한다.
2. node_modules 설치 (npm install)
3. webpack 명령어가 필요하므로 node_modules 의 webpack 을 alias 로 설정한다.
4. webpack-cli 명령어도 동일하게 alias 로 설정
5. webpack 실행
6. bundle.js 배포
7. java project 로 이동
8. gradle 실행
9. jar 배포

alias 를 사용한 이유는 webpack 과 webpack-cli 를 global 이 아닌 패키지안에 설치했지만 global 로 설치된 것과 같이 명령어를 바로 사용하기 위해서 이다. 특히 webpack-cli 는 global 로 설치하려고 하면 권한 문제로 설치가 되지 않기 때문에 alias 로 우회하여 사용하였다.

bitbucket ssh 

아마존에 배포할 때는 ssh 로 배포해야 하는데 ssh key 생성은 repository setting > SSH keys 로 이동하면 볼 수 있다.

여기서 Generate keys 를 누르면 private, public key 가 생성되고 내가 배포하려는 Host address 추가한 뒤 Fetch, Add 해준다.
(https://confluence.atlassian.com/bitbucket/use-ssh-keys-in-bitbucket-pipelines-847452940.html)

그리고 Public key 를 배포하려는 서버의 .ssh/authorized_keys 파일에 붙여 넣어준다. 기존 key 도 있으므로 아래에 append 해주어야 한다. 그리고 ssh 키는 pipeline 실행 시 ~/.ssh/config 로 접글할 수 있다.

예) ssh -i ~/.ssh/config user@host, scp -i ~/.ssh/config user@host:target

프론트 배포 시 

bundle.js 를 사용하여 배포할 때 브라우저의 js 캐쉬가 문제가 된다. 이를 해결하고자 index.html 에 스크립트를 아래와 같이 추가했다.

<script src="/bundle.js?v={version}"></script>

그리고 pro_front_deploy.sh 에서 version을 시간으로 변경해서 배포해 주었다. 위의 pro_front_deploy.sh 파일은 아래와 같다.

백엔드도 비슷하게 작성하여 사용하였다.