Jenkins를 활용한 React, Springboot CI,CD 구현(2)

 

 

들어가기

 

이 글은 Jenkins를 활용하여 React, Sprongboot를 배포하는 CI, CD를 구현하는 과정을 작성한 글이며, CD에 중점을 두어 작성하였다. 이전 내용은 아래의 주소를 참고하길 바란다. 

https://khdscor.tistory.com/67

aws jenkins(docker)를 활용한 react, springboot CI,CD 구현(1)

 

 

Jenkins를 통한 CD

1. Jenkins 설정

 

이전 글까지 자동 빌드를 구현하였다. 이제 남은 것은 자동 배포이다. react와 springboot 둘다 이전 글에 작성한 CI 과정을 똑같이 진행하여 jenkins 내에 두개의 item을 만들었다.

 

먼저 jenkins 서버에서 배포서버로 접근할 수 있도록 설정해줘야한다. Jenkins 관리 - 플러그인 관리로 들어가서 Publish over SSH를 설치하고 재시작해준다.

 

이는 다른 서버에 SSH 로 접속하여 파일을 전송하거나 특정 명령어를 실행하는데 사용된다.

이후 Jenkins 관리 - 시스템 설정으로 들어가서 Publish over SSH 설정을 수정하면 된다.

 

• Key : ec2 생성 시 발급받은 pem파일
• Name : 해당 서버 식별자
• Hostname : public ip 주소
• Username : ec2 유저 이름 (ubuntu)
• Remote Directory : 원격서버 작업디렉토리 (/home/ubuntu)

 

모두 설정 한 다음 우측 아래에 Test Configuration  을 클릭한 후에 좌측에 Success 가 뜨면은 성공이다. 이후 저장한다.

 

 

2. Springboot 빌드 후 배포

 

먼저 springboot 를 빌드 후 배포서버로 파일을 전송한 후 배포해보겠다. 

구성으로 들어가서 Build Steps를 아래와 같이 작성한다. 

 

빌드가 완료되면 위의 커멘드를 실행한다는 것이다. chmod가 실행할때마다 권한이 없다면서 오류가 났었는데 위에처럼 gradlew를 권한을 변경하니까 빌드가 잘 이뤄졌고, build를 바꾸니까 배포서버로 build 내부의 빌드파일들이 전송이 잘 이루어졌다. 

 

그리고 아래 사진처럼 빌드 후 조치를 추가한다.

 

SSH Server에 Name은 위에서 설정한 Publish over SSH 이름이다. Source files는 전송할 파일을, Remove prefix 는 실행 이 끝난 후 삭제할 폴더를 지정한다. 그리고 배포서버에 Remote directory에 지정된 build-spring/라는 이름의 폴더 아래에 파일들이 이동된다. 마지막으로 backend.sh를 실행한다. backend.sh 세부 내용은 아래와 같다.

echo "remove original build folder"
rm -rf buildSpring/
echo "rename build-spring to build"
mv build-spring/ buildSpring/
nohup java -jar buildSpring/libs/cultruemates-0.0.1-SNAPSHOT.jar &

echo "build success"

 

 

이후 저장을 누른다. 그리고 배포서버에서 스프링부트를 실행하기 위해 아래의 명령어를 입력해주면 다 끝난다.

sudo apt-get install openjdk-11-jdk

 

이후 깃허브에 푸쉬가 이루어지면 자동으로 배포 서버까지 전달이 돼서 자동 빌드 및 자동 배포가 이루어진다. 

 

 

3. React 빌드 후 배포

 

이제 react를 빌드 후 배포서버로 파일을 전송한 후 배포해보겠다.

jenkins pipeline을 사용하면 쉽게 설정이 된다고들 하지만, 이 글에서는 Nodejs plugin을 설치하여 react 프로젝트 실행 전 nodejs 환경을 셋팅해놓고 build를 하는 과정을 보이겠다.

 

우선 nodejs 플러그인을 설치한다.

 

그리고 jenkins 관리 - Global Tool Configuration로 들어간다.

 

사용할 NodeJS의 식별자 설정, NodeJS 버전을 선택한다. 

 

이후  react item 구성으로 넘어가서 빌드환경을 아래와 같이 구성한다.

 

그리고 빌드스탭을 아래와 같이 구성한다. 

 

springboot때 처럼 명령어를 입력한다는 것이다. 일반적인 react 빌드 방식인데 중간데 rm ~ 이란 명령어가 추가되었다. 이는 실행했을때 에러가 나서 조치한 사항이며 이에 대한 자세한 내용은 아래를 참고하길 바란다. 

