Spring boot + React build process

류슬기·2021년 3월 17일
3

TIL

목록 보기
8/16
post-thumbnail

be, fe 합쳐서 build하는 방법 (21.03.16 기준 오류 없이 작동)
spring boot(Maven) + react 연동

  1. workspace 폴더 만들고 sts 실행
  2. create new Spring starter project
  3. npx create-react-app fe
  4. fe 경로에 yarn add serve
  5. node,yarn 버전 변경 후 maven update
    (frontend-maven-plugin, maven-resources-plugin) 플러그인 사용
// pom.xml

<properties>
  <java.version>11</java.version>
  <frontend-src-dir>${project.basedir}/fe</frontend-src-dir>
  <node.version>v15.9.0</node.version>
  <yarn.version>v1.22.10</yarn.version>
  <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
</properties>
<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-tomcat</artifactId>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
  </dependency>
  <dependency>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.11.2</version>
  </dependency>
</dependencies>
<build>
  <plugins>
    <plugin>
      <groupId>com.github.eirslett</groupId>
      <artifactId>frontend-maven-plugin</artifactId>
      <version>${frontend-maven-plugin.version}</version>
      <configuration>
        <nodeVersion>${node.version}</nodeVersion>
        <yarnVersion>${yarn.version}</yarnVersion>
        <workingDirectory>${frontend-src-dir}</workingDirectory>
        <installDirectory>${project.build.directory}</installDirectory>
      </configuration>
      <executions>
        <execution>
          <id>install-frontend-tools</id>
          <goals>
            <goal>install-node-and-yarn</goal>
          </goals>
        </execution>
        <execution>
          <id>yarn-install</id>
          <goals>
            <goal>yarn</goal>
          </goals>
          <configuration>
            <arguments>install</arguments>
          </configuration>
        </execution>
        <execution>
          <id>build-frontend</id>
          <goals>
            <goal>yarn</goal>
          </goals>
          <phase>prepare-package</phase>
          <configuration>
            <arguments>build</arguments>
          </configuration>
        </execution>
      </executions>
    </plugin>
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <version>3.0.1</version>
      <executions>
        <execution>
          <id>position-react-build</id>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <phase>prepare-package</phase>
          <configuration>
            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
            <resources>
              <resource>
                <directory>${frontend-src-dir}/build</directory>
                <filtering>false</filtering>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>
  1. run as -> maven clean, maven install
  2. applicatioin run
  3. localhost:8080 접속하면 React화면 출력
profile
FE Developer🌱

0개의 댓글