[Dev, Jenkins] Vue 프로젝트 Jenkins CI/CD 구축 (1) Github webhook 사용하기

Vue 프로젝트를 Jenkins를 통해 CI/CD 환경을 구축하는 방법을 알아보겠습니다.

 

먼저 환경으로는 nodejs, tomcat, github, jenkins를 사용하였습니다.

Nodejs : vue 프로젝트를 실행 및 빌드를 하기 위함

Tomcat : 서버 배포를 하기 위함

Github : git에 올려진 코드를 webhook으로 jenkins에 보내기 위함

Jenkins : webhook을 받아 CI/CD 구축을 하기 위함

 

Nodejs를 통해 vue 프로젝트를 만들고 코드를 git에 올리는 것을 했다고 가정을 하고 글을 작성하겠습니다.

 

CI/CD 환경을 구축하는 단계입니다.

1. Github에 코드를 커밋/푸시를 합니다.

2. Github에서 푸시되었을 때, Jenkins에 webhook으로 메세지를 전달합니다.

3. Jenkins에서 메세지를 받고 Github에 있는 소스코드를 받아옵니다.

4. Jenkins가 소스코드를 받고 스크립트를 읽어 톰캣에 소스코드를 적용합니다.

---

 

이번 포스팅에서는 Github 소스가 푸시되었을 때, webhook을 통해 Jenkins에 메세지를 전달하는 과정을 설명하겠습니다.

 

Chap1. 젠킨스 URL 설정

---

 

먼저 젠킨스에서 URL 설정을 해줍니다.

외부 서버에서 젠킨스를 접속할 수 있도록 URL을 설정해주어야합니다.

 

 

 

Chap2. 깃허브 Webhook 설정

---

 

깃허브 webhook 설정은 레포지토리의 Settings - Webhooks에서 설정할 수 있습니다.

이미지의 Add webhook을 눌러 webhook을 생성합니다.

 

 

payloadURL에 젠킨스 주소를 입력하게 됩니다.

payloadURL은 http://[젠킨스URL]/github-webhook/ 이고, 맨 뒤에 github-webhook을 넣어주어야합니다. 

여기 payload URL에서 가장 맨 뒤에 github-webhook/ 에서 '/'를 꼭 넣어주어야합니다.

안 그러면 300번대 오류가 발생하게 됩니다.

Content type은 application/json 형태로 하고 webhook을 생성합니다.

Just the push event. 에 설정을 해주었기 때문에 깃허브 레포지토리에 푸시가 되었다면

Webhook이 실행되게 됩니다. Webhook이 정상적으로 실행되었는지는 Recent Deliveries 탭에서 확인할 수 있습니다.

 

 

 

 

Chap3. Webhook 확인

---

 

정상적으로 Webhook이 보내졌다면 성공했다는 체크 표시를 볼 수 있습니다.


이상으로 깃허브 Webhook과 Jenkins와 연동하는 방법을 설명했습니다.

다음 포스팅으로 Jenkins에서 webhook을 받는 방법 및 스크립트를 실행하는 방법에 대하여 알아보겠습니다.