https://junjunrecord.tistory.com/112

[에러] error: internal/modules/cjs/loader.js와 같은 에러 발생시

 

 

이후 빌드 후 조치는 아래와 같이 구성한다.

 

springboot와 전체적인 흐름은 비슷하고 frontend.sh의 내용은 아래와 같다.

echo "remove original build folder"
rm -rf build/
echo "rename build-jenkins to build"
mv build-jenkins/ build/
sudo systemctl restart nginx
echo "build success"

 

 

4. 배포서버 설정

 

이러면 jenkins에서의 설정은 모두 끝난다. 이제 배포서버에서 추가적인 설정을 해보자.

아래의 내용은 모두 배포서버 내부 내용이다.

먼저 nginx를 설치한다. 

sudo apt-get install nginx -y

 

이후 아래의 명령어로 실행후 브라우저로 인스턴스의 Ip를 접속했을때 nginx관련 내용이 뜨면 성공이다. 

sudo systemctl start nginx

 

그리고 nginx 기본 설정을 변경하기 위해 /etc/nginx/sites-available 로 이동후 default 파일의 내용을 전부 주석처리한다. 그리고 새로운 설정 파일을 해당 위치에 [앱 이름].conf 으로 작성한다. 내용은 아래와 같다.

server {
listen 80;
location / {
  root /home/ubuntu/build;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}
}

 

root는 build까지의 절대경로이다.

그 후 아래으 명령어로 sites-enabled 폴더로 symbolic link 를 설정한다.

sudo ln -s /etc/nginx/sites-available/[앱 이름].conf /etc/nginx/sites-enabled/[앱 이름].conf

 

그리고 nginx를 재실행한다. 

 sudo systemctl restart nginx

 

이러면 모든 과정이 끝난다. 이후 react github에 push하면 자동으로 빌드가 되어 자동으로 배포가 이뤄질 것이다.

 

 

참고로 Jenkins 관리 - 노드 관리로 들어가면 아래와 같이 디스크 용량, 메모리 등 세부 정보들을 확인할 수 있다. 매우 요긴하게 사용하였기에 글에 남겨본다.

 

 

결론

 

이렇게 Jenkins를 통한 CI, CD를 구현해보았다. 생각 보다 많은 시간이 걸렸지만, 이렇게 정리하니 다음에 할때는 크게 어려움 없이 있을거란 생각이 든다.

CI, CD 도구는 JenKins만 있는 것은 아니다. Travis CI, Github Auctions, GitLab CI, Circle CI 등 다양한 툴이 있다.

다음에는 다른 도구들을 사용하여 CI, CD를 진행해봐야 겠다. 

 

 

 

참고

도커, 컨테이너 빌드업 - 이현룡

https://velog.io/@svstar94/Docker-Jenkins-%ED%99%9C%EC%9A%A9-CICD-%EA%B5%AC%EC%B6%95-React-KotlinSpring-1%ED%8E%B8-Jenkins-%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95

Docker, Jenkins 활용 CI/CD 구축 (React, Kotlin+Spring) 1편 - Jenkins 서버 설정

 

https://velog.io/@tunakim/AWS-EC2-Nginx-%EC%9D%B4%EC%9A%A9%ED%95%B4-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC

AWS EC2, Nginx 이용해 React 프로젝트 배포

 

https://dang2dangdang2.tistory.com/187

AWS 서버에서 NGINX 사용해서 REACT 배포하기

 

https://okky.kr/articles/884329

OKKY - AWS EC2 프리티어 쓰시는분들 참고하세요!

 

https://junjunrecord.tistory.com/112

[에러] error: internal/modules/cjs/loader.js와 같은 에러 발생시

 

https://euriion.com/?p=413340 

Ubuntu 22.04에 Jenkins 설치하기 - 토탈 데이터과학 - Total Data Science

 

https://seosh817.tistory.com/104

[CI/CD] CI/CD란? - 지속적 통합(Continuous Integration)/지속적 배포(Continuous Deployment) 기본개념

 

https://skyblue300a.tistory.com/14#recentComments

[Jenkins] Docker를 활용한 Spring boot 프로젝트 CI & CD

 

https://html6.tistory.com/1025

CI/CD 툴 비교 및 추천(Jenkins, GitLab CI/CD, CircleCI 등 )