如何在同一端口运行前端和后端以部署在 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"
  }
}

我在前端使用 axios 从后端获取数据。

import axios from 'axios';

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

我使用前端中的 axios 实例从后端获取。

....
....
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));
};
....
....

这是前端的package json文件，基本上是根文件夹

{
  "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

更新

至于我们在 cmets 中讨论的关于将 xml 文件放在哪里等问题，您将希望在 web.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 App 的package.json 中使用：

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

在生产中，您将希望使用 path 模块来提供静态反应文件...

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

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