Как запустить интерфейс и бэкэнд в одном порту для развертывания на сервере Tomcat?

Question

Я использую reactjs во внешнем интерфейсе и node js, express js в серверной части, которая подключается к MySQL БД.

Это две разные папки, которые я обычно использовал на разных портах.

как их объединить для развертывания на сервере Tomcat. каков правильный метод для этого?

Это индексный файл из внутренней папки внутри моей внешней папки

....
....
app.post('/data/tournament/registration',(request, response)=>{
    console.log(request.body);
    connection.query("INSERT INTO registrationdata VALUES ?"
    ,[request.body],function(error, result, fields){
        if(error){
            throw error;
        }else{
            console.log(JSON.stringify(result));
            response.send(JSON.stringify(result))
        }
    });
});

app.listen(8080,()=>{
    console.log("Connected to port 8080");
});
....
....

Пакет JSON файл из внутренней папки внутри папка переднего конца

{
  "name": "mysql_db",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node src/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mysql": "^2.18.1"
  }
}

Я использую ax ios во внешнем интерфейсе для извлечения данных из бэкэнда.

import axios from 'axios';

export default axios.create({
    baseURL:'http://localhost:8080'
});

Я использую экземпляр ax ios, как на моем переднем конец для выборки из бэкэнда.

....
....
export const fetchTournaments=()=>async(dispatch)=>{
    await mysqlDB.get('/data/tournament/fetch')
    .then((response)=>{
        console.log(response);
        if(response.data !== {}){
            dispatch( {
                type: ActionTypes.FETCH_TOURNAMENT_SUCCESS,
                payload:response.data 
            });
            console.log("Fetched tournament")
            History.push('/tournaments')
        }else{
            dispatch({type:ActionTypes.FETCH_TOURNAMENT_FAILED});
            console.log("failed to Fetch tournament")

        }
    })
    .catch((error)=>console.error(error));
};
....
....

Это пакет json файл внешнего интерфейса, который в основном представляет собой папку root

{
  "name": "chess4loudoun",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/moment": "^1.3.13",
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/pickers": "^3.2.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "concurrently": "^5.2.0",
    "material-table": "^1.57.2",
    "moment": "^2.26.0",
    "react": "^16.13.1",
    "react-countdown": "^2.2.1",
    "react-dom": "^16.13.1",
    "react-google-login": "^5.1.20",
    "react-material-ui-carousel": "^1.4.5",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start ",
    "build": "react-scripts build ",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

ОБНОВЛЕНИЕ

Что касается вашего другого вопроса о том, где разместить ваш xml файл и c, который мы обсуждали в комментариях, вы захотите использовать его в своей сети. xml файл для обработки любых 404 согласно https://create-react-app.dev/docs/advanced-configuration/

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

---

Для разработки вы можете использовать:

Добавьте это в свой express server. js или w / e

app.listen(8080)

Затем в вашем приложении React package.json используйте:

"proxy": "http://localhost:8080"

In production вы захотите использовать модуль path для обслуживания файлов stati c react ...

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'build')))