将 ReactJS 与 Spring Boot 集成的正确方法是什么？ [关闭]

Question

我正在尝试使用 ReactJS 为前端设置 Spring Boot Rest API。在以下场景中实现此目的的正确方法是什么？

多年来，作为一名 Java 后端开发人员，我在前端使用过 JSF 和相关组件库。现在我正在努力想象 ReactJS 和 Spring Boot 的集成。我在后端有许多 RESTful Spring Boot 微服务，它们位于代理后面（确切地说是 Zuul 和 SSO 和 OAuth2 - JWT 保护）。我的前端应用程序将由两部分组成。登陆页面和管理面板（仪表板）。为此设置集成 ReactJS 和 Spring Boot 的正确方法是什么？我见过两种方法。一种方法是将两个应用程序捆绑在一起并使用 Maven 构建它们，使它们在 websocket 上进行通信，另一种方法是将两个应用程序完全分离。

我遇到的基于 Maven 的方法：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v10.11.0</nodeVersion>
                <npmVersion>6.4.1</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>webpack build</id>
            <goals>
                <goal>webpack</goal>
            </goals>
        </execution>
    </executions>
</plugin>

通过遵循上述方法，我是否应该期望我的应用程序将通过安全性获得更多功能，或者仅使用令牌/api 密钥调用 api 就可以了，因为我最近已经尝试过。

Answer 1

虽然 frontend-maven-plugin 插件对于通过 maven 构建前端应用程序非常有帮助，但我会将前端与您的 java 应用程序完全隔离。前端应用有自己的构建配置和工具，强制使用maven构建前端应用有点麻烦恕我直言。

关于安全性，我想说两种实现之间没有太大区别，因为在这两种情况下，后端都会以 403 响应，而前端必须处理它。但是，在您的第一个选项中，您的 java 应用程序可能可以控制最初是否允许访问静态文件。如果您不想事先将静态文件发送给未经身份验证的用户，则更高级别的访问管理工具（例如 Keycloak）可能会有所帮助。

Answer 2

在 pom.xml 中添加一个属性 -->

<properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Finchley.SR1</spring-cloud.version>
        <frontendSrcDir>${project.basedir}/src/main/frontend</frontendSrcDir>
        <node.version>v8.11.3</node.version>
        <npm.version>5.6.0</npm.version>
        <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    </properties>

依赖

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

在 pom.xml 中构建

<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>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <npmVersion>${npm.version}</npmVersion>
                    <workingDirectory>${frontendSrcDir}</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>prepare-package</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.1.0</version>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/templates/yourdirectory</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontendSrcDir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

控制器-->

@Controller
@RequestMapping("/sample")
public class WebController {

    @RequestMapping({"/",""})
    public String index() {
        return "redirect:/sample/default/";
    }

    @RequestMapping("/default/**")
    public String catalogsListing() {
        return "shop/index.html";
    }
}

它对我有用..

参考：https://spring.io/guides/tutorials/react-and-spring-data-rest/