인프라
젠킨스를 활용한 리액트 CI/CD 자동 배포 구축기
user-anonymous
2021. 7. 18. 15:50
728x90
저번에 리액트 프로젝트를 진행하면서 CI/CD 구축의 중요성을 다시금 체감하게 되었다.
매번 운영 시마다 로컬에서 배포용 폴더를 만들고, 서버에 직접 올리는 작업을 반복하다 보니 시간도 많이 들고, 무엇보다도 생산적이지 않았다. 그래서 이번 프로젝트에서는 dev 브랜치에 push 하면 자동으로 서버에 배포되는 환경을 구축해보고자 했다.
그리고 그 역할을 해줄 도구로 젠킨스(Jenkins)를 사용했다.
1. GitHub Webhook 설정
Webhook이란, 특정 이벤트가 발생했을 때 서버에 HTTP POST로 알려주는 방식이다. 즉, GitHub에서 특정 브랜치에 push가 발생하면 젠킨스가 이를 감지하여 빌드를 실행하도록 연결하는 것이다.
2. 젠킨스 설정
소스 코드 관리
- 깃 레포지토리 URL과 인증 정보 입력
- 빌드할 브랜치:
*/dev와 같이 명시
빌드 유발
GitHub hook trigger for GITScm polling체크
빌드 환경
Provide Node & npm bin/ folder to PATH설정
Build 단계
Execute Shell을 추가하여 다음 스크립트를 작성했다.
rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install
npm install -g yarn
rm -rf dist
yarn prodDev # dev 배포용 빌드 명령어
tar -cvf dist.tar dist
echo "FINISH"
3. SSH를 통한 서버 파일 전송 및 배포
Send files or execute commands over SSH
- SSH 서버 설정: EC2 운영 서버 정보 입력
- 전송 및 명령어 실행 스크립트 작성
sudo mv /home/ec2-user/deploy/dev/dist /home/ec2-user/deploy/backup
sudo mv -f dist.tar /home/ec2-user/deploy/dev
sudo /home/ec2-user/deploy/scripts/devDeploy.sh
echo "EXECUTE INTEGRATE_VIEW"
devDeploy.sh 스크립트에는 tar 압축을 풀고, service nginx restart를 실행하는 명령어가 포함되어 있다.
마무리하며
이렇게 젠킨스를 통해 dev 브랜치에 push만 하면 자동으로 빌드와 배포가 진행되는 환경을 만들었다. 단순한 자동화지만, 개발 속도도 빨라지고 관리도 훨씬 수월해졌다.
CI/CD는 구축할 때는 조금 시간이 들지만, 프로젝트가 커질수록 그 진가를 발휘한다는 걸 다시 한번 느꼈던 경험이었다.
728x90
반응형