[Jenkins Build] SpringBoot+React Project Jenkins로 배포하기

기술, 나의 공부를 공유합니다./Jenkins

[Jenkins Build] SpringBoot+React Project Jenkins로 배포하기

욘초 2023. 11. 9. 20:02

0. 설명

1. CentOS 설정

1-1. Jenkins

1-2. Maven

2. Project 설정

2-1. Backend - pom.xml / launch.sh / application.yml
2-2. Frontend - package.json

3. jenkins 환경 설정

3-1. jenkins에 Maven 설정

3-2. jenkins에 Public Over SSH 설정

3-2. jenkins new project [Git 연결, Build Step - Maven 설정, Post Build - Public Over SSH 설정 ( SSH 및 Transfer )]

Flow Diagram.io Link

0. 설명

0-1. 이번 포스트에 대한 설명을 합니다.

이 글은 원격 서버(CentOS) 환경에서 Jenkins로 Git 저장소에 있는 Spring Boot + React 웹 프로젝트를 빌드하고 배포하는 과정을 설명합니다. 그 과정 속에서 필요한 환경 구성 및 명령어, 파일 설정들에 대한 내용을 설명을 합니다.

웹 프로젝트는 Backend(Spring Boot) 와 Frontend(React)로 구성되며 Spring Boot는 maven(mvn) 빌드, React는 node packaged manager(npm) 빌드를 수행합니다.

Jenkins는 maven으로 프로젝트를 빌드하며 따라서 Spring Boot mvn 빌드를 수행할 때 React의 npm 빌드 작업도 이뤄집니다.

위 일련의 과정은 웹 프로젝트 생성, 작업, 빌드, 배포에서
생성과 코드 작업이 끝난 상태로 Git 저장소에 저장된 시점을 기준으로 빌드-배포를 서버에서 Jenkins로 진행합니다.

2. Project 설정

2-1. Backend - pom.xml / launch.sh / application.yml
2-2. Frontend - package.json

파일 구조에서 launch.sh/ application.yml/ pom.xml/ package.json 위치

Project
    |-- Backend [SpringBoot]
    |		|-- /src/main/resources
    |		|	|-- /script
    |		|	|     |-- launch.sh
    |		|	|-- application.yml
    |		|-- pom.xml
    |
    |-- Frontend [Node.js]
    |		|--package.json

2-1. Backend - pom.xml / launch.sh / application.yml

[간단 역할 요약]

pom.xml : pom.xml에서 frontend npm 실행 명령어를 수행하기 위해 exec 를 명시.

application.yml : production/ development 영역을 분리 배포때는 production으로 진행.

launch.sh : jenkins에서 최종 빌드된 project.jar 파일을 실행시키는 script를 명시.

[상세 설명]

[1] pom.xml

pom.xml에는 frontend를 실행하는 npm 명령어를 수행하기 위해 exec를 작성해놓는다.

그걸 왜 backend 의 설정 파일인 pom.xml에서 하느냐?

바로 backend가 maven(이하 mvn) 으로 빌드되며 jenkins가 현재 mvn 으로 빌드되게 설정되어있기 때문이다.

즉, jenkins가 mvn으로 프로젝트를 빌드하기 때문에 backend mvn 명령어 수행하기 전 frontend npm 명령어를 mvn으로 수행하기 위해 pom.xml에 exec( execution option )을 설정한다.

pom.xml 중 exec 설정 부분..

<groupId>org.codehaus.mojo</groupId>

<artifactId>exec-maven-plugin</artifactId>

<goals>

</goals>

</execution>

</executions>

<workingDirectory>../frontend</workingDirectory>

<argument>build:fe</argument>

</arguments>

</environmentVariables>

</configuration>

</plugin>

exec는 execution으로 추후 jenkin에서 통합 빌드를 위해 mvn ~ exec:exec 를 사용하게 된다.

위 pom.xml을 해석해보면

codehaus.mojo에서 만든 exec-maven-plugin을 사용한다. exec-maven-plugin은 mvn 에서 exec 옵션을 사용할 수 있게 해준다.

