React로 개발을 하다보면 웹팩과 바벨에 대해 많이 듣는다.
웹팩과 바벨에 대한 프로젝트는 다음 링크를 참조
1.https://www.skyer9.pe.kr/wordpress/?p=1498
2.https://berkbach.com/웹팩-webpack-과-바벨-babel-을-이용한-react-개발-환경-구성하기-fb87d0027766
이 게시글은 create-react-app 으로 프로젝트를 진행 하였다.
참조 :create-react-app으로 쉽게 리액트 프로젝트 개발환경 구축하기
https://velog.io/@wlsgh46/create-react-app으로-리액트-프로젝트-개발환경-구축하기
참조 :리액트-스프링부트-연동하여-CRUD-구현
소스 다운로드: https://github.com/braverokmc79/Spring-Boot-And-React/tree/main/Fusion-SpringBoot-React
1.스프링 툴은 다음을 사용
Version: 3.9.6.RELEASE Build Id: 201809180749 Platform: Eclipse 2018-09 (4.9.0)
Copyright (c) 2007 - 2018 Pivotal Software, Inc. All rights reserved. Visit http://spring.io/tools/sts
This product includes software developed by the Apache Software Foundation http://www.apache.org
Lombok v1.18.10 "Envious Ferret" is installed. https://projectlom
2.깃 업로드시
줄바꿈 오류
git config --global core.autocrlf true
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/braverokmc79/Spring-Boot-And-React.git
git push -u origin main
3. 명령어
서버 죽이기
npx kill-port 3000
시작
npm run start
또는 yarn 설치후
yarn start
npm run build
** 빌드시 참조
다음 아래 내용은 그래들 기반 빌드 내용이다
https://velog.io/@essri/스프링부트-리액트-프로젝트-함께-빌드하기-a1k2l5olr2
https://www.hypertextcandy.com/create-react-app-on-spring-boot
React 앱 가져 오기 만들기
우선 일반적으로 Spring Initializr에서 Spring Boot 앱이 생성되는 것을 전제로합니다.
spring-react ├─ src │ ├─ main │ └─ test ├─ build.gradle └─ etc...
프런트 엔드를 추가
여기에 다음과 같은 구성이되도록 프런트 엔드 코드를 추가합니다.
spring-react ├─ frontend │ ├─ src │ ├─ node_modules │ ├─ package.json │ └─ etc... ├─ src │ ├─ main │ └─ test ├─ build.gradle └─ etc...
프로젝트 루트에서 다음 명령을 실행 React 응용 프로그램을 만듭니다.
$ npx create-react-app frontend
frontend디렉토리로 이동하여 yarn start명령을 실행하면 localhost:3000에서 React 응용 프로그램이 시작됩니다.
$ cd frontend $ yarn start
개발시 설정
프록시
설명서 에 따라 프런트 엔드에서 서버 사이드에 액세스하기위한 설정을 package.json추가합니다.
package.json
"proxy": "http://localhost:8080"
개발시 전면 localhost의 3000 번 포트 서버 사이드 8080 번 포트를 사용하고 있기 때문에 프런트 엔드에서 HTTP 요청을 8080을위한주기 위해 설정입니다.
실전 빌드
개발 환경이 갖추어졌습니다 때문에 프로덕션 환경에 배포하기위한 빌드 준비도합시다.
프런트 엔드
지금 설정 yarn build을 실행하면 다음과 같이 frontend디렉토리에 빌드 결과가 출력됩니다. 그러나이 위치에 출력 되어도 Spring Boot 응용 프로그램에서 배달 할 수 없습니다.
spring-react ├─ frontend │ ├─ build ★ │ ├─ src │ ├─ node_modules │ ├─ package.json │ └─ etc... ├─ src ├─ build.gradle └─ etc...
불행히도, Create React App은 대상을 정의하는 옵션은 없습니다. 그래서 build명령 실행 후 빌드 결과를 Spring Boot에서 제공 할 수있는 위치로 이동시키는 스크립트를 작성하게됩니다.
package.json의 scripts에 postbuild작업을 추가합니다. npm 기능으로 postxxx는 작업을 정의하면 xxx작업 완료 후 자동으로 실행됩니다.
frontend / package.json
"postbuild": "node ./postbuild.js"
frontend/build내 파일을 src/main/resources/public이동시키는 스크립트입니다.
frontend / postbuild.js
const path = require('path');
const fs = require('fs-extra');
const BUILD_DIR = path.join(__dirname, './build');
const PUBLIC_DIR = path.join(__dirname, '../src/main/resources/public');
fs.emptyDirSync(PUBLIC_DIR);
fs.copySync(BUILD_DIR, PUBLIC_DIR);src/main/resources/public빌드 결과이므로 .gitignore이 포함 좋을 것입니다.
라우팅
다음은 public디렉토리의 내용을 전달하기위한 컨트롤러를 만듭니다.
SinglePageController.java
package com.hypertextcandy.react;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SinglePageController {
@GetMapping("/**/{path:[^.]*}")
public String any() {
return "forward:/index.html";
}
}어떤 URL로 요청이 와도 index.html을 반환하는 컨트롤러입니다. SPA에서는 화면 측의 라우팅 (URL과 표시 내용의 끈 절임)는 프론트 엔드에서 실시하므로, 서버 사이드 index.html를 응답하면 OK라는 것입니다.
Gradle
이대로 가다가는 결국 응용 프로그램을 빌드 할 때 프런트 엔드에 yarn 빌드 명령 및 서버 측에 Gradle 빌드 명령을 두 실행해야 안됩니다.
그것으로 문제는 없지만, Gradle에서 프런트 엔드 빌드도 함께 할 수있는 설정을 소개합니다.
Gradle에서 yarn 명령을 호출하기 때문에 gradle-node-plugin 을 사용합니다. plugins한줄 (★) 추가 플러그인을 설치합니다.
build.gradle
plugins {
id 'org.springframework.boot' version '2.2.2.RELEASE'
id 'io.spring.dependency-management' version '1.0.8.RELEASE'
id 'java'
id "com.moowork.node" version "1.3.1" // ★ 追加
}gradle-node-plugin의 문서 를 참조하여 다음 작업을 추기합니다. 작업 디렉토리를 ./frontend로 옮겨 yarn build을 수행한다는 내용입니다.
build.gradle
task buildReact(type: YarnTask) {
execOverrides {
it.workingDir = './frontend'
}
args = ['build']
}yarn 대신 npm을 사용하는 경우에 게시판 문서를 참고로 바꿔줍니다.
또한 특정 Gradle 작업 전에 위의 buildReact작업을 수행하려면 다음 계정을 추가합니다.
build.gradle
build.dependsOn buildReact
이 build작업을 실행하기 전에 buildReact실행한다는 지정합니다.
이상, Spring Boot 응용 프로그램에 Create React App을 결합하여 단일 페이지 응용 프로그램 환경을 구축하는 방법을 소개했습니다.
* 요약
아래 이미지 처럼 프론트 디렉토리에서 개발을 진행
3000 포트 번호로 결과물 확인
다음 코드로 인하여 백엔드는 8080 포트로 확인 가능하다
/**
*
*
* 다음은 public디렉토리의 내용을 전달하기위한 컨트롤러를 만듭니다.
* 어떤 URL로 요청이 와도 index.html을 반환하는 컨트롤러입니다.
* SPA에서는 화면 측의 라우팅 (URL과 표시 내용의 끈 절임)는 프론트 엔드에서 실시하므로,
* 서버 사이드 index.html를 응답하면 OK라는 것입니다.
*
*
*/
@Controller
public class SinglePageController {
//@GetMapping("/**/{path:[^.]*}")
public String any() {
return "forward:/index.html";
}
@GetMapping("/api/{path:[^.]*}")
public String anyApi() {
return "forward:/index.html";
}
}
댓글 ( 5)
댓글 남기기