[React] Vite 프로젝트 jar로 배포하기
어플리케이션을 배포하는 간단한 방법은 웹서버를 이용하는 것일 겁니다.
(Nginx, Apache 등)
하지만 다른 방법도 있습니다.
이번 글은 클라이언트를 jar 로 배포하는 것을 해보겠습니다.
(윈도우os) 로컬 환경에서 테스트 해보려면 wsl 이 필요합니다.
1. wsl 설치
cmd 를 관리자 권한으로 실행합니다.
wsl --install
// ubuntu 말고 다른 것을 쓰려면 wsl --install -d <Distribution Name>
wsl을 설치하고 재부팅합니다.
설치가 제대로 됐으면 ubuntu를 실행할 수 있을 겁니다.
계정 비밀번호는 까먹기 쉬우니 따로 적어 두시는 걸 추천합니다.
1-1. wsl 주소 확인
hostname -I
// 대문자 I 입니다
172 로 시작하는 로컬 주소를 알 수 있습니다.
2. Vite
vite 프로젝트는 전에 만든 것을 이용합니다.
https://gingmin.tistory.com/96
[React] Vite로 React 앱 시작하기
1. 프로젝트 만들기create-react-app 은 Webpack을 사용합니다. 1-1. CRA 와 Vite CRA(create-react-app)Vite번들러WebpackESBuild (dev), Rollup (build)실행 속도상대적으로 느림매우 빠름설정 파일숨겨짐바로 수정 가능 (vi
gingmin.tistory.com
3. gradle
gradle은 아래 사이트에서 다운 받을 수 있습니다.
Gradle | Installation
Install the Gradle build tool on Linux, macOS or Windows, either manually or using a package manager like SDKMAN! or Homebrew.
gradle.org
압축 풀고 해당 위치를 환경변수 설정해줍니다.
저는 C드라이브에 옮기고 환경변수 설정했습니다.
프로젝트로 돌아와서 다음 명령을 실행합니다.
gradle init
- yes
- Basic 선택
- Project name 선택안함 (그냥 엔터)
- Groovy 선택
- yes
그럼 프로젝트에
gradle 폴더
build.gradle
gradle.properties
gradlew
gradle.bat
settings.gradle가 생겼을 겁니다.
4. 배포 설정
어플리케이션을 빌드하기 위해 설정들을 해줍니다.
4-1. 폴더구조
먼저 구조를 살펴보겠습니다.
src를 수정해야 합니다.
main
- java
- resoureces
- vt (이 이름이 아니어도 됩니다)
구조로 만듭니다.
4-2. java
Vitereact.java 파일은 이렇게 작성해줍니다.
package com.vitereact;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
@Controller
@SpringBootApplication
public class Vitereact {
public static void main(String[] args) {
SpringApplication.run(Vitereact.class, args);
}
}
static은 폴더만 만들면 됩니다.
react로 빌드된 파일들을 여기로 넣어줄 겁니다.
4-3. application.yml
배포 됐을 때의 포트 등의 자바 설정을 합니다.
server:
port: 8090
compression:
enabled: true
mime-types: text/html, text/plain, text/css, text/javascript, application/javascript
logging:
level:
root: INFO
spring:
application:
name: vitereact
4-4. react
react 관련 파일은 vt 폴더로 옮깁니다.
4-4-1. index.html
src, href 등 주소를 수정합니다.
일단은 상대경로로 수정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./public/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.jsx"></script>
</body>
</html>
4-4-2. vite.config.js
이렇게 폴더 구조를 변경하면
root 폴더를 변경해야 합니다.
root를 vt 폴더로 합니다.
포트는 8089인데 npm run dev 로 로컬에서 실행했을 때 이제
이 포트로 들어가면 됩니다.
outDir은 build된 파일이 생길 위치입니다.
base는 상대 경로 기반으로 설정했습니다.
jar 파일로 패키징할 때 내부 경로가 깨지지 않도록 합니다.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
root: "src/main/vt",
server: {
port: 8089,
},
build: {
outDir: "../../../dist",
},
base: "./",
});
4-5. build.gradle
제일 중요한 build.gradle입니다.
하나하나씩 살펴보겠습니다.
plugins {
id 'org.springframework.boot' version '2.6.7' // Spring Boot 플러그인: bootJar 생성 등 지원
id 'io.spring.dependency-management' version '1.0.11.RELEASE' // 의존성 관리 플러그인
id 'maven-publish' // JAR 등을 Maven repository에 배포할 수 있게 해주는 플러그인
id 'java-library' // Java 라이브러리 구성 플러그인
id "com.github.node-gradle.node" version "3.2.1" // Node.js + npm 연동 플러그인
}
version='3.3.13' // 전체 프로젝트 버전
sourceCompatibility='11' // Java 버전 설정 (JDK 11)
repositories {
mavenCentral() // Maven 중앙 저장소 사용
}
sourceSets {
main {
java {
srcDirs = ['src/main/java'] // Java 소스 디렉터리
}
resources {
srcDirs = ['src/main/resources'] // 리소스 디렉터리 (application.yml, 정적 파일 등)
}
}
}
ext {
set('springBootVersion', '2.6.7') // 버전 관리를 위해 별도 변수로 Spring Boot 버전 지정
}
node {
nodeProjectDir = file("${projectDir}/src/main/vt") // Vite 프로젝트 루트를 지정
}
dependencies {
implementation("org.springframework.boot:spring-boot-starter-web:${springBootVersion}") {
exclude group:"org.hibernate.validator", module: "hibernate-validator" // Bean validation 제외
exclude group: 'org.springframework.boot', module: 'spring-boot-starter-tomcat' // Tomcat 제거
}
implementation("org.springframework.boot:spring-boot-starter-undertow:${springBootVersion}") // Undertow 사용
}
// Tomcat 대신 Undertow를 웹서버로 사용
// Hibernate Validator 제거 시 유효성 검사를 수동 처리하거나 다른 Validator 사용 예정인듯
jar {
archiveBaseName.set('vitereact') // 기본 JAR 파일명
}
tasks.named('processResources') {
mustRunAfter 'copyDist' // 복사 Task 이후에만 실행되도록 보장
}
tasks.register('copyDist', Copy) {
doFirst {
delete 'src/main/resources/static' // 기존 정적 파일 삭제
}
from 'dist' // vite 빌드 결과물 위치 (vite.config.js에서 outDir 위치)
into 'src/main/resources/static' // SpringBoot 가 서비스할 정적 리소스 위치
}
tasks.bootJar {
dependsOn 'copyDist' // bootJar 실행 전에 반드시 vite 결과 복사
archiveFileName.set("vitereact.jar") // 생성될 jar 파일 이름
mainClass.set("com.vitereact.Vitereact") // 실행 메인 클래스 지정
}
5. wsl jdk 설치
wsl에 jdk를 설치합니다.
저는 jdk 11을 설치했습니다.
sudo apt update
sudo apt install openjdk-11-jdk
// java 버전 확인
java --version
javac --version
6. jar 실행
6-1. build
이제 jar 파일을 만들어 보겠습니다.
프로젝트에서 리액트를 먼저 빌드합니다.
npm run build
빌드가 됐으면 dist 폴더(아까 outDir로 설정한) 에 파일들이 잘 만들어졌을 겁니다.
6-2. jar
이어서 jar 파일을 생성합니다.
./gradlew bootJar
성공했다면 build 폴더에서
jar 파일을 찾을 수 있습니다.
6-3. 쉘 작성
탐색기에서 ubuntu 폴더로 들어갈 수 있습니다.
/home/[id] (본인의 아이디)
경로로 들어와서 만들어진 jar 파일을 옮깁니다.
java 파일은 java -jar 명령어로 실행할 수 있습니다.
ex) java -jar vitereact.jar
하지만 이렇게 실행하면 프로세스를 종료하기도 복잡하죠.
총 3개의 파일을 만들겁니다.
6-3-1. 프로세스 저장
vi vitereact.pid
아무것도 작성하지 않고 저장합니다.
- esc
- :wq
실행했을 때 프로세스 id를 저장합니다.
6-3-2. 실행 스크립트
우선 log 폴더를 만듭니다.
mkdir log
vi vitereact_run.sh하고 아래 내용을 작성합니다.
(i 를 누르면 작성할 수 있습니다.)
export HOME=/home/[id]
nohup java -jar $HOME/vitereact.jar > $HOME/log/vitereact_log.out 2>&1 &
echo $! > $HOME/vitereact.pid
작성 후: esc :wq (저장하지 않으면 :q)
- 환경 변수 HOME에 /home/[id]를 설정합니다. (id는 본인id)
- 이 스크립트에서는 $HOME 변수로 사용합니다
- nohup: 터미널이 끊겨도 프로세스가 종료되지 않도록 합니다.
- java -jar: jar 파일 실행
- > $HOME/log/vitereact_log.out: 표준 출력을 로그 파일로 리디렉션
- 2>&1: 표준 오류도 표준 출력으로 같은 파일에 기록
- &: 이 명령을 백그라운드에서 실행
- $!: 방금 백그라운드로 실행된 마지막 명령의 PID (프로세스 id) 저장
6-3-3. 종료 스크립트
vi vitereact_stop.sh
HOME=/home/[id]
kill `cat $HOME/vitereact.pid`
저장되어있는 PID를 kill 함으로써
프로세스를 종료시킬 수 있습니다.
6-4. 실행
이제 다 왔습니다.
ls
ls 명령어로 확인하면 다음과 같은 파일들을 확인할 수 있습니다.
실행하려면 권한이 필요합니다.
chomod u+x [파일]명령어로 파일들에 권한을 줍니다.
./vitereact_run.sh
정상적으로 실행됐다면 jps 명령어로 확인할 수 있습니다.
jps
// 6852 Jps
// 6388 vitereact.jar
제대로 되지 않았다면 log 폴더로가서 확인하면 됩니다.
맨 처음에 wsl의 주소를 확인했었습니다.
hostname -I
http://172.27.167.74:8090 으로 접속하면 다음과 같은 화면을 확인할 수 있습니다.
(8090 application.yml 설정 포트)
./vitereact_stop.sh로 종료합니다.