[CI/CD] 도커와 젠킨스, 그리고 WebHooks로 React 자동 배포로직 만들기

이번에는 저번 백엔드에 이어 프론트엔드 React 컨테이너를 배포해보도록 하겠습니다 ☺

 

어느정도 백엔드와 겹치는 부분이 많아 파이프라인 설정부터 웹 훅까지 하나의 포스팅에서 다루어보려고 합니다.

 

.env 파일 서버에 등록하기

먼저 배포를 준비하기 위해 .env 파일을 서버에 복사하겠습니다.

1. 도커 젠킨스 컨테이너 안으로 들어가기

docker exec -it jenkins-server /bin/bash

 

2. 루트 계정으로 접속하기

su -

 

3. 파일 생성하기

vi /var/jenkins_home/.env

 

3. 파일 작성 후 저장

젠킨스 서버에 npm 설치하기

배포를 하기 위해 npm install, npm run 등의 명령어를 사용해주기 위해 npm을 먼저 설치해주도록 하겠습니다.

 

1. 도커 젠킨스 컨테이너 안으로 들어가기

docker exec -it jenkins-server /bin/bash

 

2. 루트 계정으로 접속하기

su -

 

3. apt-get update

apt-get update

 

4. 설치하기

sudo apt install nodejs npm

 

도커 파일 생성

react 기준 도커 파일입니다. 간단한 예시이니 본인의 프로젝트에 맞게 수정해 사용해주세요.

# 기본 이미지로 Node.js 사용
FROM node

# 작업 디렉토리 설정
WORKDIR /restagram-front

# 종속성 설치를 위해 package.json 및 package-lock.json 복사
COPY package.json package-lock.json ./

# npm 종속성 설치
RUN npm install

# 소스 코드 복사
COPY . .

# React 애플리케이션 빌드
RUN npm run build

# 포트 3000 노출
EXPOSE 3000

# 애플리케이션 실행 명령어 설정
CMD ["npm", "start"]

 

젠킨스 파이프라인 생성

이제 프론트엔드 파이프라인을 생성해주도록 하겠습니다.

 

1. Dashboard > 새로운 Item 클릭

 

2. 새로운 아이템을 생성합니다.

그리고 타입을 Pipeline으로 해주세요.

 

3.  General

저는 Github 프로젝트에 제 레포지토리 URL을 입력해주었습니다.

4. Build Triggers 입력

Generic Webhook Trigger를 체크해줍니다.

만약 Generic Webhook Trigger가 없다면, Generic Webhook Trigger 플러그인을 설치해준 후 진행해줍니다.

 

Post content parameter에서 마스터 브런치에 푸시 이벤트가 발생했을 때 진행해주기 위해 ref와 $.ref를 입력해줍니다.

또한 JSONPath 에도 체크해줍니다.

 

Token Credential의 경우 이전에 사용한 github token 등록해줍니다.

 

토큰이 없다면 다음 포스팅을 참고해주세요

https://soyeonnnb.tistory.com/136#article-2--%EC%A0%A0%ED%82%A8%EC%8A%A4%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EA%B9%83%ED%97%88%EB%B8%8C-%ED%86%A0%ED%81%B0-%EB%B0%9C%EA%B8%89

[CI/CD] 도커와 젠킨스를 통해 스프링부트 배포하기 with Github

 

Optional Filter 에서는 위에서 작성한 ref가 refs/heads/master일때에만 가능하도록 해줍니다.

저 의미는 이벤트 발생 브런치가 master일 때만 필터링을 해주는데, 만약 다른 브런치이면 master대신 해당 브런치명을 입력해줍니다.

만일, 라벨 등 다른 조건이 있다면 더 검색해주세요..ㅎ

추가로, 하나의 토큰을 함께 사용하면 하나의 푸시로 여러개의 파이프라인이 실행됩니다.

따라서 저는 value에 $.repository.name을 추가하여 해당 레포지토리에서 푸시가 발생한 것인지도 filter에 추가해주었습니다.

 

그리고 마지막으로 GitHub hook trigger for GITScm polling 에도 체크해줍니다.

 

이제, Pipeline을 생성해주도록 하겠습니다.

이 예시는 React 기준 배포 로직입니다.

pipeline {
    agent any

    environment {
        FE_IMAGE_NAME = "restagram_client"
        FE_CONTAINER_NAME = "restagram_client"
        GIT_REPO = "https://github.com/soyeonnnb/restagram-front.git"
        GIT_BRANCH = "master"
    }

    stages {
        stage('Checkout') {
            steps {
                git url: "${GIT_REPO}", branch: "${GIT_BRANCH}"
            }
        }
        
        
        stage('Install Dependencies') {
            steps {
                sh 'npm install'
            }
        }
        
        
        stage('Build') {
            steps {
                // 기존 빌드 결과물 삭제
                sh 'rm -rf build || true'
           
                
                echo '깃허브 FrontEnd 빌드 Start'
            
                // application.yml을 복사한다.
                dir('/var/jenkins_home') {
                    sh '''
                        cp .env ${WORKSPACE}
                    '''
                }
                
                // 권한을 변경하고 빌드 시작
                sh '''
                    npm run build
                '''
            }
            post {
                success {
                    echo 'react build success'
                }
                failure {
                    echo 'react build failed'
                }
            }
        }
        
        stage('Dockerization') {
            steps {
                echo "FrontEnd Image Build Start"
                
                // 도커 이미지를 삭제합니다.
                sh '''
                    docker rmi ${FE_IMAGE_NAME} || true
                '''
                // 도커 이미지를 빌드합니다.
                sh '''
                    docker build -t ${FE_IMAGE_NAME}:latest .
                '''
            }
            post {
                success {
                    echo "build Docker FE Image Success"
                }
                failure {
                    echo "build Docker FE Image Fail"
                }
            }
        }     
        
        stage('Deploy') {
            steps {
                script {
                    // 컨테이너가 실행 중인 경우 중지 및 삭제
                    sh '''
                        docker stop ${FE_CONTAINER_NAME} || true
                        docker rm ${FE_CONTAINER_NAME} || true
                    '''
                    // 새 컨테이너 시작
                    sh '''
                        docker run --name ${FE_CONTAINER_NAME} -d -p 3000:3000 ${FE_IMAGE_NAME}:latest
                    '''
                }
            }
        }
    }
}

모두 작성해주었다면 저장을 눌러줍니다.

 

깃허브 웹 훅 설정

깃허브 레포지토리 > Settings > Webhooks > Add webhook 을 차례로 눌러줍니다.

 

Payload URL 에는 젠킨스 서버 주소 + /generic-webhook-trigger/invoke?token=TOKEN을,

Content type은 application/json 을 선택합니다.

여기서 TOKEN은 github token에 있는 값을 입력해주시면 됩니다.

저는 푸시 이벤트만 감지할 것이기 때문에 바로 Add webhook을 눌러주겠습니다.

 

그러고 커밋을 날리면 제대로 들어오는 것을 확인할 수 있습니다.

 

 

또한 웹으로도 접속이 잘 되는 것을 확인할 수 있습니다.

 

 

그리고 AWS EC2에서 인바운드에 해당 포트를 여는 것도 잊지 마세요 🤗