[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를 날려보면 빌드가 되고, 배포까지 되는걸 확인할 수 있다.
