Spring Boot과 create react 응용 프로그램을 결합하는 방법에 대해 알아봅니다.

어이!나는 인도 서방 방글라데시에서 온 3년 이상의 경험을 가진 전창고 개발자다.오늘, 같은 포트에서react와springboot 프로그램을 실행하기 위해 프로젝트 구조를 준비하고, 그것들을 하나의 부품으로 포장하는 설정 기술을 소개합니다.이 두 가지 게임 규칙을 바꾸는 기술을 처리할 때 개발이 얼마나 쉬운지 보실 수 있습니다.

다음은 프레젠테이션의 GitHub 링크입니다. 여기서 설명하겠습니다.

이런 설정의 장점

와 용수철 부츠의 개발성이 결합되었다.

개발 전단에서 create-react-app의 핫 리셋 기능을 사용할 수 있으며 변경된 후에 페이지를 저장하면 페이지가 브라우저에 바로 반영됩니다.

Spring Boot을 사용하면 개발 버전(스냅샷 사용)과 프로덕션 릴리스를 손쉽게 관리할 수 있습니다.Spring Boot에서 create-react-app 또는 Spring Admin을 사용하여 런타임 시 빌드 버전과 시간을 체크할 수 있으며 메타데이터 구축 기능과 추가 기능을 제공합니다.

war/jar 파일에 전단과 후단을 포장하여 생산 구축을 최적화한다.

나는 최근의 한 항목에서 이 점을 알게 되었다.이것은 몇 개의springboot 마이크로 서비스가 있는데, 그 중에서react 전단이 자신의 단일 부품으로 포장되어 배치되어 있다.
다음은 같은 포트에서react 전단과spring boot 백엔드를 어떻게 실행하는지, 그것들을 단일jar 파일로 포장하는지 설명하는 빠른 안내서입니다.
우선, Spring Actuator 을 사용하여spring boot 프로젝트를 만듭니다.웹 종속성 추가groupId 및 artifactId를 임의의 값으로 설정합니다.프로젝트를 생성하고 프로젝트 디렉터리로 압축합니다.
또는 Spring Tools Suite를 사용하는 경우File->New->Spring Starter Projectspring boot 프로젝트를 만드는 데 필요한 상세한 정보를 언급합니다.
너의 처음pom.xml은 이렇습니다.
https://start.spring.io
프로젝트 구조는 이렇다.

프로그램이 실행 중인지 확인하는 데 오류가 없습니다.
하지만 클릭하면 아무것도 보이지 않는다.
http://localhost:8080/
이제 src/main/resources로 이동하여 static 폴더를 만듭니다.내부에 텍스트를 포함하는 test.html 파일을 만듭니다.

현재 프로그램을 다시 시작하고 를 누르면 포트 8080에서 html 페이지를 회전하는 것을 볼 수 있습니다.브라우저에서 파일의 컨텐트를 볼 수 있습니다.
http://localhost:8080/test.html

포트 8080에서 Spring Boot에서 React 애플리케이션에 서비스를 제공하여 함께 묶음

Spring Boot의 이러한 특성을 사용하여 react 프로젝트의 단일 페이지에 서비스를 제공합니다.우리는 static 디렉터리 아래의 target 폴더에 원본 디렉터리가 아닌 html 페이지를 제공할 것이다.
현재 로react 프로그램을 만듭니다.터미널에서 폴더로 이동src/mainD:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin\src\main>와 운행npx create-react-app frontend.
이것은 내부에react 응용 프로그램 src/main 을 만들 것입니다.지금 폴더 구조를 보면 그럴 것이다.
create-react-app
react 프로그램을 실행할 수 있습니다. 방법은 실행 cd frontend, 그리고 실행 yarn start 또는 npm start 입니다.이것은 에서react 프로그램을 시작해야 합니다.
http://localhost:3000
실행yarn build을 통해 프런트엔드 프로덕션 빌드를 생성할 수 있습니다.build 명령을 실행한 폴더의 구조는 다음과 같습니다.

프로젝트를 시작할 때 Spring Boot에서 이 서비스를 제공할 수 있도록 이 제품 빌드를 프로젝트의 target/classes 디렉토리에 복사하여 놓아야 합니다.
그래서 두 가지 절차가 있다-

프런트엔드

프로덕션 구축

생산 구축을 ${target/classes/}

로 복사
물론 수동으로 이 작업을 수행하지는 않을 것입니다.
우리는 두 개index.html를 사용할 것이다.

단계 1.