실행 목표는 어떤 목표(goal)를 실행할 지 지정하는데 여기선 exec를 목표로 실행한다.

실행 가능 파일(executable)을 정의하는데 여기선 npm을 지정했다. *frontend npm 실행을 위함.
작업디렉터리 (workingDirectory)를 '../frontend'로 지정했다.

인수(arguments)로 'run' 과 'build:fe'를 작성했는데. 결국 exec 목표는 "npm run build:fe"를 실행하는 것을 뜻한다.

요약 :

backend build process 중에 'exec-maven-plugin'을 이용해 '../frontend' 디렉터리에서 npm 명령 (npm run build:fe)을 수행한다.

[2] application.yml

application.yml은 SpringBoot와 함께 WebApplication을 구성하는 파일로 spring mvc, web, thymeleaf, mybatis, logging, dataSource(DB Connection) 정보가 명시되어있다.

개발자 환경에서 개발에 도움이 되는 툴을 추가할 수 있는데. 이런 툴들은 배포시 포함되면 안되기 때문에

개발 환경과 배포 환경을 별도로 분리한다.

개발 환경은 development, 배포 환경은 production이라 정의한다.

# spring configuration

spring:

application:

name: emaillist

profiles:

active: development

---

# common spring boot configuration

spring:

mvc:

