Question

到目前为止，我的React应用通过port 3000在npm start上运行。

我已经决定要对通过yarn add express mysql构建的Web应用程序使用MySQL。

我让server.js监听了端口3001。

每当我运行nodemon server.js然后单击刷新时，我在React应用程序的首页上都不会看到test（这表明一切正常）。

如果在浏览器中输入test，我会看到localhost: 3001，但它完全空白，这意味着，我只会看到test，而不是网络应用程序的原始首页。这是一个全新的页面。

在package.json文件中，我试图在文件底部以及其他位置添加"proxy":"http://localhost:3001"，但仍然无法正常工作。

如何做到这一点，以便可以在Web应用程序的原始首页（test）上看到port 3000，因此我可以得出结论说一切正常，并且可以继续集成MySQL？< / p>

这是我的server.js文件：

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.get('/', (req, res) => {
    res.send('test');
});

app.listen(3001, () => {
    console.log("listening port 3001");
});

Answer 1

更新

如果您不需要在生产环境中构建和尝试您的应用程序，这意味着您只需要运行这两个应用程序进行开发，然后按照注释中的建议使用代理即可。运行两个服务器，并在前端对您的Express API路由发出请求。您可以在客户的{react part）package.json文件中添加这样的代理。

"proxy": {
    "/api/*": {
      "target": "http://localhost:3001"
    }
}

然后，前端上对/api/*的任何请求都会通过您的Express服务器。

要同时启动两个服务器，可以使用concurrently。首先将其安装在服务器端：

添加纱线concurrently

安装后，您可以在scripts部分中添加以下内容：

"scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "prod": "NODE_ENV=production nodemon app.js"
},

一开始我误解了你的意图，这就是为什么我给出如下答案的原因。

这是正常现象，因为您尚未配置Express来正确服务您的前端。

首先，对于React应用程序，您根本不需要任何服务器。您当前正在使用的（在端口3000上）是出于开发目的。因此，在完成您的应用程序后，您应该构建它并配置Express以静态提供它。

首先，构建它：

yarn build

此步骤之后，您将在客户端的build目录中拥有静态文件。

现在，您的Express配置应该是这样的：

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.get('/test', (req, res) => {
    res.send('test');
});

app.use( express.static( "client/build" ) );
app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) ) );

app.listen(3001, () => {
    console.log("listening port 3001");
});

请注意Express的路线更改。我将/更改为/test。因此，当您点击/test时，您会看到Express路线的服务范围。除了这条路线之外，您还应该看到自己的React应用。

此外，如果您的设置不同，请不要忘记更改这些内容：

client/build

和

path.resolve( __dirname, "client", "build", "index.html" )

这意味着Express搜索一个client目录，而您的React应用程序驻留在该目录中。

PS：您将只启动Express服务器，因为您不需要Express来提供服务，所以将没有更多的服务器可用于React。

此外，相关部分可以像这样增强：

if ( process.env.NODE_ENV === "production" ) {
  app.use( express.static( "client/build" ) );

  app.get( "*", ( req, res ) =>
    res.sendFile( path.resolve( __dirname, "client", "build", "index.html" ) )     );
}

因此，在运行时，您可以传递环境变量，而Express仅在生产环境中会使用此路由。

为什么我无法在原始React Web应用程序的首页上看到测试文本？

1 个答案: