[CowAPI] 36. React + Jenkins

1. 목표

• 젠킨스를 이용하여 프론트 엔드 배포 자동화 및 무중단 배포

2. 준비물

## 1. nvm(노드 버전 관리자)을 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

## 2. nvm을 활성화
. ~/.nvm/nvm.sh

## 3. Node.js의 최신 버전을 설치
nvm install --lts

## 4.  Node.js가 올바르게 설치되고 실행되는지 테스트
node -e "console.log('Running Node.js ' + process.version)"

• 참고 : AWS NodeJs

## 1. github 레포지토리
git clone git@github.com:Oh-JunYoung/CowAPI-Front.git

## 2. 프로젝트로 경로 이동 후 npm 설치
npm install

## 배포 테스트
## 1. 프로젝트 경로로 이동
cd {project path}

## 2. 빌드
npm run build

## 3. index.html 확인
## 3-1. nginx 설정 변경
sudo vi /etc/nginx/sites-available/cowapi.conf

## 3-2. nginx 테스트
sudo nginx -t

## 3-3. nginx 재시작
sudo systemctl restart nginx

3. 젠킨스

• jenkins -> 플러그인 -> nodejs 설치
• jenkins 관리 -> global tool config

# window는 sh 작성 후 git에서 파일 권한 수정
git update-index --add --chmod=+x {Filename}.sh

## PipleLine 구성

node {
echo "---build start---"

node {
    stage('Clone') {
        echo '>>> Git repository Clone'
        git branch: 'feature/Jenkins', credentialsId: {credentialsId} , url: {git url}
    }

    stage('Move to Path') {
        echo '>>> Move to Build Path'
        sh './jenkins/MovePath.sh'
    }

    stage('Pull') {
        echo '>>> Git repository Pull'
        sh './jenkins/GitPull.sh'
    }

    stage('Build') {
        echo '>>> React project Build'
        nodejs('nodejs-16.16.0') {
            sh './jenkins/Build.sh'
        }
    }

    stage('Nginx') {
        echo '>>> Nginx Restart'
        sh './jenkins/Nginx.sh'
    }
}

• webhook

• 이후 AWS 인바운드에 webhook 추가
  • hooks 추가

• 결과