[개발자는 코딩만] CI구축01 : Docker, Jenkins, Nginx, React

[개발자는 코딩만] CI구축01 : Docker, Jenkins, Nginx, React

2021. 2. 10. 16:24ㆍCICD/Jenkins

개발자가 실제 서비스에 대한 코딩 외에 빌드, 테스트, 배포의 과정이 너무 복잡해짐에 따라, 개발자들이 부담해야 되는 반복적인 작업을 대신 해줄 데브옵스가 강조되고 있습니다. 오늘 포스트에서는 다음과 같은 작업을 해보려고 합니다.

워크로드는 다음과 같습니다.

개발자는 React 프레임워크를 통해 웹 어플리케이션을 제작하고, 빌드하여, 이를 테스트 서버에 구동시켜 테스팅 하고 싶다. 테스트서버는 컨테이너를 통한 실행을 수행하고, 컨테이너는 react 프로젝트를 빌드하여 Nginx로 서버를 구동한다.

이를 지원하기 위한 데브옵스 환경을 구축해보겠습니다.

동작

1. 개발자가 github에 push하면, webhook을 통해 jenkins가 이벤트를 받고, 파이프라인을 동작시킨다.

2. jenkins는 파이프라인을 통해 개발자에게 빌드의 결과를 이메일로 전송하고, 도커 허브에 이미지를 배포한다.

3. 테스트 서버는 파이프라인에 의해 도커 허브의 이미지를 pull하고, 기존 컨테이너의 실행을 중지하고 새로운 컨테이너를 실행한다.

요약

개발자는 github에 push하는 행동 하나로 빌드, 테스트, 테스트 서버 배포를 모두 수행한다.

오늘 포스트할 부분은 아래와 같습니다.

react 프로젝트를 nginx로 실행하는 컨테이너를 빌드하기 위한 Dockerfile의 제작과 conf 파일 설정
jenkins의 pipeline을 통한 CI 구축

테스트 서버에 배포는 다음 포스트에서 작성하겠습니다.

이 때, Docker의 명령어와 Jenkins의 설치부분까지 포스트에 담지는 않기 때문에, 그 부분은 다른 블로그를 참조해 주시면 감사하겠습니다!

빌드

1. Create react app을 통해 간단한 react프로젝트를 생성합니다.

2. Dockerfile을 생성합니다.

3. Nginx에 공급할 configuration 파일을 생성합니다.

Dockerfile 생성

node이미지로 빌드하고, 그 빌드 파일을 nginx 이미지로 보내 웹 서버를 실행합니다.

FROM node:15.7.0-alpine as builder	# 노드버전 15.7.0
WORKDIR /app	# 작업 위치 지정
ENV PATH /app/node_modules/.bin:$PATH	# 환경변수 지정

COPY . /app	#현재 파일을 이미지의 /app 위치에 복사
RUN npm install	#package.json에 명시된 의존성 설치
RUN npm run build	#빌드시작!


#nginx 
FROM nginx:latest
RUN rm -rf /etc/nginx/conf.d	#기존 환경설정 제거
COPY conf /etc/nginx	#내 디렉토리의 conf폴더 내용을 복사
	#현재위치/conf/conf.d/default.conf 가 존재해야합니다.
COPY --from=builder /app/build /usr/share/nginx/html	#builder로 부터 /app/build를 복사해옵니다.

# 80번 포트를 노출한다고 써놨지만, 이는 명시하기 위한 것으로 반드시 docker run의 옵션으로 포트
# 매핑을 해야합니다.

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

conf/conf.d/default.conf 작성

listen할 포트와 url과 파일을 매핑해주면 됩니다.

server {
	listen 80;
    location / {
    	root /usr/share/nginx/html;
        index index.html index.htm;
    }
}

수행명령

아래의 명령어를 통해 도커 빌드와 실행을 테스트 해 볼 수 있습니다.

docker build -t sample .
docker run -it -p 80:80 sample&

이 모든 작업을 완료하시고 완료하시고, 브라우저로 접속해보면, 다음과 같은 결과를 만나실 수 있습니다.

Jenkins

그 다음 수행 작업은 jenkins 관련 작업입니다. jenkins는 설치까지 다루기엔 너무 글이 길어져서, 설치했다는 가정하에 설명하겠습니다.

