ALBERT SITE

React 공부하겸 SpringBoot 프로젝트 만들어 봤다.

뭐 특별한건 없지만 빌드시 npm 명령어 실행하여 Frontend React 프로젝트도 같이 빌드하도록 설정해봤다.

(React 뿐 아니라 vue, angular,nextjs,nuxtjs 등 nodejs 기본 모든 프로젝트에 적용가능하니 참고 바란다.)

설정은 maven pom.xml 상 frontend-maven-plugin 설정추가하는걸로 끝난다.

(https://github.com/eirslett/frontend-maven-plugin) 에서 최신버전 사용을 추천한다.

<build>
   <plugins>
      <plugin>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-maven-plugin</artifactId>
         <configuration>
            <excludes>
               <exclude>
                  <groupId>org.projectlombok</groupId>
                  <artifactId>lombok</artifactId>
               </exclude>
            </excludes>
         </configuration>
      </plugin>
      <plugin>
         <groupId>com.github.eirslett</groupId>
         <artifactId>frontend-maven-plugin</artifactId>
         <version>1.12.1</version> <!-- frontend-maven-plugin Version -->
         <configuration>
            <workingDirectory>frontend</workingDirectory> <!-- React JS 가 설치된 디렉토리 -->
            <installDirectory>target</installDirectory> <!-- war & jar 가 생성되는 메이븐 빌드의 타겟 디렉토리 -->
         </configuration>
         <executions>
            <execution>
               <id>install node and npm</id>
               <goals>
                  <goal>install-node-and-npm</goal> <!-- node & npm 설치 -->
               </goals>
               <configuration>
                  <nodeVersion>v16.17.1</nodeVersion> <!-- 설치할 nodeJs 의 버전 -->
                  <npmVersion>9.6.1</npmVersion>  <!-- 설치할 npm 의 버전 -->
               </configuration>
            </execution>
            <execution>
               <id>npm install</id>    <!-- npm install 로 package.json 의 모듈을 설치한다. -->
               <goals>
                  <goal>npm</goal>
               </goals>
               <configuration>
                  <arguments>install</arguments>
               </configuration>
            </execution>
            <execution>
               <id>npm run build</id>  <!-- React Js Build -->
               <goals>
                  <goal>npm</goal>
               </goals>
               <configuration>
                  <arguments>run build</arguments>
               </configuration>
            </execution>
         </executions>
      </plugin>

      <plugin>
         <groupId>com.mysema.maven</groupId>
         <artifactId>apt-maven-plugin</artifactId>
         <version>1.1.3</version>
         <executions>
            <execution>
               <goals>
                  <goal>process</goal>
               </goals>
               <configuration>
                  <outputDirectory>target/generated-sources/java</outputDirectory>
                  <processor>com.querydsl.apt.jpa.JPAAnnotationProcessor</processor>
               </configuration>
            </execution>
         </executions>
      </plugin>
   </plugins>
</build>

프로젝트 전체 폴더 구조

그냥 일반적인 SrpiringBoot 프로젝트여서 별도의 글로는 추가하지 않겠고 확인 필요하면 Github에 올린 소스 참고 바란다.

FrontEnd소스다운로드

BackEnd 소스타운로드

끝