스프링 부트 애플리케이션 내부에 리액트 웹 애플리케이션과 jar 패키징을 통합하는 방법
우리는 리액트 웹 앱과 스프링 부트 애플리케이션(메이븐으로 빌드됨)을 개발 중입니다.
React app(on npm)과 boot app은 별도로 실행되지만 이제는 이를 통합하여 QA/staging에 투입할 때가 되었습니다.
우리는 리액트 애플리케이션을 번들링하기 위해 웹팩을 사용하고 있습니다.
부팅 앱은 데이터베이스 지속성을 위해 최대 절전 모드를 사용하는 REST API(리액트 프런트 엔드에서 사용)가 있는 단일 모듈입니다.
문의사항
- 리액트 앱과 부트 앱 모두에 대한 디렉토리 구조는 무엇이어야 합니까?전체 앱(프론트엔드 및 백엔드)을 .jar(스프링 부트 uberjar)로 배포하고자 합니다.
- 리액트 앱 개발 워크플로우란 무엇입니까? 작은 CSS, html 또는 .js가 변경될 때마다 maven과 java-jar를 실행할 필요가 없는 워크플로우입니다.
웹에서 react 애플리케이션과 boot 애플리케이션이 모두 통합되지 않은 별도의 repos/directory에 있는 리소스를 발견했습니다. 이는 최적이 아닙니다. 웹 애플리케이션 리소스와 boot 리소스가 모두 동일한 디렉토리 트리에 있는 리소스를 아직 찾지 못했습니다. 여기에는 개발 라이프사이클과 프로덕션 라이프사이클도 포함됩니다.
보너스 : 반응 개발자들은 html/js/css만 알고 있습니다.vscode/webstorm 프로젝트에 대응 앱 리소스만 있을 수 있습니까?
React 및 SpringBoot를 동일한 포트에서 실행하여 단일 아티팩트로 패키징할 수 있습니다!!여기서 설명한 단계를 따라 실행하십시오.당신의 질문에 대답하기 위해-
- 디렉터리 구조는 아래에 나와 있습니다.둘 다 동일한 루트 디렉토리 아래에 있습니다.
- 리액트 앱 개발 워크플로우와 관련하여 프론트 엔드 리액트 프로젝트를 개발하는 방식으로 핫 새로고침(파일을 저장하면 변경 사항이 자동으로 반영됨) 및 의미 있는 오류 메시지를 통해 리액트 앱을 개발할 수 있습니다.통신하려면 프록시를 사용해야 합니다.
여기 제가 설명할 데모 프로젝트의 Github 링크가 있습니다.
은 Spring Boot의 할 수 .src/main/resources/static폴더를 누릅니다.Spring Boot의 위에 언급된 기능을 활용하여 리액트 프로젝트의 단일 페이지를 참조하십시오.원본 디렉터리가 아닌 대상 디렉터리의 정적 폴더에서 html 페이지를 제공합니다.
프로젝트 구조
먼저 https://start.spring.io 을 사용하여 스프링 부트 프로젝트를 만듭니다.웹 종속성을 추가합니다.groupId 및 artificitId를 원하는 대로 설정합니다.프로젝트를 생성하고 프로젝트 디렉토리에 압축을 풉니다.
Spring Tools Suite를 됩니다.File->New->Spring Starter Project스프링 부트 프로젝트를 만드는 데 필요한 세부 정보를 입력합니다.
그frontend 안에 있는 src/maincreate-message-app을 사용하여 응답 응용프로그램을 빌드해야 합니다.
그래서 두 단계가 있습니다.
- 프런트 엔드의 프로덕션 빌드를 생성합니다.
- 운영 빌드를 ${target/vmdk/}(으)로 복사합니다.
우리는 그것을 위해 두 개의 메이븐 플러그인과 Thymleaf를 사용할 것입니다.
- 1단계에 대한 프론트 엔드 메이븐 패치입니다.
- 2단계에 대한 maven-valuation-valuation.
1단계에서 프론트 엔드 메이븐 플러그인의 경우-- 자세히 살펴보면,pom.xml거기서 나는 언급했습니다.srcdirectroy frontend-maven-discovery가 파일을 가져올 곳에서 프로덕션 빌드를 만들고 언급된 출력 디렉터리 안에 내용을 배치합니다(아래 참조).src/main/frontend/build).
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
2단계에서 maven-resources-plugin의 경우 -- 프론트엔드-maven-plugin에 의해 방금 생성된 프로덕션 빌드를 가져와 루트 디렉토리 내에 배치합니다.target/classes/static.
그런 다음 Thymleaf를 사용하여 정적 콘텐츠를 제공합니다.target/classes/static컨트롤러의 정지 끝점을 사용합니다. 아면이입합니다야력해의 을 입력해야 합니다.html file,맘에 들다http://localhost:8080/index.html
당신의 pom.xml은 다음과 같이 보여야 합니다.
<?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>
여기 컨트롤러 코드가 있습니다.
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;
}
}
위에서 언급한 단계를 따르면 리액트 앱이 스핀업되는 것을 볼 수 있습니다.http://localhost:8080/.
자세한 내용은 제가 작성한 블로그를 확인하시면 됩니다.여기 두 개의 다른 플랫폼에 있는 블로그 링크가 있습니다.
개발 커뮤니티 - https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa
중간 - https://medium.com/codex/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-a790c9e10ac1
저는 멀티 모듈 메이븐 프로젝트를 만들 것을 제안합니다. 여기서 한 모듈은 스프링 부트 앱이고 두 번째 모듈은 반응 앱입니다.우버 항아리로 만들기 위해서, 반응 앱을 메이븐이 만든 웹 항아리로 포장하세요.빌드는 적절한 플러그인을 사용하여 메이븐으로도 수행할 수 있습니다.
그래서:
- 프로젝트의 하위 디렉터리에 일반 대응 앱(npm 등에 의해 빌드됨)을 만듭니다.
- 메이븐 컴파일에서 Javascript를 컴파일하고 적절한 webjar 구조로 패킹할 이 앱 pom.xml에 추가합니다.
- 스프링 부트 모듈에서 반응 1을 일반 메이븐 종속성으로 추가합니다.이 튜토리얼을 확인하십시오.
이것은 당신이 모든 것을 하나의 uber jar 앱으로 가질 수 있게 해줄 것입니다.반면에 프론트엔드 사용자는 다른 반응 응용 프로그램과 마찬가지로 반응 모듈로 작업할 수 있습니다.
저는 당신의 질문에 답할 수 있는 이 게시물을 찾았습니다.여기에서는 리액트 프론트 엔드와 스프링 부트 백 엔드를 개발한 다음 배포를 위해 단일 jar 파일로 병합하는 방법을 보여 줍니다.
우버 독을 만드는 것이 최선인지 아니면 앱을 하나의 독에 포장하는 것이 최선인지에 대한 질문에 답합니다.그것은 특정한 것에 따라 다릅니다.예를 들면, 전에.앱에 oauth2가 구현되어 있고 액세스 토큰 등의 로직을 구현하지 않고 나머지 엔드포인트에 액세스하려는 경우.당신은 그것을 하나의 병에 넣을 수 있습니다.그렇지 않으면 헤더에 액세스 토큰이 있는 헤더를 만들어야 합니다.
언급URL : https://stackoverflow.com/questions/64058885/how-to-integrate-a-react-webapp-inside-a-spring-boot-application-with-jar-packag
'programing' 카테고리의 다른 글
| 모든 호출을 수정하지 않고 Retrofit을 사용하여 OAuth 토큰 새로 고침 (0) | 2023.07.31 |
|---|---|
| Powershell 배열의 각 항목을 새 배열로 선택/매핑 (0) | 2023.07.31 |
| MySQL GROUP_CONCAT(null 포함) (0) | 2023.07.31 |
| 업데이트를 위해 선택...에는 항상 주문 기준이 포함되어야 합니까? (0) | 2023.07.31 |
| Angular 2에서 상대 경로가 매우 긴 수입을 피하는 방법은 무엇입니까? (0) | 2023.07.31 |