SpringBoot + React 통합 환경 구성하기 (버전확인필수)

통합 환경 구성하기에 앞서 버전 확인을 먼저 한다

 

수업중 통합 개발 환경은

노드 버전 : 20.8.1

스프링부트 버전 : 2.7.17

이다 비교를 꼭 해본다 버전마다 설정이 다르기때문이다.

 

 

---

 

 

인텔리제이에서

빌드.그래들 파일을 연다

 

밑에 코드를 복붙해준다.

 

// ---------------------------------------- 리액트(빌드) 통합 ---------------------------------------- //
// * 터미널에서 리액트 실행하지 않고 gradle이 리액트를 빌드해서 빌드된 파일을 스프링쪽으로 이동
// 1. 리액트 코드 파일이 있는 리액트 프로젝트 폴더 경로 정의
def frontendDir = "$projectDir/src/main/reactapp"	// $projectDir/src/main/{리액트프로젝트명}
    // $projectDir : 현재 build.gradle 프로젝트의 위치
// 2. 리액트 코드파일을 빌드해서 빌드된 파일을 어디로 이동할지 .. 정의
sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}
// 3. 이동[ 원본이동X , 복사이동O ]
processResources { dependsOn "copyReactBuildFiles" }
// 4. [1]리액트 설치 [ 리액트 라이브러리 없으면 npm update 자동으로 해주고 있으면 npm update X ]
task installReact(type: Exec) {
    workingDir "$frontendDir"	 // 리액트코드가 있는 폴더경로
    inputs.dir "$frontendDir"	// 빌드 했을때 저장할 폴더경로
    group = BasePlugin.BUILD_GROUP
        // npm 호출   [ 운영체제 별로 명령어 다름 ] = 강의 기준 : 개발(윈도우) / 배포(리눅스)
        // 1. 운영체제가 window 환경이면
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {	// 운영체제가 window가 아니면
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

// 5. [2]리액트 빌드
task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"	// 리액트코드가 있는 폴더경로
    inputs.dir "$frontendDir"	// 빌드 했을때 저장할 폴더경로
    group = BasePlugin.BUILD_GROUP
    // npm 호출   [ 운영체제 별로 명령어 다름 ] = 강의 기준 : 개발(윈도우) / 배포(리눅스)
   		 // 1. 운영체제가 window 환경이면
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {		// 운영체제가 window가 아니면
        commandLine "npm", "run-script", "build"
    }
}

// 6. [3]리액트 빌드파일 복사    [ 빌드된 파일은 git에 커밋X ]
task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"	// 복사할 파일이 어디에서
    into "$projectDir/src/main/resources/static"	// 복사할 파일을 어디로
}

 

---

 

 

 

적용이 아직 안되는데 그럼 어플리케이션.프로퍼티스 파일을 연다

 

경로로 와서 코드를 추가해준다

# spring view controller ----> react build file[js]
spring.mvc.pathmatch.matching-strategy = ant_path_matcher

 

---

 

리액트 환경설정

 

1. Node 설치 

- npm , mpx : 라이브러리 설치/빌드/관리 package.json

 

2. 리액트 설치

- 터미널에서 npx creat-react-app 폴더명

 

3. 리액트 실행

- 터미널에서 npm start

 

 

하지만 서버를 통합하게 되면 2.리액트 설치, 3.리액트 실행 작업을 그레이들이 해준다.

전제조건 : 둘다 노드 설치되어있어야함

 

환경설정은 회사마다 다르고 위 코드는 수업을 기반으로한 코드이다.

---

그레이들에서 파일을 복사하는 이유는?

 

서버가 통합 되었기 때문에 스프링에서 실행한다.

즉 , spring MVC 아키텍처로 옮기기 위해서

 

---

하지만 위 방법대로 해도 

Link를 통한 페이지 이동만 될뿐 주소에 직접 입력하면 404 에러가 뜬다

 

 

 

리액트 라우터는 Link , get을 통해서 처리하고

스프링은 get을 통해서 처리하는데

스프링부트와 리액트 통합과정에서 스프링이 매핑우선 되어 요청을 처리하려고 하기 때문이다.

즉, get으로 요청이 들어오고 스프링에서 처리하려고 하기 때문에 에러가 뜬다.

 

 

이를 수정하기 위해서 코드를 고쳐야한다.

 

새로 java 클래스를 만들어준다

아래코드를 추가해준다

 

@Configuration // 스프링 컨테이너에 빈 등록
public class SpringMvcViewConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //super.addViewControllers(registry);   // 기존의 view 아키텍처 사용 안함
        registry.addViewController( "/{spring:\\w+}").setViewName("forward:/");
        registry.addViewController( "/**/{spring:\\w+}").setViewName("forward:/");
        // spring 2.6 이상 [ 해당 패턴 경로 못찾음.. ]
        // 해결 방안 : 어플리케이션.프로퍼티스 파일에
        //spring.mvc.pathmatch.matching-strategy = ant_path_matcher 추가한다
        registry.addViewController( "/{spring:\\w+}/**{spring:?!(\\.js|\\.css)$}").setViewName("forward:/");
    }
}

---

 

 

패턴 잡는 코드는 스프링 공문을 참고하여 작성해야한다....

 

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/util/AntPathMatcher.html

AntPathMatcher (Spring Framework 6.0.13 API)

---

깃 이그노어에 커밋안해도될 파일을 설정해줘야한다.

 

깃 이그노어에 추가해야할 파일들

: 실행된 빌드(실행) 파일

<자동>

1. .gradle
2. build/
3. .idea

리액트폴더에서
1. /build
2. /node_moduls

<수동>
통합했을때 - 통합 빌드 파일
1. resources -> static