Build a Node.js and React app with npm on jenkins

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

이 예제를 따라 가면서 기록 남기는 용도이다.

Github fork

https://github.com/jenkins-docs/simple-node-js-react-npm-app

이 곳에 가서 우 상단 fork 버튼을 클릭한다.

github가 가입되어있고, 내 레파지토리로 상위가 포크 된다는 전제이다.

Jenkins File을 레파지토리에 직접 넣어 줘야 해서 필요하다.

아니면 예제에 나온것처럼 로컬 작업을 해야 하는데 그게 더 힘들 것 같다.

파이프라인만들기

젠킨스 대쉬보드 > 새로운아이템 > 파이프라인 선택 > 저장(이름 넣고)

• 파이프라인 : Pipeline script from SCM 선택
• SCM : git
• Repository url : fork한 내 GitHub url
• Credential : github credentails이 있으면 선택하고 없으면 비게 놔둬도 된다. (단, 프라이빗 레포가 아니라는 전제이다.)
• Script Path : Jenkinsfile

Jenkins file 만들기

github에 가서 내 레파지토리로 fork가 된 simple-node-js-react-npm-app 레포에 진입한다

• Create new file : 버튼 클릭
• 파일명 : Jenkinsfile (Script Path의 이름과 같아야 한다. 대소문자 주의)

pipeline {
    agent {
        docker {
            image 'node:6-alpine' 
            args '-p 3001:3000' 
        }
    }
    stages {
        stage('Build') { 
            steps {
                sh 'npm install' 
            }
        }
    }

jenkins가 동작하는 서버에 docker와 nodejs&npm이 깔려 있다는 전제가 있다.

Agent docker

파이프라인이 독커에서 실행 되는데, 해당 이미지는 node:6-alpine이다. args는 docker 실행시 들어가는 파라메터 값으로 -p 3001:3000 host 머신(젠킨스 돌아가는 서버) 3001 포트로 대외 서비스 하고, 3000번 포트는 독커 포트이다. 이 둘을 연결하는 파라메터 이다.

stage

파이프라인의 순서이자 이름이다. 여기서는 Build만 았고 npm프로젝트를 install 한다.

Build

젠킨스대쉬보드 > 파이프라인 > '위에서 만든 프로젝트'파이프라인 선택 > Build Now

만약에 빌드 중 다음과 같은 오류가 나온다면

npm ERR! Error: EACCES: permission denied, mkdir '/.npm'

파이프라인 코드를 다음과 같이 변경 해보자

pipeline {
    agent {
        docker {
            image 'node:6-alpine' 
            args '-p 3001:3000' 
        }
    }
    environment {
        HOME = '.'
    }
    stages {
        stage('Build') { 
            steps {
                sh 'npm install' 
            }
        }
    }
}

https://stackoverflow.com/questions/42743201/npm-install-fails-in-jenkins-pipeline-in-docker/42957034?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

여기 보고 고치긴 했는데 자세한 이유는 잘 모르겠다. 다음 기회에...

/var/lib/jenkins/workspace/nodejs 디렉토리를 가보면 nodejs가 인스톨 되어 있는 것을 볼 수 있다.

nvm 사용 (agnet를 사용하지 말고)

agent를 사용하지 않고 로컬 서버 환경에 있는 node&npm을 사용하면 node 혹은 npm 둘다 command not found가 발생할 수 있다. bin path가 사용자 환경과 다르기 때문이다.

jenkins plugin install

https://wiki.jenkins.io/display/JENKINS/Nvm+Wrapper+Plugin

이 플러그인을 젠킨스에 설치 한다.

대쉬보드 > 젠킨스관리 > 플러그인 매니저

파이프라인

프리스타일화면 또는 스크립트를 통해서 nvm을 적용 가능하다.

스크립트는 다음과 같이 처리 하면 된다.

node {
    checkout scm

    stage('build') {
        sh "echo $PATH"


        nvm(nvmInstallURL: 'https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh', 
             nvmIoJsOrgMirror: 'https://iojs.org/dist',
             nvmNodeJsOrgMirror: 'https://nodejs.org/dist', 
             version: '10.16.0') {
                    sh "npm install"
                    echo "Build main site distribution"
                    sh "npm run build"
              }

    }
}

신경 써야 할 것은 2개이다.

• nvmInstallURL : nvm 설치 url -> 버전이 바뀌면 url도 바뀌게 된다.
• version : node version 이다.

nvm 환경내에서 작동할 shell script를 이후에 적용해 주면 된다.

Deploy

agent를 사용한 경우는 상관이 없겠지만, master agent를 사용한 경우는 직접 디플로이 처리 까지 해줘야 한다.

아래 코드는 build가 완료된 파일을 httpd(아파치) 디렉토리로 copy하는 내용이다.

node {
    checkout scm

    stage('build') {
        nvm(nvmInstallURL: 'https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh', 
             nvmIoJsOrgMirror: 'https://iojs.org/dist',
             nvmNodeJsOrgMirror: 'https://nodejs.org/dist', 
             version: '10.16.0') {
                    sh "npm install"
                    echo "Build main site distribution"
                    sh "npm run build"
              }

    }

    stage('Deploy') {
        sh "cp -r dist/* /data/test1/"
    }

}

상위 stage Deploy가 해당 영역인데, 상위 처럼 적용한 경우 permission denied가 날 가능 성이 높다.

jenkins는 jenkins라고 하는 user 또는 group권한을 바탕으로 마스터 서버에서 작동 하기 때문이다.

그래서 target이 되는 /data/test1/에 대한 그룹 권한을 다음과 같이 변경한다.

sudo chown -R root:jenkins test1/

sudo chmod 775 test1