Question

我正在尝试使用Express服务两个分离的Reactjs应用程序。

App1

*主应用程序：显示不同的数据集。根前端

* path：“ /”（localhost：5000 /）

App2

*辅助应用程序：用户仪表板，特定的用户数据。

* path：“ / app”（本地主机：5000 / app）

我有一个类似的问题： 1：Serving multiple react apps with client-side routing in Express

但这不能解决我的问题。

配置文件

App1 package.json

{
  "name": "app1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-image-gallery": "^0.8.11",
    "react-moment": "^0.7.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

App2 package.json：

{
  "name": "app2",
  "version": "2.0.9",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^2.0.4",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "0.3.0",
    "@coreui/react": "^2.0.5",
    "bootstrap": "^4.1.3",
    "chart.js": "^2.7.2",
    "classnames": "^2.2.6",
    "core-js": "^2.5.7",
    "enzyme": "^3.5.0",
    "enzyme-adapter-react-16": "^1.3.1",
    "flag-icon-css": "^3.0.0",
    "font-awesome": "^4.7.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-chartjs-2": "^2.7.2",
    "react-dom": "^16.4.2",
    "react-loadable": "^5.5.0",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.3.1",
    "react-test-renderer": "^16.4.2",
    "reactstrap": "^6.4.0",
    "simple-line-icons": "^2.4.1"
  },
  "devDependencies": {
    "babel-jest": "^23.4.2",
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "react-scripts": "^1.1.5"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000",
  "homepage": "http://localhost:5000/app2",
}

server.js

app.use("/app2", express.static(path.join(__dirname, "app2/build")));
app.get("app2/*", (req, res) => {
  res.sendFile(path.join(__dirname + "/app2/build/index.html"));
});

app.use(express.static(path.join(__dirname, "app1/build")));
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/app1/build/index.html"));
});

localhost:5000成功呈现了app1，但是如果我尝试localhost:5000/app2/，它实际上在app1中查找了route = / app2 /，因此我得到了一个空白页面。

PS：我也尝试过此solution，但同样，效果不佳。

谢谢！

Answer 1

问题出在这行

app.use(express.static(path.join(__dirname, "app1/build")));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/app1/build/index.html"));
});

您每次没有找到导航到app1的正确路线时，便没有以这种方式添加到该端点的路线

当您导航到localhost：5000 / 调用此处理程序“ app.get（“ *”）“

这是做自己想做的正确方法

const express = require('express')
const path = require('path')
const port = 5000
const app = express()
app.use("/app2", express.static(path.join(__dirname, "app2/build")));
app.use("/",express.static(path.join(__dirname, "app1/build")));
app.listen(port, () => console.log(`listening on port ${port}!`))

http://localhost:5000/ =>导航至应用程序1

http://localhost:5000/app2 =>导航至应用2

Answer 2

默认情况下，CRA构建将假定您的应用程序是从根目录提供的。这就是您看到空白页的原因-已提供HTML，但对js和css的请求失败。（实际上，在您的情况下，该操作成功-由于index.html文件的底部包含全部内容，因此返回了server.js）

现在可以在package.json中设置参数

如果您的应用将在/app2投放，则需要添加

//package.json
{
  //...
  "homepage":"app2"
}

然后，您的输出文件将具有适当的参考。您可以查看

我正在将链接附加到CRA docs-主页属性

服务多个reactjs应用-Nodejs + Express + React

2 个答案: