Jenkins를 통한 React.js 자동 배포 [Nginx]

저번에 리액트 프로그램을 진행하게 되면서 CICD 구축의 중요성을 새삼 깨닫게 되었다. 운영할때마다 로컬에서 배포폴더 만들고, 서버에 직접 올리는 작업은 너무 시간도 많이 들었고, 무엇보다도 생산적이지 않았다. 그리하여 이번 리액트 프로그램을 진행할때엔 dev 브랜치에 푸쉬하면 바로 서버에 자동 빌드되는 환경 속에서 개발되길 원했다.
그리하여 본인은 젠킨스를 통해 자동 빌드를 하게 되었다.

먼저 GitHub에 Webhook을 설정해준다.

Webhook(웹훅)이란, 서버에서 어떠한 작업이 수행 되었을 때 해당 작업이 수행되었음을 HTTP POST로 알리는 개념을 말한다. (https://docs.iamport.kr/tech/webhook)

## 소스 코드 관리

1. 해당 깃 레포지토리와 자격 입력
2. 설정하고 싶은 브랜치 연결

## 빌드 유발

- GitHub hook trigger for GITScm polling을 체크

## 빌드 환경 [Node.js 환경 구성]

Provide Node & npm bin/ folder to PATH

## Build

- Execute shell 추가 : 빌드 단계에서 실행할 쉘 파일 추가

rm -rf node_modules # 기존 node_modules 삭제
rm package-lock.json yarn.lock 
npm cache clear --force
npm install 
npm install -g yarn
   
rm -rf dist # 기존 dist 폴더 제거
yarn prodDev # dev 배포폴더 생성 명령어
tar -cvf dist.tar dist #tar 파일로 생성


echo "FINISH"

##Send files or execute commands over SSH

SSH Server : 운영하고 있는 서버설정
Transpers

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 해주는 명령어가 포함되어있다.

해당 nginx 연결하는 정보는
2021.01.17 - [인프라] - Nginx 다중 포트 연결

Nginx 다중 포트 연결

을 참고하면 된다.