react 공부를 하려고 관련 글을 여기 저기 기웃 기웃.
backend를 spring boot으로 개발환경설정 할 때 그럼 어떻게 연동을 해야 할까?
각각 별도로 server를 관리하는 방법도 있겠지만 내가 원하는 방향은 아니었다.
frontend를 별도로 개발하는거야 자유지만, spring boot에서 react를 통합해서 project를 관리할 수 있다면 좋겠다.
그래서 다시 또 기웃 기웃.
찾아서 따라한 내용을 요약하자면 이렇다.
참고 : https://github.com/kantega/react-and-spring
참고 : https://github.com/eirslett/frontend-maven-plugin
1. spring boot web : Demo 프로젝트 생성
2. Demo 프로젝트에 create-react-app frontend 생성
3. proxy 연결 (CORS 문제 해결)
4. pom.xml 설정 (maven build script 실행 시 react build 파일을 spring boot classpath 위치로 복사)
정도가 되겠다.
위 내용을 따라 진행하다 보면 문제점이나 내가 원하지 않는 설정이 되기도 한다.
일단, 3번 프록시 설정에서의 문제는 스프링부트(포트:8080)와 리액트(포트:3000)를 별도로 각각 기동시켜 개발해야 하는 상황이 될텐데 리액트 기동 시 오류가 발생한다.
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string.
찾아보니 package.json 파일의 proxy 설정 때문에 별도로 기동을 시킬 수 없는 상황이 발생한다.
그래서 별도의 플러그인을 설치하고 각각 기동 시 문제점을 해결할 수 있었다.
proxy 설정 참고 : https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
이제 frontend 프로젝트와 spring boot 프로젝트를 각각 기동해도 문제가 되지 았았다.
그리고 4번의 pom.xml 설정은 최종 배포될 위치로의 복사이므로 개발을 진행하면서 하려면 변경해야 했다.
<!-- frontend(react) 빌드 후 결과물 스프링 폴더로 포함시키기 위한 설정 -->
<plugin>
<artifactId>maven-antrun-plugin</artifactId>
<executions>
<execution>
<phase>generate-resources</phase>
<configuration>
<target>
<copy todir="${project.build.directory}/classes/public">
<!-- <copy todir="${project.basedir}/src/main/resources/static"> -->
<fileset dir="${project.basedir}/frontend/build" />
</copy>
</target>
</configuration>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>
/classes/public 위치로 설정하고 빌드하면, 다음과 같이 target 하위로 복사되게 되는데
/src/main/resources/static 위치로 복사 되도록 했다. (주석 부분으로 변경)
이렇게 해놓고 보니 일차적으로는 나름 괜찮았다.
그러다 문득 빌드된 파일이 그럼 계속 복사가 되는건가...? 싶었다. 파일이 변경 되면 같은 파일에 버전만 붙어 리네임 되고 그러면 오류가 나지 않을까? (확실히 알 수 없었다)
그래서 찾다 보니 복사, 붙여넣는 스크립트 전에 삭제 하고 복사, 붙여넣는 방식이 좋을 것 같기도 했다.
(아래는 위에서 설정한 maven-antrun-plugin 복사, 붙여넣기 내용과 일부 겹치므로 통으로 변경했다)
<!-- Clean the target-folder -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.2.0</version>
<configuration>
<filesets>
<fileset>
<directory>${project.basedir}/src/main/resources</directory>
<includes>
<include>static/**/*</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<!-- Copy resources to target-folder -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.2.0</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>validate</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${project.basedir}/src/main/resources/static</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/frontend/build</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
테스트 해보니 잘 된다. 프론트 영역 개발된 소스는 스프링부트의 리소스 하위 static 폴더 안으로 잘 들어가진다.
또 다른 사항으로 어떤게 발생할지...
이제 리액트 공부 시작할 수 있는건가?