Приложение на основе React с пружинной загрузкой, связанной вместе как WAR-развертывание в websphere

Question

Я пытаюсь разработать интерфейсное приложение, основанное на реакции, с подпружиненной загрузкой. я пытаюсь создать WAR-файл, в котором и WAR-интерфейс соединен вместе. затем я пытаюсь развернуть его в веб-сфере. После создания WAR и его развертывания на сервере websphere, когда я пытаюсь получить доступ к странице, он не может получить доступ к страницам css и выдаче ошибки 404 not found. Реагирующий проект - это только каркасный проект, созданный с помощью команды «create-реагировать-приложение». У него еще нет никакого значимого кода. Я предоставляю файл 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 всех ресурсов, на которые он ссылается. Эта статья поможет вам настроить базовый URL для использования в React.