myBlog

git repository에 있는 react project를 Jenkins를 사용해

자동으로 개발서버에 빌드 및 도커 컨테이너로 배포하려 한다.

젠킨스 > Jenkins 관리 > 플러그인 관리

docker를 사용하여 컨테이너를 띄울 예정이니 docker 관련 플러그인을 설치해주자.

Jenkins에서 파이프라인을 만들어보자

Jenkins > 새로운 Item

새로운 Item을 생성한다.

Jenkins > 새로운 Item

'Pipeline', 배관 아이템을 선택한다. 아이템 이름은 필수값이다.

Jenkins > 새로운 Item > Pipeline

SCM을 Git으로 선택 후, GitHub의 Repository를 선택해준다.

Credentials에서는 여기서 생성한 Credential을 넣으면 된다.

Branches to build에는 master브랜치를 입력해준다.

개발 branch를 따로 지정해주고 싶다면 그렇게 해도 된다.

Script Path에는 레파지토리에 사전 작성할 파이프라인 스크립트의 파일명을 입력해주면 된다.

그리고 레파지토리에 Script Path에 해당하는 경로에 Script파일을 작성하면 된다.

나는 다음과 같이 작성했다.

pipeline {
    agent none
    //기본적으로 체크아웃을 하지 않는 옵션
    options { skipDefaultCheckout(true) }
    stages {
        stage('Checkout repository') {
            agent any
            steps {
                checkout scm
            }
        }
        stage('Build') {
            agent {
                docker {
                    image 'node:14.15.2-alpine'
                }
            }
            steps {
                sh 'npm install'
                sh 'npm run build'
            }
        }
        stage('Docker build') {
            agent any
            steps {
                sh 'docker build -t {image_name}:latest .'
            }
        }
        stage('Docker run') {
            agent any
            steps {
                sh 'docker ps -f name=raor_dev -q | xargs --no-run-if-empty docker container stop'
                sh 'docker container ls -a -fname=raor_dev -q | xargs -r docker container rm'
                sh 'docker images --no-trunc --all --quiet --filter="dangling=true" | xargs --no-run-if-empty docker rmi'
                sh 'docker run -d --name {container_name} -p 80:80 {image_name}:latest'
            }
        }
    }
}

Checkout repository에서 레파지토리 내용을 checkout받고 

Build에서 node를 docker agent로 실행해 소스를 build한다.

Docker build에서 도커 이미지를 빌드하고

Docker run에서 기존 컨테이너와 이미지를 지우고 새로운 컨테이너를 실행한다.

도커 build stage에서 사용할 Dockerfile은 다음과 같이 작성했다.

FROM nginx:latest
VOLUME /raor_dev_volume
RUN rm -rf /etc/nginx/conf.d/default.conf
ADD ./nginx/default.conf /etc/nginx/conf.d/default.conf
ADD ./build /usr/share/nginx/html

혹시 nginx 컨테이너와 파일 교환이 필요할 때 사용할 volume을 마운트해주고

build stage에서 빌드해놓은 ./build 디렉토리를 컨테이너의 nginx/html로 복사해주면 된다.

nginx의 기본 설정 파일의 경로는 /etc/nginx/conf.d/default.conf 이며

레파지토리에 nginx의 설정 파일을 작성해놓고 사용하려 한다. 기존 이미지에 있는 conf 파일은 삭제해준다.

사용자에게 api서버를 노출하지 않고 nginx가 제공하는 reverse proxy를 사용하려면 필수이다.

물론 nginx 컨테이너를 사용하지 않고 node 컨테이너를 사용하여 npm serve를 사용해 빌드된 리액트 애플리케이션을 실행 할 수 있다.

위와 같은 방법은 최신버전에서 보안도 많이 개선되었다고 한다. 하지만 nginx는 잘 알려진 훌륭한 웹서버이며 node컨테이너를 웹서버화하여 이미지로 만들어야 하는 번거로움도 없다.

이제 젠킨스에서 PIPELINE 실행을 통해 GitHub 레파지토리의 파일을 체크아웃받아 node로 빌드를 하고 nginx 이미지를 통해 빌드된 React application을 웹서버 컨테이너로 실행 할 수 있다.

작성 참조 링크

www.jenkins.io/doc/tutorials/build-a-node-js-and-react-app-with-npm/

twofootdog.github.io/Docker-Docker%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88%EB%A1%9C-jenkins-%EC%8B%A4%ED%96%89-%ED%9B%84-%EC%86%8C%EC%8A%A4-push-%EC%8B%9C-%EC%9E%90%EB%8F%99-%EB%B9%8C%EB%93%9C%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0(Springboot)/