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

리액트로 웹을 만드는 것은 꽤나 흥미롭다. 그 흥미로움으로 앱을 만들었지만 스프링 프레임워크에 여러 프로젝트를 배포하려면 배포파일의 정보를 수정할 필요가 있다. 이것은 스프링 프레임워크의 기본구조와 관련이 있다. 일반적인 웹은 같은 폴더에 웹과 리소스 파일을 배치할 수 있지만 스프링은 리소스 파일을 따로 관리하고 있기 때문이기도 하다.

뭐, 설정을 변경해주면 되는데 본인은 아직 익숙하지 않아 기본적인 방법대로 진행했을 뿐이다.

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

리액트로 자바 스프링 프레임워크에 배포하고 웹호스팅 서비스에서 동작하는 것을 확인하였다.

CORS 에러도 발생했었고 e.map 오류도 발생했었지만 관련포스팅은 나중으로 미뤄본다.

어쨌든 리액트를 이용해 자바 스프링에 배포를 해보니 이건 이것대로 좀 불편한 점이 있었다.

자바 스프링의 구조적인 관계도 있겠지만 웹 구조상 파일 위치만 맞으면 된다.

이전엔 리액트 기본 프로젝트를 배포했다.

이번엔 리액트를 익히면서 참고한 생활코딩의 것을 배포해 보려고 한다.

( 따라하기 힘들었다. 정말 )

자바 스프링에 리액트를 배포하는 기본적인 방법은 이전 포스팅을 참고 한다.

• 자바 스프링 리액트 배포하는 방법

리액트 배포파일 만들기

리액트로 만들어진 프로젝트는 배포 명령어를 통해 배포파일을 만들 수 있다.

아래의 명령어는 배포명령어이다.

배포 명령어가 정상적으로 동작했다면 프로젝트 아래에 build 폴더가 생긴다.

npm run build

빌드파일 붙여넣기

리액트 프로젝트를 빌드하면 build 폴더가 생긴다.

build 폴더에는 웹파일과 리소스파일은 css javascript 파일들이 존재한다.

스프링 프레임워크에 파일의 경로를 따로 설정하지 않았다면 기본값은 아래와 같다.

웹파일은 webapp/WEB-INF/view 폴더 아래에 위치한다.

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

리소스파일은 webapp/resources 폴더 아래에 위치한다.

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

생활코딩 유튜브를 따라해 본 코드를 스프링 프레임워크에 붙여넣었다.

폴더는 별도로 구분을 지었다.

섞여 있어도 상관없지만 보기 불편하고 어떤 파일이 어떤 것인지 알 수가 없기에 따로 분류를 해 놓다.

분류만 하고 경로만 잘 맞춰주면 된다.

서블릿 설정하기

리액트 배포파일이 만들어 졌을 때 웹의 리소스 폴더에 붙여넣었다.

이 경우 경로가 리액트에서 배포한 경로와 달라질 수 있다.

서블릿에 리소스 파일을 추가하여 경로를 설정할 필요가 있다.

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

첫번째 것은 리액트 프로젝트를 배포했을 때 설정한 것이다.

두번째 것은 생활코딩을 보고 따라해본 예제를 배포한 css javascript와 같은 리소스 파일 위치이다.

컨트롤러 만들기

컨트롤러를 만들어 스프링 프레임워크가 웹파일에 접근할 수 있도록 해야 한다.

컨트롤러를 만들고 파일명을 변경해 준다.

별도의 설정을 하지 않았다면 스프링이 읽는 웹파일의 확장자는 jsp 가 될 것이다.

/**
* ----------------------------------------
* template url
* - http://127.0.0.1:8080/reactlifecoding
* ----------------------------------------
*/
@RequestMapping(value = "/reactlifecoding", method = {RequestMethod.POST, RequestMethod.GET} )
public String HomeReactLifeCoding(Locale locale, Model model, HttpServletRequest request) {
	return "ztest/lifecoding/index";
}

웹파일 변경하기

이제 웹파일의 내용을 변경해야 한다.

한글 깨짐을 방지하도록 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"%>

리액트에서 배포된 파일의 내용을 보면 들여쓰기도 없고 한줄로 그냥 늘어져 있다.

이 웹파일에 링크된 모든 이미지나 css javascript 파일은 static 으로 지정되어 있다.

이것을 서블릿에서 설정한 것으로 변경해 준다.

src="/static_lifecoding/js/main.78118024.js"

static 단어로 되어있는 외부파일이 많기 때문에 서블릿에서 지정한 경로로 변경해 주어야 한다.

이래저래 불편한 점이 이것이기도 하다.

리액트 배포 확인

이제 스프링 프레임워크를 톰캣으로 구동하여 리액트로 배포된 파일이 잘 나오는지 확인할 차례이다.

다행히 따라한 대로 잘 된다.

배포된 파일도 잘 동작하는 것을 확인했다.

자바 스프링 프레임워크에 리액트 배포 파일을 배포하는 것은 번거롭다.

배포하는 방법에 대해 편한 것들이 있지만 툴들을 새로 익히는 것 또한 번거롭긴 하다.

하지만, 꼭 필요한 것이기도 하다.

앞으로 남은 숙제는 배포시 조금 더 편하게 하는 방법을 찾아 적용시킬 필요가 있다.

리액트의 기본 개념이 어려운 것은 어쩔 수 없지만 좀 더 공부가 필요한 부분이기도 하다.

배포는 편해야 하는데 아아아

PS

생활코딩에 감사함을 표합니다.

덕분에 빠르게 익히고 빠르게 앱을 하나 만들기도 했습니다.