如何将React项目打包为独立war包并部署到JBoss服务器

可行实现方案 #

方案1：改造React静态资源为标准Servlet WAR包（适配JBoss规则） #

JBoss的deployment目录仅识别符合Java EE规范的部署单元（war/ear/jar等），裸静态资源目录不会被当做web应用加载，这是其与Tomcat的核心差异。具体改造步骤如下：

1. 调整Maven项目结构，按照如下层级组织：

react-webapp/
├── pom.xml
└── src
    └── main
        ├── webapp
        │   ├── WEB-INF
        │   │   └── web.xml
        │   └── <React build所有文件直接放在这里，不要嵌套build文件夹>
        └── resources

2. 在WEB-INF目录下新增web.xml配置，解决403权限报错和静态资源路由问题：

<?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">

    <!-- 禁用目录遍历，修复403权限问题 -->
    <servlet>
        <servlet-name>default</servlet-name>
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
    </servlet>

    <!-- React前端路由适配，解决刷新404问题 -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

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

3. 配置pom.xml，设置打包类型为war：

<packaging>war</packaging>
<build>
    <finalName>react-frontend</finalName>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.3.2</version>
        </plugin>
    </plugins>
</build>

4. 可选JBoss适配配置：在standalone/configuration/standalone.xml中添加如下配置，解决跨域和静态资源缓存问题：

<subsystem xmlns="urn:jboss:domain:undertow:12.0">
    <server name="default-server">
        <host name="default-host" alias="localhost">
            <filter-ref name="cross-origin"/>
        </host>
    </server>
    <filters>
        <response-header name="cross-origin" header-name="Access-Control-Allow-Origin" header-value="*"/>
        <response-header name="cache-control" header-name="Cache-Control" header-value="no-cache, no-store, must-revalidate"/>
    </filters>
</subsystem>

完成后执行mvn clean package生成war包，直接放入deployment目录等待自动部署即可，访问路径为http://<jboss地址>:<端口>/react-frontend。

方案2：SpringBoot后端单独打包规则 #

后端按标准SpringBoot打WAR包流程改造即可，注意两个核心配置：

1. 启动类继承SpringBootServletInitializer，重写configure方法：

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

2. pom.xml中设置打包类型为war，排除内置Tomcat依赖：

<packaging>war</packaging>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <exclusions>
            <exclusion>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-tomcat</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

打包后部署访问路径默认是http://<jboss地址>:<端口>/<后端war包名>，前端接口调用时统一使用该前缀即可。

常见问题排查 #

• 部署后403：检查JBoss运行用户对war包是否有读权限，确认web.xml中已经配置了默认servlet的listings参数
• 静态资源404：在React项目的package.json中添加"homepage": "."，适配任意上下文路径
• 跨域错误：优先在后端配置全局跨域规则，或按上述方案修改JBoss undertow配置

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