Spring Boot+React部署Tomcat路由异常：访问/apka出现404错误

一、修正Spring Boot War包部署基础配置 #

Spring Boot默认以jar包运行，部署到外部Tomcat必须调整以下核心配置：

• pom.xml调整：
  确保打包类型为war，并排除内置Tomcat，避免与外部Tomcat冲突：

  <packaging>war</packaging>
  
  <dependencies>
      <!-- 排除内置Tomcat，使用外部Tomcat容器 -->
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-tomcat</artifactId>
          <scope>provided</scope>
      </dependency>
      <!-- 其他业务依赖... -->
  </dependencies>
  

• 启动类调整：
  让启动类继承SpringBootServletInitializer，确保Spring上下文在Tomcat中正确初始化：

  @SpringBootApplication
  public class ApkaApplication extends SpringBootServletInitializer {
      @Override
      protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
          return application.sources(ApkaApplication.class);
      }
  
      public static void main(String[] args) {
          SpringApplication.run(ApkaApplication.class, args);
      }
  }
  

二、调整静态资源与React打包配置 #

1. Spring Boot静态资源配置：
   在application.properties中明确静态资源规则（默认已包含classpath:/static/，显式配置更稳妥）：

   spring.web.resources.static-locations=classpath:/static/
   spring.mvc.static-path-pattern=/**
   

2. React打包路径修正：
   由于Tomcat上下文路径为apka，React打包时需设置对应基础路径，修改vite.config.js：

   export default defineConfig({
     base: '/apka/', // 对应Tomcat的上下文路径
     // 其他Vite配置...
   })
   

   重新打包React，将dist目录下的所有文件（包括index.html和assets文件夹）复制到项目的src/main/resources/static目录下，确保打包后资源引用路径正确。

三、配置SPA路由转发（解决React路由404） #

创建专门的转发控制器，匹配所有非静态资源的请求，转发到index.html让React路由处理：

@Controller
public class SpaForwardController {

    // 匹配根路径及所有不带后缀的路径（避免转发CSS/JS等静态资源）
    @GetMapping(value = { "/", "/**/{path:[^.]*}" })
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

说明：该映射会自动适配Tomcat的上下文路径apka，无需硬编码/apka/，保证配置灵活性。

四、补充Tomcat Welcome File配置（可选） #

在项目src/main/webapp/WEB-INF/web.xml（无则新建）中添加欢迎页配置，让Tomcat访问上下文根时自动指向index.html：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

五、部署验证 #

1. 执行mvn clean package重新构建war包
2. 将war包放入Tomcat的webapps目录，重启Tomcat服务
3. 访问https://address_ip:port/apka，确认index.html正常加载
4. 测试React路由跳转（如/apka/about），确保无404错误

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