frontend-maven-plugin 2단계에 사용됩니다.

아래 내용을 maven plugins 부분의 pom.xml에 추가하고 plugins를 업데이트한다. 그림과 같다.

   <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>

           <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>   

현재 properties section 에서 mvn clean install 를 실행하면, 마벤트는 로컬 npm, Thread, node를 설치하고, 전방 디렉터리에서 npm build를 실행합니다.
maven-resources-plugin
폴더 구조는 다음과 같습니다 -

이제 두 번째 플러그인을
D:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin>에 추가합니다.

          <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <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>

의존항 부분에 다음 의존항을 추가합니다.

       <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

구성 섹션을 포함하도록 수정pom.xml

          <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>

이것은 spring-boot-maven-plugin 전단 생성 파일을 생성한 후에 그것들을 복사할 수 있도록 합니다.
이제 yarn build를 다시 실행하고 파일 관리자에서 mvn clean install 디렉토리를 확인합니다.

이 파일에는 프런트엔드 프로덕션 구축 파일이 포함됩니다.
너의 기말고사target/classes/static는 이렇다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.2</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.springreact</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Run React Frontend and SpringBoot Backend on the same port.</description>
    <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</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.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId> 
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <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>${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>
                <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>
</project>

이제 출발할 준비 됐어!프로젝트를 실행하고 로 넘어가 보세요!!Spring Boot에서 React 응용 프로그램을 실행했습니다.
http://localhost:8080/index.html

한층 더

응용 프로그램의 시작점으로 pom.xml 단점을 추가할 수 있습니다.rest controllers와 마찬가지로 프로그램을 불러올 때마다springboot는 Index Controller 파일을 시작합니다. 이 파일은 index.html 전방 프로젝트 최적화 구축의 정적 내용을 포함합니다.이렇게 하면 하드코딩 파일 이름 대신 간단하게 접근할 수 있습니다.
우리 이렇게 합시다.
다음 폴더 구조에 컨트롤러를 추가합니다.
http://localhost:8080

package com.springreact.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @GetMapping("")
    public ModelAndView home() {
        ModelAndView mav=new ModelAndView("index");
        return mav;
    }

}

어플리케이션을 실행하고 를 클릭합니다.
뭐 봤어요?아니오, 맞아요!
작업을 하려면 다른 의존 항목을 추가해야 합니다.

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

현재 기본적으로 target directory 는 index.html 에서 우리의 템플릿을 찾을 것입니다.우리는 템플릿을 거기에 놓고 하위 디렉터리에 구성할 수 있다. 그러면 문제가 없다.
그럼 한번 해 봅시다.thymleaf에 src/main/resources/templates라는 html 파일을 추가하고 내용을 추가합니다.
어플리케이션을 실행하고 액세스http://localhost:8080/합니다.src/main/resources/templates의 index.html가 8080 포트에서 서비스 중임을 확인할 수 있습니다.
http://localhost:8080
이 기본 동작을 변경하고 index.html 다른 위치에서 정적 내용을 제공하려면 src/main/resources/templates 파일에 항목을 추가해야 합니다.

spring.thymeleaf.prefix=file:///D:///Codes_projects//springboot_react_maven_plugin//Spring_React_maven-plugin//target//classes//static/

여기서 나는 경로를 하드코딩했다.
마지막으로, 지금 만약 당신이 thymleaf 프로젝트를 완성하고 그것을 시작한다면.react 프로그램이 8080 포트에서 직접 실행되는 것을 볼 수 있습니다.

결론

spring boot을 사용하여react 프로그램을 실행하는 방법을 배웠습니다.동일한 포트에서 프런트엔드와 백엔드를 실행할 수 있습니다.나는 네가 설정을 완성하기 위해 무엇을 해야 하는지 이미 설명했다.현재, 의미 있는 프로그램을 만들고, 이 설정을 사용하여 개발하는 것이 얼마나 쉽고 빠른지 이해할 수 있습니다.현재, 당신은 실행 application.properties 을 통해 React 스크립트를 사용하여 전방 프로그램을 실행할 수 있습니다.update, 의 열 리셋 기능을 사용하여 개발되었고 의미 있는 오류 메시지를 가지며 응용 프로그램을 단일 부품으로 테스트 및 생산 환경에 배치할 수 있다.
읽어주셔서 감사합니다!
만약 당신이 이것이 도움이 된다고 생각한다면, 평론을 남겨 주세요.어떠한 피드백이나 건의도 환영합니다.