如何在Spring Boot应用程序中托管React应用程序？

Question

我希望能够从一个Spring Boot服务器应用程序中提供ReactJS UI应用程序的Webpack构建结果。

由于Webpack构建将所有资源生成到“dist”文件夹中，例如index.html、bundle.js等，可以通过访问http://localhost/index.html来访问它们。

而Spring Boot应用程序则从http://localhost/api/xxx这类API URL中提供服务。

- jordiburgos

---

您可以将dist文件夹的内容放入Spring Boot的static文件夹中。我以前也这样做过，但是不建议这样做。它会使构建过程痛苦，并且Tomcat在提供静态文件方面并不是很快。最好在Spring Boot应用程序之前使用反向代理（例如nginx），并直接部署React应用程序到nginx提供服务的目录中。 - Codo

我更倾向于至少在开发目的下使用Spring为他们提供服务。 - jordiburgos

很好检查：https://medium.com/@itzgeoff/including-react-in-your-spring-boot-maven-build-ae3b8f8826e - jordiburgos

Answer 1

1. 在React项目根目录（与package.json相邻的位置）创建.env文件。
2. 在.env文件中添加PUBLIC_URL=/nameContextRoot，其中上下文根的名称通常是WAR文件的名称。
3. 构建React项目：npm run build
4. 将build目录的内容复制到Spring Boot应用程序的static目录。
5. static目录应该是src/main/resources中的普通文件夹。

6. 清理并重新构建Spring Boot项目并运行它。

7. 现在可以正确访问内容了。

更新：

Spring Boot 结构

D:.
├───.mvn
│   └───wrapper
├───.settings
├───src
│   ├───main
│   │   ├───java
│   │   │   └───my.java.stuff
│   │   ├───resources
│   │   │   └───static
│   │   │       └───static
│   │   │           ├───css
│   │   │           └───js
│   │   └───webapp
│   └───test
│       └───java
│           └───my.java.tests
├───target
│   ├───classes
│   │   ├───java.classes
│   │   └───static
│   │       ├───css
│   │       ├───js
│   │       └───static
│   │           ├───css
│   │           └───js
│   ├───generated-sources
│   │   └───annotations
│   ├───m2e-wtp
│   │   └───web-resources
│   │       └───META-INF
│   │           └───maven
│   │               └───java.stuff
│   ├───maven-archiver
│   ├───maven-status
│   │   └───maven-compiler-plugin
│   │       └───compile
│   │           └───default-compile
│   ├───rclient-0.0.1-SNAPSHOT
│   │   ├───META-INF
│   │   └───WEB-INF
│   │       ├───classes
│   │       │   ├───java stuff
│   │       │   └───static
│   │       └───lib
│   └───test-classes
└───WebContent
    └───META-INF

ReactJS 项目结构

D:.
├───build
│   └───static
│       ├───css
│       └───js
├───node_modules
├───public
└───src
    ├───components
    ├───domain
    └───util

您的API端点也将在上下文根目录下提供。它们与React无关。

@Codo提供的提示仍然有效，可以使用反向代理来访问静态内容。但是这里你特别询问如何在Spring Boot应用程序中托管React应用程序。

- arnonuem

---

这种方法行不通。我从.env中删除了PUBLIC_URL=/nameContextRoot，然后它开始工作了。 - Sachin Poreyana

好的，谢谢您发布这个提示。也许React中的某些内容随着时间的推移发生了变化。 - arnonuem