首页 > 解决方案 > 基于 React 的应用程序与 Spring Boot 捆绑在一起作为 WAR 部署在 websphere 中

问题描述

我正在尝试以 Spring Boot 作为后端开发基于反应的前端应用程序。我正在尝试创建一个前端和后端在 WAR 中耦合在一起的 WAR。然后我正在尝试将其部署到 websphere。创建 WAR 并将其部署到 websphere 服务器后,当我尝试访问该页面时,它无法访问 css 页面并给出 404 not found 错误。react 项目只是一个使用“create-react-app”命令创建的骨架项目。它还没有任何有意义的代码。我正在提供 pom 文件供您参考。请帮助我,如果需要,我将提供任何其他代码。

<properties>
    <java.version>1.8</java.version>
    <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
    <node.version>v12.13.0</node.version>
    <npm.version>6.12.0</npm.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>
    <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>
            <exclusion>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-logging</artifactId>
            </exclusion>
        </exclusions>
    </dependency>

    <!-- <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> 
        <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> 
        <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> 
        <scope>provided</scope> </dependency> -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

<!-- <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> -->

<build>
    <plugins>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>process-classes</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/resources</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${basedir}/src/main/webapp/XXX/build</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>${frontend-maven-plugin.version}</version>
            <configuration>
                <workingDirectory>src/main/webapp/XXX</workingDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>Install node and npm locally to the project</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <!-- optional: default phase is "generate-resources" -->
                    <phase>generate-resources</phase>
                    <configuration>
                        <nodeVersion>${node.version}</nodeVersion>
                        <npmVersion>${npm.version}</npmVersion>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                </execution>

                <execution>
                    <id>Build frontend</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

React package.json:

{
"name": "next-gen-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

我收到以下错误:

加载资源失败:服务器响应状态为 404 (Not Found) main.c17080f1.css:1

标签: javareactjsmavenspring-bootwebsphere

解决方案


如果您的 WAR 的上下文根不是 /,您将需要配置您的 React 应用程序构建器以将该上下文根包含在它引用的所有资源的 url 中。本文将引导您设置 React 使用的基本 URL。


推荐阅读