[Jenkins - Gitlab] Jenkins로 SpringBoot + React 자동 CI/CD 구축하기 (2) Gitlab 브랜치와 연결된 자동 빌드 / 배포

이전 글: (1) jenkins 설정

https://doteloper.tistory.com/81

[Jenkins - Gitlab] Jenkins로 SpringBoot + React 자동 CI/CD 구축하기 (1) jenkins 설정

 

---

1편에 이어, 이제 본격적으로 Gitlab과 연동하고 배포를 진행해보자.

1. 아이템 생성

Jenkins Dashboard > 새로운 Item을 클릭해 아이템을 만든다.그 후, Freestyle project를 선택하고 프로젝트 이름을 등록한다.

 

2. Item 설정: 소스코드 관리

아이템을 생성하면 바로 설정 페이지로 이동한다. 만약, 다시 들어가고 싶다면 내 Item 클릭 > 구성 으로 들어가면 된다. 

 

✅ 소스 코드 관리 클릭!

✅ None 에서 Git으로 변경

✅ Repository URL: 등록할 gitlab repository url을 등록한다. 이 URL은 https://~.git 형식의 clone url 이다.✅ Credential: 앞서 등록한 gitlab crediential을 선택하거나 새로 Add 한다.만약, 제대로 등록이 되었다면 아래처럼 오류가 안뜨고 깨끗한 창이 된다!

 

✅ 빌드를 실행할 브랜치를 적는다. 나의 경우 develop 브랜치에 있는 코드들을 빌드할 것이기 때문에 아래와 같이 등록하였다. 

 

3. Item 설정: 빌드 유발

webhook 시그널을 받고 빌드할 수 있도록 트리거를 설정

✅ Build when a change is pushed to GitLab webhook URL: ... 체크

✅ Enabled GitLab triggers에서 자신이 원하는 trigger를 체크

✅ 오른쪽 아래, 고급 버튼을 눌러 가장 아래에 Secret Token을 generate 한다.

 

4. Item 설정: 빌드 환경

React 프로젝트를 빌드해야 하므로 빌드환경을 설정한다.

 

아래 사진과 같이 Provide Node & npm bin/ folder to Path를 체크, 

이전에 플러그인을 통해 설치한 것을 NodeJS Installation에 등록

 

4. Gitlab 설정: Webhook Setting

Gitlab repository > Settings > Webhooks

위 경로로 들어가 셋팅을 해주자.

URL: http://localhost:8080/project/{item명} ( 앞에 주소는 젠킨스 주소를 적으면 된다 ! )

Secret token: 방금 젠킨스에서 generate 한 Secret token 복붙

 

5. Build Now!

앞서 설정한 내용을 저장하고 Build Now 클릭!

아직 완전한 빌드가 되진 않겠지만, git repository가 땡겨와지는지 먼저 확인하는 작업이다.

 

✅ 빌드 현황에 초록불이 뜨는지 확인 !

✅ Docker volumn에 설정한 파일 경로에 git 레포지토리가 땡겨오는지 확인

 계속 빌드가 되어 있어서 #181번임을 참고,,!

 

6. 빌드 내용 입력하기

Jenkins Item > 구성 > Build

FrontEnd 빌드 ( React )

✅ Add build step > Excute shell 클릭

프론트엔드 폴더가 있는 곳으로 이동하여, 각 프레임워크에 맞게 빌드 명령어를 입력하면 된다.

위 파일 구조와 React Framework 기준,

cd frontend
npm install
npm run build

 

Backend 빌드 ( Spring Boot - Gradle)

✅ Add build step > Invoke Gradle 클릭

이전, 플러그인 설치 후 등록했던 Gradle을 등록해준다.

✅ Add build step > Excute shell 클릭

Build.gradle이 있는 폴더로 가서, 

gradle에 권한을 부여한 후,

기존의 빌드를 clean하고

다시 build하는 Command를 작성하였다.

 

Build 파일 실행

중요한 것은, 빌드에서 끝나는 것이 아니라 이 파일들을 Run 시켜야 한다는 것이다.

나는 이를 위해 산출된 파일을 deploy 폴더에 옮기고, java 명령어로 실행 시킨 후 nginx를 재부팅 시키는 방식을 택했다.

✅ Add build step > Send files or execute commands over SSH 클릭

✅ SSH Server는 기존에 public over SSH 플러그인 설정 시 등록해놓은 ssh 서버로 선택한다.

✅ Transer Set > Source files: 어떤 파일들을 옮길건지 지정한다.

✅ Transer Set > Remote directory: 어디로 파일을 옮길건지 지정한다.

✅Transer Set > Exec Command: 나의 경우, 파일을 옮기고 바로 Java 실행, nginx 재부팅하도록 하는 코드를 이곳에 작성하였다. 파일만 옮기는 작업이 필요하다면 굳이 기재하지 않아도 된다!

 

#!/bin/sh

echo ${PWD}
JAR_PATH="/home/{사용자명}/deploy"
PID_FILE="/home/{사용자명}/deploy/application.pid"
LOG_FILE="/home/{사용자명}/deploy/application.log"
echo ${PWD}
if [ -e ${PID_FILE} ]; then
        kill -15 $(cat ${PID_FILE})
else
        result_value=$(netstat -nap 2>/dev/null | grep {BE 포트 번호} | awk '{print $7}')
        number_value=${#result_value}

        if [ $number_value == 0 ]; then
                echo '해당포트가 미사용중으로 이미 종료되었습니다..'
        else
                echo '종료를 시작합니다.'
                pid_val=${result_value%%'/'*}
                kill -9 $pid_val
                if [ $? == 0 ]; then
                        echo '정상종료'
                else
                        echo '종료 실패'
                fi
        fi
fi

if [ -e ${LOG_FILE} ]; then
        rm ${LOG_FILE}
fi

nohup java -jar /home/{사용자명}/deploy/godlife-0.0.1-SNAPSHOT.jar --server.address=127.0.0.1 --spring.pid.file=${PID_FILE} >> ${LOG_FILE} 2>&1 &

sudo service nginx restart

위의 Shell Script는

경로에 기존에 빌드되어 배포되고 있는 프로세스 종료 & 로그파일 삭제 후,

JAR 파일을 실행시키는 코드이다.

( 무조건적으로 이렇게 해야하는 것은 아니며 자신의 프로그램에 맞게 짜면 된다! )

 

FrontEnd 배포의 경우, 

 

Nginx 설정파일에서 Root 경로를 빌드 결과물이 생기는

/app/swim/workspace/{item}/frontend/build 를 바라보게 하면 된다.

Shell Script에서 이를 계속 restart 해주므로 Nginx 설정만 바꿔주면 별다른 실행 과정이 필요 없다!

---

이렇게 하면!!!!!

Gitlab develop브랜치에 푸쉬됨과 동시에 빌드가 되고 배포가 완료된다.

멀고도 험난한 Jenkins가 끝났다. 쨖쨖짜꺄ㅉㄲ짞👏