기타/인프라 구축과정

[Infra] 5. Jenkins Front 빌드 & 배포 - HelloWorld Project

배발자 2023. 5. 24. 10:52
반응형

“[Infra] 3-2. Jenkins Back 빌드 & 배포 - HelloWorld Project” 게시글에서 Back 애플리케이션 빌드 및 배포 작업을 진행했다.

 

 

 

[Infra] 4. Jenkins Back 빌드 & 배포 - HelloWorld Project

브랜치 전략 필자가 진행한 프로젝트의 브랜치 전략은 Feature, Develop-BE, Develop-FE, Develop, Master이다. 먼저, 백엔드, 프론트 담당을 나누고 각 팀원마다 Feature 브랜치를 생성하여 자신의 담당 브랜치

baebalja.tistory.com

 

 

이번 포스팅에서는 Front의 빌드 & 배포 내용을 정리하려고 한다.

 

 

 

먼저, Develop-BE에 작업물이 반영되면 자동으로 깃랩에서 빌드 및 배포를 진행을 하게 되는데 이때 작업물들은 Back과 관련된 내용들이다. (이전 포스팅에서 다뤘던 내용)

 

Develop-FE의 작업물들이 Develop 브랜치에 Merge되면 자동으로 빌드 및 배포를 진행하게 된다. 즉, Jenkins의 Develop 프로젝트와 Develop_pipeline 파이프라인이 수행하게 된다.

 

 

(1) develop (프론트 빌드 작업)

 

Back과 Front는 분리하여 빌드 및 배포 작업을 수행하고 분리한 이유를 이전 게시글에 작성해뒀다.

그러므로 Develop 프로젝트에서는 프론트 작업물만 빌드 및 배포를 진행하면 된다.

(이미 back 애플리케이션 컨테이너는 구동중)

 

 

[Jenkins]

Dashboard -> develop -> Configuration -> Build Steps -> Execute Shell

 

[Execute Shell]

cd /var/jenkins_home/workspace/develop/FE
npm install
npm run build
cp -r /var/jenkins_home/workspace/develop/FE/dist /var/jenkins_home/workspace/deploy_test/front

 

  1. cd /var/jenkins_home/workspace/develop/FE - 해당 디렉토리로 이동.
  2. npm install - 해당 디렉토리에 정의된 npm 패키지들을 설치. 이 작업은 package.json 파일을 기반으로 이루어진다.
  3. npm run build - package.json 파일에 정의된 'build' 스크립트를 실행한다. 일반적으로 이 작업은 프로젝트를 빌드하여 배포 가능한 상태로 만든다.
  4. 4번째 라인. 빌드해서 만들어진 결과물(dist 폴더)를 배포 환경의 디렉토리 위치로 복사한다.

 

(2) develop_pipeline

 

pipeline{
    environment {
        dockerImage = ''
    }
    agent any 
    stages{

        stage('Building front image') {
            steps {
                script {
                  dockerImage = docker.build("bae3007/front-zero-downtime", "/var/jenkins_home/workspace/deploy_test/front")
                  withCredentials([usernamePassword(credentialsId: 'bae3007', usernameVariable: 'DOCKER_HUB_USERNAME', passwordVariable: 'DOCKER_HUB_PASSWORD')]) {
                     sh 'docker login -u $DOCKER_HUB_USERNAME -p $DOCKER_HUB_PASSWORD'
                     sh 'docker push bae3007/front-zero-downtime'
                  }
                }
            }
        }
        
        
        stage('Run docker front image') {
            steps {
              dir('/var/jenkins_home/workspace/deploy_test/front'){
                  sh 'chmod +x deploy.sh'
                  sh './deploy.sh'
                }
            }
        }
        
        stage('not using images&containers delete '){
            steps{
                sh "docker image prune -a -f"
            }
        }
    }
}

 

  1. Building front image: 이 단계에서는 Docker 이미지를 빌드하고 Docker Hub에 푸시.
  2. Run docker front image: 이 단계에서는 빌드한 Docker 이미지를 실행한다. 실행 스크립트는 deploy.sh 파일에 정의되어 있다.
  3. not using images&containers delete: 이 단계에서는 사용하지 않는 Docker 이미지를 제거한다. docker image prune -a -f 명령은 모든 사용하지 않는 이미지를 강제로 제거한다.

 

 

반응형