带React前端的Spring应用部署到Heroku的前端构建配置问题咨询

核心原理 #

你不需要提前手动创建target/classes/static目录，该目录是Maven构建Spring项目时自动生成的临时目录，我们只需要配置Maven插件，在Java构建流程中自动插入React的构建动作，并将React打包产物自动复制到该静态资源目录即可，Spring Boot默认会从该目录加载前端静态资源。

配置步骤 #

1. 新增Maven插件配置（修改pom.xml） #

在pom.xml的<build><plugins>节点下新增两个插件：

（1）frontend-maven-plugin：自动完成Node环境安装、React依赖安装、生产构建

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <configuration>
        <!-- 你的React代码所在的frontend目录路径 -->
        <workingDirectory>src/main/frontend</workingDirectory>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v16.18.1</nodeVersion>
                <npmVersion>8.19.2</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npm run build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

（2）maven-resources-plugin：将React构建产物复制到Spring静态资源目录

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-react-build-to-static</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                <resources>
                    <resource>
                        <directory>src/main/frontend/build</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

注意：请将上面的node、npm版本替换为你本地开发时使用的版本，避免构建兼容性问题

2. 解决React路由404问题（如果你使用BrowserRouter） #

新增一个Spring配置类，将所有非接口请求转发到React的index.html：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配所有非/api开头的请求，转发到index.html
        registry.addViewController("/{spring:[^\\.api]*)}").setViewName("forward:/index.html");
        registry.addViewController("/**/{spring:[^\\.api]*)}").setViewName("forward:/index.html");
    }
}

如果你的后端接口统一前缀不是/api，自行修改上面的匹配规则即可

3. 本地验证配置有效性 #

• 在项目根目录执行mvn clean package，构建完成后查看target/classes/static目录，确认存在React打包后的index.html、js、css等资源
• 本地启动Spring Boot服务，直接访问后端端口（默认8080），确认可以正常加载前端页面、调用后端接口

4. 提交代码部署到Heroku #

• 确认根目录的system.properties文件中配置了正确的Java版本，例如：java.runtime.version=11
• 执行git add .、git commit提交所有配置修改
• 执行git push heroku master，Heroku会自动执行Maven全流程构建，完成后即可正常访问前端页面和后端接口

内容的提问来源于stack exchange，提问作者James Smith