React + Spring Boot 部署

Spring

React + Spring Boot 部署案例

在当今的软件开发中，前后端分离的架构方式越来越受到开发者的青睐。React作为一种流行的JavaScript库，可以帮助开发者构建快速、灵活和可扩展的用户界面。而Spring Boot作为一个开箱即用的Java后端框架，可以简化后端开发过程。本文将介绍如何将React和Spring Boot结合起来进行部署，并提供一个简单的案例代码。

React部分

首先，我们需要创建一个React应用。可以使用Create React App工具快速搭建一个全新的React项目。在命令行中执行以下命令：

npx create-react-app my-app

此命令将创建一个名为my-app的新React应用。完成后，进入项目目录：

cd my-app

接下来，我们可以使用以下命令启动React应用：

npm start

这将在开发模式下启动React应用，并在浏览器中打开http://localhost:3000。

Spring Boot部分

现在，我们将创建一个简单的Spring Boot后端应用。在项目的根目录下，创建一个名为backend的子目录，并在其中创建一个名为demo的子目录。

进入demo目录，并使用以下命令初始化一个新的Spring Boot项目：

Spring init -dweb,data-jpa,h2,devtools demo

这将使用Spring Initializr创建一个基本的Spring Boot项目。完成后，进入demo目录：

cd demo

接下来，我们需要创建一个简单的控制器类来处理HTTP请求。在src/mAIn/Java/com/example/demo目录下，创建一个名为HelloController.Java的文件，并添加以下代码：

Java
package com.example.demo;
import org.Springframework.web.bind.annotation.GetMapping;
import org.Springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello from Spring Boot!";
    }
}

这个控制器类定义了一个/hello的GET请求处理器，返回一个简单的字符串。

将React与Spring Boot集成

现在，我们可以将React前端应用与Spring Boot后端应用集成起来。首先，在React应用的根目录下，创建一个新的文件夹build。

然后，使用以下命令将React应用构建到build文件夹中：

npm run build

这将生成一个优化过的、可部署的React应用。

接下来，将React应用的构建结果复制到Spring Boot应用的静态资源目录中。在demo目录下，创建一个名为src/mAIn/resources/static的目录，并将React应用的构建结果粘贴到这个目录中。

现在，我们需要修改Spring Boot应用的配置文件，以便正确地处理React应用的路由。在src/mAIn/resources目录下，创建一个名为application.properties的文件，并添加以下配置：

Spring.mvc.view.prefix=/static/
Spring.mvc.view.suffix=

这将告诉Spring Boot应用将所有的请求都指向静态资源目录。这样，当访问http://localhost:8080时，将自动加载React应用。

测试部署结果

现在，我们可以测试部署的结果。在命令行中，进入demo目录，并执行以下命令启动Spring Boot应用：

./mvnw Spring-boot:run

这将在本地的8080端口启动Spring Boot应用。

在浏览器中访问http://localhost:8080，将看到部署成功的React应用。

本文介绍了如何将React和Spring Boot结合起来进行部署。首先，我们创建了一个React应用，并使用Create React App工具初始化了一个新的项目。然后，我们创建了一个简单的Spring Boot后端应用，并编写了一个处理HTTP请求的控制器类。最后，我们将React应用构建结果复制到Spring Boot应用的静态资源目录中，并修改了应用的配置文件。通过这些步骤，我们成功地将React与Spring Boot集成并完成了部署。

希望本文能够帮助读者理解如何使用React和Spring Boot进行部署，并为开发者提供一个基于这两种技术的简单案例。通过这种前后端分离的架构方式，开发者可以更加灵活地构建和扩展他们的应用程序。