#build #war #tomcat8 #production
#сборка #Война #tomcat8 #производство
Вопрос:
Я работаю над проектом, бэкэнд которого написан на spring boot, а пользовательский интерфейс написан на react, код пользовательского интерфейса react встроен в проект maven, содержащий код spring, например
JavaMavenProject (Project Structure)
->src
->main
->java (Spring boot code)
->reactcode (UI react code)
->resources
->webapp
-> test
Я использую плагины (фрагмент ниже) в pom.xml также создавать код react, когда я создаю свой java-код
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.7.6</version>
<executions>
<execution>
<id>Install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<npmVersion>6.14.8</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<workingDirectory>src/main/reactcode</workingDirectory>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>Copy my react app into my Spring Boot target static folder</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>target/classes/static</outputDirectory>
<resources>
<resource>
<directory>src/main/reactcode/build</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
Теперь, когда я тестирую все свое приложение через Intellij, все работает нормально, но когда я создаю файл войны для его запуска на «Apache Tomcat», даже «index.html » не загружается, я попытался отладить это, поэтому я получил ниже (изображение) упомянутую проблему
введите описание изображения здесь
для чего я, когда я удалил начальные обратные косые черты для них из взорванного файла war в папке webapp Apache Tomcat (просто для отладки проблемы)
<script src="/static/js/2.f62791a5.chunk.js"></script>
<script src="/static/js/main.839bea33.chunk.js"></script>
итак, после изменения приведенного выше кода на
<script src="static/js/2.f62791a5.chunk.js"></script>
<script src="static/js/main.839bea33.chunk.js"></script>
index.html вместе с чанком.js и chunk.css начинают отображаться, как показано на рисунке ниже
введите описание изображения здесь
Теперь, аааа.. когда я попытался нажать на ссылки, они не работают, я попытался проверить сетевые журналы, а также сервер, но и там не повезло.
Код «package.json»
{
"name": "mapping-tool",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.12",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-autocomplete-input": "^1.0.15",
"react-bootstrap": "^1.4.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-dom": "^17.0.1",
"react-flexy-table": "^1.3.6",
"react-gif-loader": "^0.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-select": "^3.1.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
код для «App.js »
import React from 'react';
import './App.css';
import Mappings from './Mappings';
import Mapping from './Mapping';
import Test from './Test';
import Property from './Property';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavigationBar from './Components/NavigationBar';
import {Row, Col, Container } from 'react-bootstrap';
функция App() {
return (
<Router>
<NavigationBar />
<Container>
<Row>
<Col lg={12} className={"margin-top"}>
<Switch>
<Route path="/add" exact component={Mapping} />
<Route path="/edit/:id" exact component={Mapping} />
<Route path="/list" exact component={Mappings} />
<Route path="/tester" exact component={Test} />
<Route path="/property" exact component={Property} />
</Switch>
</Col>
</Row>
</Container>
</Router>
);
}
экспортировать приложение по умолчанию;
код для «NavigationBar.js »
<Navbar bg="dark" variant="dark">
<Link to={""} className="navbar-brand">
</Link>
<Nav className="mr-auto">
<Link to={"add"} className="nav-link">Add System</Link>
<Link to={"list"} className="nav-link">Mapping List</Link>
<Link to={"tester"} className="nav-link">Add Mapping</Link>
<Link to={"property"} className="nav-link">Property</Link>
</Nav>
</Navbar>
В заключение: у меня есть spring boot и react app в одном проекте Maven Java, который я создаю для производственной сборки, которую я развертываю на Apache Tomcat, в Intellij все работает нормально, но на Tomcat они не запущены.
«вздох …….»
Я был бы признателен за любую помощь, спасибо
Ответ №1:
Исправлено путем выполнения следующих шагов :
- использование HashRouter вместо BrowserRouter
- настройка «домашняя страница»: «.» в package.json
для point1 сделайте это :
<HashRouter>
<Container>
<Row>
<Col lg={12} className={"margin-top"}>
<Switch>
<Route path="/add" exact render={(props) => (
<Component1 {...props} restUrls={this.state.urls} />
)} />
<Route path="/edit/:id" exact render={(props) => (
<Component2 {...props} restUrls={this.state.urls} />
)} />
</Switch>
</Col>
</Row>
</Container>
</HashRouter>