為什么我無法在原始React Web應用程序的首頁上看到測試文本？

Question

到目前為止，我的React應用程序通過npm start在port 3000上npm start 。

我已經決定要使用MySQL作為我通過yarn add express mysql構建的Web應用程序。

我讓server.js在端口3001上偵聽。

每當我運行nodemon server.js並單擊刷新時，我的React應用程序的首頁都沒有看到test （這表明一切正常）。

我可以在瀏覽器中看到是否輸入localhost: 3001 test ，但它完全空白，這意味着，我只能看到test而不是Web應用程序的原始首頁。 這是一個全新的頁面。

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

我如何做到這一點，以便可以在Web應用程序的原始首頁（ port 3000 ）上看到test ，因此可以得出結論，一切正常，可以繼續集成MySQL？

這是我的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應用程序。

另外，如果您的設置不同，請不要忘記更改這些設置：

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

和

 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僅在生產環境中會命中此路由。