java - 将 Spring Boot 与 React 链接起来

Question

我关注了this使用 React 和 Spring Boot 创建 Web 应用程序的教程。

我遵循了完全相同的步骤，但是在我的 React 应用程序中我引入了 webpack。 React 应用程序已启动并正在运行。

pom.xml 文件如下所示:

<?xml version="1.0" encoding="UTF-8"?>

http://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0

<groupId>com.example</groupId>
<artifactId>ema</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>ema</name>
<description>Demo project for Spring Boot</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

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

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
<plugins>
    <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>


    <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.2</version>
    </plugin>

    <plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.0.2</version>
    <executions>
    <execution>
    <id>Copy frontend production build to resources</id>
    <phase>package</phase>
    <goals>
    <goal>copy-resources</goal>
    </goals>
    <configuration>
    <outputDirectory>${basedir}/target/classes</outputDirectory>
    <resources>
    <resource>
    <directory>src/main/app/build/</directory>
    <filtering>true</filtering>
    </resource>
    </resources>
    </configuration>
    </execution>
    </executions>
    </plugin>


    </plugins>
</build>

我已经完成了教程的最后一步:

mvn clean package
java -jar target/cra-demo-0.0.1-SNAPSHOT.jar

但是我看到我的 spring 服务器已关闭:

 :: Spring Boot ::        (v1.5.3.RELEASE)

2017-04-27 15:01:33.740  INFO 28295 --- [           main] com.example.EmaApplication               : Starting EmaApplication v0.0.1-SNAPSHOT on robucslvm03 with PID 28295 (/home/gecobici/EMA/target/ema-0.0.1-SNAPSHOT.jar started by gecobici in /home/gecobici/EMA)
2017-04-27 15:01:33.748  INFO 28295 --- [           main] com.example.EmaApplication               : No active profile set, falling back to default profiles: default
2017-04-27 15:01:33.860  INFO 28295 --- [           main] s.c.a.AnnotationConfigApplicationContext : Refreshing org.springframework.context.annotation.AnnotationConfigApplicationContext@255316f2: startup date [Thu Apr 27 15:01:33 EEST 2017]; root of context hierarchy
2017-04-27 15:01:34.936  INFO 28295 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Registering beans for JMX exposure on startup
2017-04-27 15:01:34.958  INFO 28295 --- [           main] com.example.EmaApplication               : Started EmaApplication in 2.06 seconds (JVM running for 2.877)
2017-04-27 15:01:34.958  INFO 28295 --- [       Thread-2] s.c.a.AnnotationConfigApplicationContext : Closing org.springframework.context.annotation.AnnotationConfigApplicationContext@255316f2: startup date [Thu Apr 27 15:01:33 EEST 2017]; root of context hierarchy
2017-04-27 15:01:34.959  INFO 28295 --- [       Thread-2] o.s.j.e.a.AnnotationMBeanExporter        : Unregistering JMX-exposed beans on shutdown

我是 Spring 和 React 新手，我不知道如何启动并运行 Spring 服务器并与我的 React 应用程序交互。

编辑:在 pom.xml 中我有:

<directory>src/main/app/build/</directory>

我使用 webpack -p 创建生产构建，但没有看到构建文件夹。如何在构建文件夹中生成生产构建？

Answer 1

你介绍的 webpack 女巫一点也不差，你可以做的是简化你的 React 应用程序与 spring 的使用，就是设置 Webpack 代理来拦截特定端口中的所有 HTTP 请求，这就是我的做法:

'webpack-dev-server': {
      options: {
        webpack: webpackConfig,
        inline: true,
      },
      start: {
        host: '0.0.0.0',
        port: '<%= config.webpackDevServerPort %>',
        contentBase: '<%= config.dist %>',
        webpack: {
          devtool: 'inline-source-map',
          debug: true,
        },
        proxy: {
          '/myapp': {
            target: 'http://localhost:' + (grunt.option('proxy-port') || config.connectPort),
            secure: false,
          },
        },
      },
    },

在 Spring 应用程序中，您必须允许以下最后一件事:

  /**
   * Register WebSocket publisher
   *
   * @param registry where the handler will be registered
   */
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(publisher, webSocketPath).setAllowedOrigins("*");
  }

如果你不setAllowedOrigins("*");来自外部Spring服务器的其余调用将不会被拦截，这仅适用于开发人员，并且在应用程序投入生产时必须禁用。