Как развернуть приложение реагировать с перезарядками на tomcat?

Question

Я создал приложение реагирования и использую перезарядки для отображения графика. Я запускаю его с npm start и все отлично работает. Теперь я хочу развернуть его на кота. Я использую exec-maven-плагин для этого. Когда я развертываю сгенерированный файл войны, браузер показывает ошибки: ../static/js/...chunk.js загружен, но MIME-тип ("text / html") не является допустимым MIME-типом JavaScript. Это происходит для всех файлов, таких как: static / js / ... chunk.js. Другие ошибки: Не удалось загрузить из источника ../static/js/..chunk.js.

Я следовал этому уроку: https://www.megadix.it/blog/create-react-app-servlet/ Это сработало на tomcat, но когда я пробую это с перезарядками, я получаю ошибки.

Мой пакет. Json

{
  "name": "frontend_tomcat",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "recharts": "^1.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-recharts": "^1.2.0"
  }
}

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <!--
    Adapted from:
    https://gist.github.com/phillipgreenii/7c954e3c3911e5c32bd0
    -->
    <modelVersion>4.0.0</modelVersion>
    <groupId>it.megadix</groupId>
    <artifactId>frontend_tomcat</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <npm.output.directory>build</npm.output.directory>
    </properties>

    <build>
        <finalName>${project.artifactId}</finalName>
        <plugins>
            <!-- Standard plugin to generate WAR -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.1.1</version>
                <configuration>
                    <webResources>
                        <resource>
                            <directory>${npm.output.directory}</directory>
                        </resource>
                    </webResources>
                    <webXml>${basedir}/web.xml</webXml>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.3.2</version>
                <executions>
                    <!-- Required: The following will ensure `npm install` is called
                         before anything else during the 'Default Lifecycle' -->
                    <execution>
                        <id>npm install (initialize)</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>initialize</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <!-- Required: The following will ensure `npm install` is called
                         before anything else during the 'Clean Lifecycle' -->
                    <execution>
                        <id>npm install (clean)</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>pre-clean</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>

                    <!-- Required: This following calls `npm run build` where 'build' is
                         the script name I used in my project, change this if yours is
                             different -->
              <execution>
                        <id>npm run build (compile)</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>compile</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>

                </executions>

                <configuration>
                    <environmentVariables>
                        <CI>true</CI>
                        <!-- The following parameters create an NPM sandbox for CI -->
                        <NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
                        <NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
                        <NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
                    </environmentVariables>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <id>local</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.codehaus.mojo</groupId>
                        <artifactId>exec-maven-plugin</artifactId>

                        <configuration>
                            <environmentVariables>
                                <PUBLIC_URL>http://localhost:8080/${project.artifactId}</PUBLIC_URL>

                            </environmentVariables>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>prod</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.codehaus.mojo</groupId>
                        <artifactId>exec-maven-plugin</artifactId>

                        <configuration>
                            <environmentVariables>
                                <PUBLIC_URL>http://my-awesome-production-host/${project.artifactId}</PUBLIC_URL>

                            </environmentVariables>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
</project>

App.js

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,BarChart, Bar, Label
} from 'recharts';

export default class Example extends React.Component{
    render(){
const data = [
  {
    name: '10:00', SmartMeter1: 0, SmartMeter2: 2400,
  },
  {
    name: '10:30', SmartMeter1: 600, SmartMeter2: 1398,
  },
  {
    name: '11:00', SmartMeter1: 1000, SmartMeter2: 1398,
  },
  {
    name: '11:30', SmartMeter1: 1100, SmartMeter2: 2500,
  },
  {
    name: '12:00', SmartMeter1: 1200, SmartMeter2: 1398,
  },
  {
    name: '12:30', SmartMeter1: 1500, SmartMeter2: 2450,
  },
  {
    name: '13:00', SmartMeter1: 1900, SmartMeter2: 9800,
  },
  {
    name: '13:30', SmartMeter1: 2000, SmartMeter2: 3908, 
  },
  {
    name: '14:00', SmartMeter1: 2200, SmartMeter2: 4800,
  },
  {
    name: '14:30', SmartMeter1: 2350, SmartMeter2: 3800, 
  },
  {
    name: '15:00', SmartMeter1: 2400, SmartMeter2: 4300,
  },
];

    return (
      <LineChart
      title = "Tagesverbrauch"
        width={800}
        height={500}
        data={data}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis unit=" Uhr" dataKey="name" tick={{ fill: 'white' }}>
            </XAxis>
        <YAxis unit="kWh" tick={{ fill: 'white' }}/>
        <Tooltip />
        <Line name="Smart Meter 1" type="monotone" dataKey="SmartMeter1" stroke="#f59f4a" strokeWidth={2} activeDot={{ r: 8 }} />
      </LineChart>
  );
  }
}