React 기반 영화 앱 & Jenkins Pipeline 구축.

 

CI/CD(Jenkins) + React 프레임워크 간단하게 두가지 지식을 함께 사용하여 Jenkins Pipeline을 구축한 내용을 남깁니다.

 

인프라 환경

[ Infra  - AWS Public Cloud ]

1. EC2 2대 ( Jenkins Server & React Server ) // 각각 공인 IP 할당

2. 로컬 PC ( Mac )

 

소스코드 Github 주소 ( react 기반 영화 앱 )

https://github.com/qwq713/movie_app_2022-2

 

인프라 구성도

간단하게 EC2 2개를 각각 Jenkins / React 서버 용도로 구축했으며, 인터넷 액세스가 가능하도록 Elastic IP를 각각 할당했습니다.

 

구축한 Jenkins Pipiline 설명.

1.['Build'] GITHub과 연동하여 main branch가 변경될 경우 ( push ) 감지하여 Jenkins서버를 통해 새롭게 빌드한다. 

2.['Deploy'] 빌드된 결과물을 React-Server에 배포하기 전, 이전에 사용하던 빌드파일 및 관련 파일은 삭제하고, 서비스를 중지한다. 

3.['Deploy'] Jenkins 서버에서 새롭게 빌드된 결과물을 React-Server에 원격으로 카피한다. ( 기존 사용하던 파일은 삭제 )

4.['Deploy'] 새롭게 빌드된 결과물을 기반으로 React-Server의 서비스를 실행한다.

 

Jenkinsfile

node {
    
    def githubUrl = 'https://github.com/qwq713/movie_app_2022-2.git'
    def gitBranch = 'main'
    
    def remote = [:]
    remote.name = 'react-server'
    remote.host = // 'react-server-private or public ip'
    remote.user = // 'react-server username'
    remote.password = // 'react-server userpassword'
    remote.allowAnyHosts = true

    def remoteDirectory = '/ext001/movie-app-2022/'
    def remoteBuildDirectory = 'build'
    def startUpShellFile = 'startup.sh'
    def stopShellFile = 'stop.sh'

    stage('Setting'){
        sh "echo ${githubUrl}"
    }
    stage('Checkout') {

        sh "echo '=========================================='"
        sh "echo '=========================================='"
        sh "echo '<<<<< CheckOut Start ====================='"
        git branch: "${gitBranch}", url: "${githubUrl}"
        sh "echo '>>>>> CheckOut Complete==================='"
        sh "echo '=========================================='"
        sh "echo '=========================================='"
    }

    stage('Build') {
        sh "echo '=========================================='"
        sh "echo '=========================================='"
        sh "echo '<<<<< Build NPM =========================='"
        sh "echo 'NPM Version Check ========================'"
        sh "npm -v"
        sh "echo 'NPM Build ================================'"
        sh "npm install"
        sh "npm run build"
        sh "echo '>>>>> Build NPM Complete ================='"
        sh "echo '=========================================='"
        sh "echo '=========================================='"
    }

    stage('Deploy'){
        def logfileName = 'reactLogs2022'

        sh "echo '=========================================='"
        sh "echo '=========================================='"
        sh "echo '<<<<< Deploy Start ======================='"

        sh "echo '(REMOTE) execute stop.sh ================='"
        sshCommand remote:remote, command: "${remoteDirectory}${stopShellFile}" 

        sh "echo '(REMOTE) remove ${remoteDirectory}${remoteBuildDirectory} ================='"
        sshRemove remote: remote, path: "${remoteDirectory}${remoteBuildDirectory}"
        
        sh "echo '(REMOTE) remove ${remoteDirectory}${startUpShellFile} ================='"
        sshRemove remote: remote, path: "${remoteDirectory}${startUpShellFile}"
        
        sh "echo '(REMOTE) remove ${remoteDirectory}${stopShellFile} ================='"
        sshRemove remote: remote, path: "${remoteDirectory}${stopShellFile}"

        sh "echo '(REMOTE) put from ${remoteBuildDirectory} into ${remoteDirectory} ================='"
        sshPut remote: remote, from: "${remoteBuildDirectory}", into: "${remoteDirectory}"

        sh "echo '(REMOTE) put from ${startUpShellFile} into ${remoteDirectory} ================='"
        sshPut remote: remote, from: "${startUpShellFile}", into: "${remoteDirectory}"
        sshCommand remote: remote, command: "chmod +x ${remoteDirectory}${startUpShellFile}"

        sh "echo '(REMOTE) put from ${stopShellFile} into ${remoteDirectory} ================='"
        sshPut remote: remote, from: "${stopShellFile}", into: "${remoteDirectory}"
        sshCommand remote: remote, command: "chmod +x ${remoteDirectory}${stopShellFile}"

        sh "echo '(REMOTE) execute start.sh ================='"
        sshCommand remote:remote, command: "${remoteDirectory}${startUpShellFile}" 

        sh "echo '>>>>> Deploy Complete ===================='"
        sh "echo '=========================================='"
        sh "echo '=========================================='"
        
    }
}

 

startup.sh

#!/bin/bash
cd /ext001/movie-app-2022/
nohup npx serve -s ./build >> reactLogs2022 2>&1 &

 

 

stop.sh

#!/bin/bash

echo "===================== stop.sh Script ====================="

port_num=3000
process_pid=`lsof -i:$port_num | grep -v PID | grep -i "listen" | awk '{print $2}'`

if [ -z "$process_pid" ];
then
  echo "$port_num is available"
else
  process_ppid=`ps -o ppid= -p $process_pid | tr -d '[:space:]'`
  echo "kill -9 $process_pid ..."
  kill -9 "$process_pid"
  echo "kill -9 $process_ppid ..."
  kill -9 "$process_ppid"

  sleep 3
  echo "$port_num is down, so $port_num is available"
fi

echo "===================== stop.sh Script Complete ============"