static-path-pattern: /assets/**

throw-exception-if-no-handler-found: true

web:

resources:

static-locations: classpath:/assets/

thymeleaf:

prefix : classpath:templates/

check-template-location: true

mode: HTML5

suffix : .html

cache : false

mybatis:

config-location: classpath:mybatis/configuration.xml

logging:

pattern:

console: "%d{HH:mm:ss.SSS} [%thread] %-5level %logger{5} - %msg%n"

level:

root: INFO

---

# development profile: spring boot configuration

spring:

config:

activate:

on-profile: development

devtools:

livereload:

enabled: true

datasource:

driver-class-name: org.mariadb.jdbc.Driver

url: jdbc:mariadb://192.168.0.XXX:3307/webdb?charset=utf8

username: mysite

password: mysite

hikari:

minimum-idle: 10

maximum-pool-size: 20

server:

port: 8080

servlet:

context-path: /

encoding:

charset: utf-8

enabled: true

---

# production profile: spring boot configuration

spring:

config:

activate:

on-profile: production

datasource:

driver-class-name: org.mariadb.jdbc.Driver

url: jdbc:mariadb://192.168.0.XXX:3307/webdb?charset=utf8

username: mysite

password: mysite

hikari:

minimum-idle: 10

maximum-pool-size: 20

server:

port: 8088

servlet:

context-path: /

encoding:

charset: UTF-8

enabled: true

jenkins에서 최종 빌드된 jar파일을 launch.sh에서 실행할 때 자세히 보면
spring.profiles.active를 production으로 설정하는 부분이 있다.

해당 부분은 위 application.yml파일에서 최 상단 spring의 profile을 지정하는 것이며
해당 값으로 yml파일에서 배포(production)/ 개발(development) 환경으로 backend를 구성할지 결정된다.

[3] launch.sh

launch.sh은 jenkins가 git으로 부터 가져온 통합 파일을 빌드하고 나온 jar 파일을 실행시켜주는 역할을 수행한다.

script에는 현재 jar 파일이 실행 중인지 확인하고 만약 프로세스가 존재한다면 kill 하는 조건문이 포함되어있다.

#! /bin/bash

APPLICATION_NAME=emaillist

SCRIPT_DIR=$(cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd)

PID=$(ps -ef | grep java | grep $APPLICATION_NAME.jar | awk '{print $2}')

if [ ! -z "$PID" ]

then

echo "stopping [$APPLICATION_NAME]"

kill -9 $PID

sleep 10

echo "starting [$APPLICATION_NAME]"

cd $SCRIPT_DIR

nohup java -Dspring.profiles.active=production -jar $SCRIPT_DIR/$APPLICATION_NAME.jar >> $SCRIPT_DIR/launch.log &

application name은 emaillist이다,
현재 실행된 script의 절대경로를 찾아 SCRIPT_DIR에 저장한다.
현재 실행 중인 JAVA 프로세스 중 실행하려는 파일이 존재할 경우 해당 PID를 가져와 저장한다.

만약 프로세스가 존재한다면 해당 PID를 Kill 한다. 이후 10초를 기다린다.

SCRIPT_DIR에 진입해 실행 파일을 백그라운드로 실행한다.
spring.profile.active를 production으로 지정한다. 이건 application.yml에서 개발/배포 환경으로 분리된 영역 중 배포(production) 영역을 실행하게한다.

2-2. Frontend - package.json

[간단 역할 요약]

package.json : frontend를 한번에 실행 할 수 있게 npm 명령어 script를 명시.

[상세 설명]

[1] package.json

package.json은 react에서 의존성 관리, 스크립트 실행, metadata 및 기타 설정이 명시되어있는 설정 파일이다.

frontend를 빌드하는 npm 명령어들이 scripts에 명시되어있고 package.json 의 scripts 중 build가 붙은 script가 배포를 위한 script이다.

{

"name": "frontend",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"dev":"concurrently \"npm run dev:be\" \"npm run dev:fe\" --kill-others",

"build": "npm run build:fe && npm run build:be",

"build:be": "cd ../backend && mvn clean package",

"dev:be": "cd ../backend && mvn spring-boot:run",

"build:fe": "npm install && npx webpack --config config/webpack.config.js --mode production",

"dev:fe": "npx webpack serve --config config/webpack.config.js --progress --mode production"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"@babel/core": "^7.23.2",

"@babel/plugin-syntax-throw-expressions": "^7.22.5",

"@babel/plugin-transform-runtime": "^7.23.2",

"@babel/preset-env": "^7.23.2",

"@babel/preset-react": "^7.22.15",

"babel-loader": "^9.1.3",

"case-sensitive-paths-webpack-plugin": "^2.4.0",

"concurrently": "^8.2.2",

"css-loader": "^6.8.1",

"json-loader": "^0.5.7",

"node-sass": "^9.0.0",

"sass-loader": "^13.3.2",

"style-loader": "^3.3.3",

"webpack": "^5.89.0",

"webpack-cli": "^5.1.4",

"webpack-dev-server": "^4.15.1"

"dependencies": {

"prop-types": "^15.8.1",

"react": "^18.2.0",

"react-dom": "^18.2.0"

}

여기서 build:fe 명령어 (npm install && npx webpack --config config/webpack.config.js --mode production"이 중요하다.

해당 명령어를 분석하면

npm install = package.json에 명시되어있는 프로젝트의 종속성을 설치한다.

npx webpack --config config/webpack.config.js = webpack을 실행시키기 위한 설정 파일이 config/webpack.config.js에 위치한다.

--mode production = webpack을 production 모드로 빌드한다. 이는 성능을 최적화 하는 것이다.

3. jenkins 환결 설정

3-1. jenkins에 Maven 설정

3-2. jenkins에 Public Over SSH 설정

3-3. jenkins new project [Git 연결, Build Step - Maven 설정, Post Build - Public Over SSH 설정 ( SSH 및 Transfer )]

3-1. jenkins에 Maven 설정

[간단 역할 요약]

CentOS (VPC)에 jenkins가 설치된 환경을 기본 구성으로 진행한다.
jenkins에서 java web application 배포 파일로 빌드하기 위해 maven을 사용하는 환경을 구성한다.

jenkins에서는 간단히 설정값 추가함으로써 maven로 빌드를 할 수 있다.

[1] jenkins에서 maven 설정하는 방법

1. jenkins에 접속한다. ( http://192.168.0.xxx:8080/jenkins/ )

2. 우측 메뉴에서 jenkins 관리 (⚙) 선택

3. 설정 메뉴 중 Tools 선택

4. Tools 설정 중 하단 Maven installations에서 'Add Maven' 선택
*maven name 지정, centos에서 maven이 설치된 대표 경로 지정
*install automatically를 선택할 경우 선택한 maven 버전에 맞게 설치해줌.