React 애플리케이션을 빌드한 후 생성된 정적 파일들을 Spring 프로젝트의 리소스 디렉토리에 추가하고, Spring 컨트롤러를 통해 React를 Spring 프로젝트에 통합
📌 Spring
1. Controller 추가
- Controller폴더 안에 DashboardController.java 추가
@Controller
public class DashboardController {
@GetMapping("/dashboard")
public String Dashboard() {
return "dashboard";
}
}📌 React
1. package.json
- 삭제 :
"proxy" : ~, - 추가 :
"homepage": "/dashboard",
2. yarn start
- yarn start해서 페이지 열리는 지 확인!
지금은 proxy가 바뀌었기 때문에 백엔드 데이터 받지 못해서 그래프가 안나오는게 정상이다.
3. yarn build
- yarn build하기
📌 React - build Folder
- yarn build 후 생성 된 build 폴더
1. index.html 파일명 변경
- 변경 :
index.html->dashboard.html - 이유 : Controller에서
return "dashboard";이기 때문에 html 이름 맞춤
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta translate="no"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Linme Dashboard</title>
<script defer="defer" src="/dashboard/static/js/main.5edadf5e.js">
</script>
</head>
<body>
<div id="root">
</div>
</body>
</html>dashboard.html 파일
2. dashboard.html 파일 이동
- 경로 :
templates/dashboard.html - 이유 :
return "dashboard";
3. html파일 이외의 모든 파일 이동
- 경로 :
static/dashboard(dashboard폴더 생성) - 이유 : html에서
src="/dashboard/static/js/main.5edadf5e.js"로 되어있는데 경로를 맞춘다.
즉, HTML 파일에서 참조하는 경로와 일치시키기 위해서다.
📌 Spring 가동 후 페이지 확인
잘 나오는 것을 볼 수 있다!
