时间戳

首页 > 解决方案 > 如何使用 frontend-maven-plugin 从捆绑到 Spring Boot 的 React 应用程序进行 REST api 调用？

reactjs - 如何使用 frontend-maven-plugin 从捆绑到 Spring Boot 的 React 应用程序进行 REST api 调用？

问题描述

我创建了一个 spring boot 项目并在其中添加了一个 react 应用程序（使用 创建create react-app）。我想将 REST Api 和前端捆绑在单个构建 (fat jar) 中。

创建了 Spring Boot Web 项目，在根目录下添加了包含反应代码的前端文件夹。这是里面的插件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.5.2</version>
    <relativePath/>
    <!-- lookup parent from repository -->
  </parent>
  <groupId>com.example</groupId>
  <artifactId>ppa-test</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>ppa-test</name>
  <description>Demo project for Spring Boot</description>
  <properties>
    <java.version>11</java.version>
    <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
    <node.version>v15.7.0</node.version>
    <npm.version>7.14.0</npm.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-test</artifactId>
      <scope>test</scope>
    </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>${npm.version}</yarnVersion>
          <workingDirectory>frontend</workingDirectory>
          <installDirectory>${project.build.directory}</installDirectory>
        </configuration>
        <executions>
          <execution>
            <id>install-frontend-tools</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
          </execution>

          <execution>
            <id>npm-install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>

          <execution>
            <id>build-frontend</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>compile</phase>
            <configuration>
              <arguments>run-script build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <executions>
          <execution>
            <id>copy-resources</id>
            <phase>process-classes</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>${basedir}/target/classes/static</outputDirectory>
              <resources>
                <resource>
                  <directory>frontend/build</directory>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</project>

这是github repo链接

该项目正在运行，8087并且 http://localhost:80807 确实渲染了App.js. http://localhost:8087/api/audits但在里面我做了一个返回404错误的api调用。我虽然可以像这样使用 Rest 控制器。

我在这里做错了什么？
@EnableWebMvc确实公开了 Rest 端点，但是App.js构建不提供内容。

标签： reactjsspring-bootmavenfrontend-maven-plugin

解决方案

你是对的，对不起。我刚刚克隆了你的回购并尝试了。它确实有效。带有空数组的响应代码 200。

顺便说一句：您不需要 cors 配置。仅当前端由另一个网络服务器提供服务时才需要它。但是当将它与你的弹簧一起部署在一个胖罐中时 - 它没有必要，因为它没有进行 cors 调用，因为它是同一个主机。

我刚刚点击了 repo 并看到了你的前端代码。你在 axios 中查询的路径只是

axios.get("/audits")

但必须是

axios.get("/api/audits")

因为控制器用相应的 RequestMapping.

@RequestMapping("/api")

推荐阅读