jenkins 서버를 띄운 호스트ip:8080 에 브라우저로 접속하면, jenkins 관리자 페이지를 만나게 됩니다.

관리자 페이지에서 새 아이템 > pipeline 을 생성하시면 되는데, 여기에서 몇가지 설정을 해주셔야 합니다.

설정

우선 파이프 라인이 webhook에 대해 반응하도록 해야 합니다.

그 다음으로는 깃허브에 push가 들어올때, jenkins로 POST 요청을 보내기 위해 타겟 repo에 들어가셔서 아래와 같이 설정하셔야 합니다.

파이프라인 코드 작성

이제 다시 파이프라인 생성하는 페이지에서 파이프라인 코드를 작성해보겠습니다.

여기에 코드를 작성해주시면 됩니다.

jenkins는 선언적 언어와 스크립트 언어(그루비 기반) 두가지를 지원하는데, 선언적 언어에서

script{}

라는 문법을 사용하여 스크립트 언어를 중간에 쓸 수 있기 때문에, 헤매지 마시고 선언적 언어로 작성하시는 게 거의 대부분의 상황에서 유리합니다.(훨씬 간결)

아래와 같이 작성해서 저장하시면 끝입니다!

pipeline {
    environment {
        registry="도커허브id/도커허브repo"
        registryCredential='dockerhub'	#젠킨스 설정으로 가셔서 credential을 만드셔야합니다.
        dockerImage = '' #빌드한 이미지를 담는 변수
    }
    # 실행환경을 agent라고 합니다.
    agent any #스크립트 문법을 검색해봅시다! 꼭!!
    # 파이프라인은
    # 여러 스테이지와 각 스테이지 마다 스탭으로 나뉩니다.
    # 병렬적으로 실행하고 싶을때는 parrellel로 명시할 수도 있습니다.
    stages {
        stage("git pull") {
            steps {
            # git 에 올립니다. git 플러그인이 필요하니, 설치해주세요~
                git branch:'브런치명',
                    url:'깃허브 git 주소'
            }
        }
        
        stage("build") {
            steps{
            # docker 플러그인이 필요합니다.
            # 또한, 클라우드 상에서 jenkins를 돌리고 계실때,
            # jenkins 계정을 도커 사용그룹에 포함시켜 주셔야 합니다.
                script {
                    dockerImage = docker.build registry + ":$BUILD_NUMBER"
                }
            }
        }
        
        stage("push") {
            steps {
            # docker를 레지스트리(여기에선 도커허브)에 올립니다.
                script {
                    docker.withRegistry('',registryCredential){
                        dockerImage.push()
                    }
                }
            }
        }
        
        stage("Remove") {
        	# 젠킨스 서버에서 도커이미지를 제거합니다.
            steps {
                sh "docker rmi $registry:$BUILD_NUMBER"
            }
        }
        
    }
    post {
        success {
            echo '성공!'
            # 메일을 발송합니다. jenkins 시스템 설정에 메일 서버 등록한 뒤 사용 가능합니다.
            mail bcc: '', body: "Project: ${env.JOB_NAME} <br>Build Number: ${env.BUILD_NUMBER} <br> URL de build: ${env.BUILD_URL}", cc: '', charset: 'UTF-8', from: '', mimeType: 'text/html', replyTo: '', subject: "성공! : Project name -> ${env.JOB_NAME}", to: "수신자 이메일";
        }
        failure {
            echo '실패!'
            # 메일을 발송합니다. jenkins 시스템 설정에 메일 서버 등록한 뒤 사용 가능합니다.
            mail bcc: '', body: "Project: ${env.JOB_NAME} <br>Build Number: ${env.BUILD_NUMBER} <br> URL de build: ${env.BUILD_URL}", cc: '', charset: 'UTF-8', from: '', mimeType: 'text/html', replyTo: '', subject: "실패! CI: Project name -> ${env.JOB_NAME}", to: "수신자 이메일";
        }
    }
}

'CICD > Jenkins' 카테고리의 다른 글

[개발자는 코딩만] CI구축02 : Docker, Jenkins, Nginx, React (0)	2021.02.12

[개발자는 코딩만] CI구축02 : Docker, Jenkins, Nginx, React 2021.02.12

CrowdReport