자바 스프링 리액트 배포하는 방법 how to depoly React at JavaSpring

자바 스프링 프레임워크에 리액트를 배포할 때는 조금 까다롭다. 웹파일과 리소스파일을 분리할 필요가 있고 컨트롤러 또한 새로 만들어 주어야 한다. 테스트만 완료되고 기본적인 배포파일이 실행만 되면 리액트 프로젝트를 수정 후 웹파일만 배포하면 그만이다.

자바 스프링 리액트 배포하는 방법
how to depoly React at JavaSpring

뜻하지 않게 리액트를 빠르게 익혀보았다.

유튜브는 역시 많은 튜토리얼이 있으니 감동이다.

빠르게 익혀야 하기 때문에 생활코딩이란 유튜브를 참고했다.

하지만, 문제는 배포했을 때 어디에 하는가 이다.

리액트를 잘 모르기 때문에 이곳저곳을 찾아보았다.

자동화도 많지만 본인은 그냥 아는 범위내에서 에러를 하나씩 해결하면서 진행했다.

리액트 싱글페이지 웹

리액트의 장점은 페이지의 이동없이 하나의 페이지에서 동작이 이루어진다.

소스보기해도 코드 난독화가 되어 있기 떄문에 약간의 보안이 될 수 있을지도 모른다.

하지만, 익히는 것은 어려웠고, 여전히 난해할 뿐이다.

리액트를 개발한 곳은 페이스북

어쨌든 원페이지 웹이란 것의 장점이 있기에 생활코딩에서 배운 간단한 웹을 어딘가에 올려놓고 테스트하고 싶어졌는데 이게 자바스프링에도 되는지 궁금했다.

로컬컴퓨터에서는 당연히 되지만 못해도 웹호스팅에서도 된다면 이건 이것대로 신박한 경험이 될 것 같다.

리액트 배포만들기

일단 리액트로 프로젝트를 만들었다면 배포파일을 만들어야 한다.

배포파일을 만드는 명령어는 아래와 같다.

리액트를 만든 프로젝트 폴더에서 아래와 같이 명령어를 작성한다.

npm run build

참고로 위의 명령어는 vscode ( Visual Studio Code ) 의 터미널에서 작성했다.

빌드가 성공하면 리액트 프로젝트 폴더 밑에 build 폴더가 생성될 것이다.

빌드 파일 붙여넣기

위의 빌드명령어가 정상적으로 수행됐다면 프로젝트 폴더 밑에 빌드파일들이 나타난다.

이것을 자바 스프링의 html ( jsp ) 파일들이 들어가는 곳의 폴더에 붙여넣도록 하자.

자바스프링의 웹 파일들이 들어가는 위치는 다음과 같다.

자바스프링FW/src/main/webapp/WEB-INF/views

자바스프링의 기본설정을 변경하지 않았다면 기본폴더는 위의 위치와 같을 것이다.

본인은 react 란 폴더를 따로 만들었다.

자바스프링FW/src/main/webapp/WEB-INF/views/react

위의 폴더위치에 리액트 배포파일 중 static 을 제외한 모든 파일을 넣어두었다.

static 폴더 붙여넣기

리액트를 빌드하면 build 폴더 밑의 static 폴더가 생긴다.

static 폴더 밑에는 css 나 javascript 같은 파일들이 생긴다.

이것들은 자바스프링의 resources 폴더에 붙여넣었다.

본인은 static 이란 react 폴더를 새로 만들었다.

자바스프링FW/src/main/webapp/resources/react/static

위의 폴더 밑에는 css 나 javascirpt 같은 파일들이 생겼을 것이다.

서블릿 설정하기

자바 스프링은 특이하게 css 나 javascript 파일을 따로 설정하게 되어 있다.

이 리소스 폴더를 접근하려면 서블릿 파일에 경로를 설정해 주어야 한다.

<resources mapping="/static/**" location="/resources/react/static/" />

리액트의 경우 css 나 javascript 파일들이 static 으로 시작하기 때문에 추가적으로 매핑을 할 필요가 있다.

컨트롤러 만들기

자바 스프링의 웹파일에 접근하기 위해선 컨트롤러를 만들어 주어야 한다.

간단하게 만들어 둔다.

접근되어 리액트로 만든 화면이 나오면 되니깐 말이다.

@RequestMapping(value = "/react", method = {RequestMethod.POST, RequestMethod.GET} )
public String HomeReact(Locale locale, Model model, HttpServletRequest request) {
	return "ztest/react/home";
}

이렇게 바꾸어주면 리액트의 웹파일에 접근할 수 있다.

참고로 리액트로 배포된 파일 중 index.html 을 자바 스프링으로 사용할 수 있도록 index.jsp 로 수정까지 해 주도록 한다.

만약 별도의 설정을 했다면 하지 않아도 된다.

자바 스프링의 한글 깨짐을 방지하기 위해 jstl 구문 또한 넣어두자.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

자바 스프링 톰캣 실행

정상적으로 바로 실행되면 좋으나 에러가 발생할 것이다.

정확한 에러를 확인하기 위해 F12 개발자모드의 콘솔부분을 지켜보자.

js 파일의 위치나 css 파일의 위치가 잘못되어 발생할 확률이 높다.

배포한 리액트의 파일이 정상적으로 실행되는지 확인해 본다.

신기방기 잘 돌아간다.

이제는 유튜브를 보고 따라한 코드를 배포하면 된다.

다음편에 계속

( 리액트 정말 개념정리가 어렵군요. )