[Jenkins] Jenkins와 GitLab을 사용해서 React CI&CD 구축하기

🙋‍♀️ 들어가기전에

CI&CD란?

CI는 지속적 통합(Continuous Integration)으로 간단히 빌드작업을 생각하면 되고, 

CD란 지속적 배포(Continuous Deploy)로 서버에 프로젝트를 올리는 작업이다.

 

서비스를 운영해본 사람들은 직접 빌드/배포를 하는게 얼마나 귀찮은 일인지 알 것이다.

프로젝트 초기에 잔오류들 때문에 배포를 자주 해야할때가 있는데, 그때마다 직접 빌드하고 그걸 압축해서 서버에 압축풀고 배포하는 작업을 계속해왔다😂

단순 반복 작업이 계속 되니 도저히 안되겠어서 CI&CD를 구축해야겠다고 결심했다.

Jenkins를 사용해서 GitLab에 푸시가 되면 Slack 알람까지 오게하는 방법을 알아보겠다.

# Jenkins로 분산환경 구축

분산환경이란 Jenkins서버(Master)는 따로두고 각각 다른 서버(Slave)에 프로젝트를 빌드 및 배포하는걸 말한다.

Jenkins로 분산환경을 구성할려면 slave node를 등록해줘야한다.

그럼 등록 방법을 알아보겠다.

 

- Slave를 등록할 서버로 접속한다.

필자는 Window 서버를 사용한다.

 

- Jenkins 관리 메뉴의 System Configuration에서 노드 관리 메뉴를 선택한다.

 

- 신규 노드를 생성한다.

Jenkins와 Slave를 연결하는 여러 방법이 있는데, 

여기선 Launch method를 선택하는데 Lanunch agent by connecting it to the master 방법을 사용한다.

 

- 목록으로 돌아가면 새로 생성된 Slave가 존재하고, 클릭 하면 아래 사진과 같은 화면이 나온다.

Lanch 버튼을 클릭하여 JAVA프로그램인 다운받는다.

※ JAVA가 설치되어있어야 실행되므로 사전에 설치해준다.

 

-파일을 실행시키면 Jenkins agent가 실행되고 Connected라고 표시되면 성공이다.

상단에 File을 눌러서 Install as a service를 클릭하면 Service에 추가되어 매번 파일을 실행하지 않아도 자동으로 Jenkins서버에 접속된다.

# NodeJS 플러그인 설치

React는 NodeJS를 사용해서 빌드하므로 NodeJS 플러그인 설치가 필요하다.

 

-Jenkins관리 메뉴의 Plugin Manager에서 설치 가능 탭을 선택하고, NodeJS를 검색하여 설치한다.

-Jenkins관리 메뉴의 Global Tool Configuration에서 아래 사진과 같이 사용할 Node버전을 선택해서 추가한다.

# Item 생성하기

-새로운 Item을 선택하고 Freestyle project를 선택하여 생성한다.

# Jenkins 시나리오 설정하기

- General

사용할 항목들을 설정하고, Restrict where this project can be run에 추가한 Slave node명을 입력한다.

- 소스 코드 관리

Git을 선택하고 Git 프로젝트 URL을 입력한다.

Credentials를 선택하여 자격증명을 한다.

-빌드 유발

아래 사진과 같이 설정하여 Master에 Push되었을 때 빌드/배포가 되도록 설정한다.

고급버튼을 누르면 Secret token이 나오는데 이 값을 복사해준다.

GitLab프로젝트로 가서 Setting메뉴의 Webhooks를 선택하여 복사한 URL과 Token을 입력하고 Push Event 트리거를 선택한 뒤 추가한다.

-빌드 환경

사용할 항목들을 선택한다.

 

-Build

Execute NodeJS script를 선택하여 추가해둔 NodeJS를 선택한다.

Execute Windows batch command를 사용해서 빌드 및 배포 명령어를 작성한다.

필자의 경우 구별을 위해 아래와 같이 단계적으로 command 명령어를 나눴고, WEB 서버는 IIS를 사용한다.

이제, 저장하면 끝이다.

 

# 테스트하기

이제 Master 브랜치에 Git Push를 날려보면 빌드가 되고, 배포까지 되는걸 확인할 수 있다.

 

---

🎉  피드백은 언제나 환영입니다. 🎉

---