Jenkins Pipeline 구축하기 - 프론트엔드편

이전 게시글에서는 백엔드 파이프라인을 구성하는 방법에 대해서 이야기 해보았다.

이번에는 프론트엔드에서는 어떻게 파이프라인을 구성할 수 있을 지에 대해 알아보도록 하자.

 

파이프라인을 구축하기 전까지의 단계인 깃헙 토큰 설정, 웹훅 설정, Credentail 설정은 백엔드편과 동일하기 때문에 생략하도록 하겠다. (사실 파이프라인 과정도 크게 다르지 않다.)

 

설정

우리팀의 프론트에서는 리액트를 사용하고있다. 이를 빌드하기 위해서는 서버에 Node.js가 서버에 깔려있어야한다. 이를 위해 Jenkins에서 미리 설정을 해주어야한다. 이를 위해서 젠킨스에 NodeJS 플러그인을 따로 설치해주었다.

NodeJS 플러그인이 설치되었다면, Jenkins관리 -> Global Tool Configuration 으로 들어간다. 아래로 내리다보면 NodeJS 부분이 보인다.

해당 부분의 Add NodeJS를 눌러 젠킨스 서버의 NodeJS를 설정해줄 수 있다. 처음에는 프론트와 상의하여 가장 최신 버전의 Node를 사용하는 것이 좋다고 생각했다. 하지만 테스트와 빌드가 GithubActions와 로컬에서는 정상적으로 수행되었지만, 젠킨스에서는 제대로 작동하지 않는 문제를 맞이했다. Node의 버전 문제인 것을 인식하고 프론트가 현재 사용하고 있는 NodeJS 버전으로 재설정해주었다.

이름은 버전 그대로 Node JS 17.4.0으로 지정해주었다. Node의 npm으로도 빌드와 테스트가 가능했지만, 프론트와 상의한 결과 yarn이 성능과 보안상으로 안전하다는 이유로 yarn 패키지 또한 설치해주었다. Global npm packages refresh hours는 기본값인 72로 설정해주었다.

 

파이프라인 작성

pipeline {
    agent any

    options {
        timeout(time: 5, unit: 'MINUTES')
    }

    stages {
        stage('Checkout SCM') {
            steps {
                checkout([$class: 'GitSCM', branches: [[name: '*/develop']], extensions: [], userRemoteConfigs: [[credentialsId: 'github_token', url: 'https://github.com/woowacourse-teams/2022-gong-seek']]])
            }
        }

        stage('Build and Test') {
            steps {
                dir('frontend') {
                    nodejs('NodeJS 17.4.0') {
                        sh '''
                            yarn install && yarn run test && yarn build-dev
                        '''
                    }
                }
            }
        }

        stage('Deploy') {
            steps {
                dir('frontend') {
                    sshagent(['gongseek-frontend-dev']) {
                        sh 'scp -r -o StrictHostKeyChecking=no dist ubuntu@${front_dev_ip}:/home/ubuntu/'
                        sh 'ssh -o StrictHostKeyChecking=no ubuntu@${front_dev_ip} "sh deploy.sh" &'
                    }
                }
            }
        }
    }

    post {
        success {
            slackSend (channel: 'jenkins', color: '#00FF00', message: "SUCCESSFUL: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]' (${env.BUILD_URL})")
        }
        failure {
            slackSend (channel: 'jenkins', color: '#FF0000', message: "FAILED: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]' (${env.BUILD_URL})")
        }
        aborted {
            slackSend (channel: 'jenkins', color: '#000000', message: "ABORTED: Job '${env.JOB_NAME} [${env.BUILD_NUMBER}]' (${env.BUILD_URL})")
        }
    }
}

최종적으로 작성한 파이프라인은 위와 같다.

 

options - timeout

파이프라인이 5분 내로 끝나지 않으면 해당 파이프라인은 ABORT 시키는 옵션

 

CheckOut SCM 

develop 브랜치로 checkout 한 후 서브모듈을 포함한 코드들을 가져온다.

 

Build and Test

가져온 코드들에서 frontend 경로로 이동하여 위에서 설치해준 NodeJS를 활용하여 yarn을 설치하고 테스트와 빌드를 실행해준다. yarn 설치는 최초 한번만 작동하며 그 이후에는 테스트와 빌드만 돌려준다. 위 파이프라인은 frond_dev의 파이프라인인데 빌드시 yarn build-dev 명령어로 빌드를 진행한다. 프론트엔드에서 환경마다 빌드를 다르게 해주기 위해서 빌드 명령어를 분리하였다. front_prod에서는 yarn build 명령어를 활용한다.

 

Deploy

위의 Stage에서 빌드를 통해 나온 dist 폴더를 프론트 서버로 이동시켜준 후,

해당 서버 안에 있는 쉘 스크립트를 실행한다.

 

post

파이프라인 결과에 따라 슬랙 알림을 보낸다.