基于 React 的应用程序与 spring 启动捆绑在一起作为 WAR 部署在 websphere

Question

我正在尝试开发一个基于反应的前端应用程序，spring 启动作为后端。我正在尝试创建一个 WAR，前端和后端在 WAR 中耦合在一起。然后我试图将它部署到 websphere。创建 WAR 并将其部署到 Websphere 服务器后，当我尝试访问该页面时，它无法访问 css 页面并给出 404 未找到错误。 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（未找到）main。c17080f1.css:1

Answer 1

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

基于 React 的应用程序与 spring 启动捆绑在一起作为 WAR 部署在 websphere

React Based app with spring boot bundled together as a WAR deploying in websphere

java

websphere

maven

reactjs

spring-boot