2017-07-17 82 views
0

我在同一臺Linux服務器上同時運行前端(React)和後端(nodejs)。從同一臺服務器上的本地主機獲取

在我的前端,我有一個fetch請求到後端,我必須指定爲fetch('http://10.25.248.238:3001/'),IP(本地,因爲這個站點是供公司內部使用的)和後端的端口。

有沒有辦法避免對這個後端IP地址進行硬編碼,以便在前端和後端都移動到另一臺服務器時仍能正常工作?

我試過http://localhost:3001但實際上試圖從本地訪問者的網站獲取。 fetch('/')也沒有工作。

註冊域名並不合適,因爲本網站僅供內部使用。

+0

當你說「前端和後端被移動到另一臺服務器」你的意思是他們永遠是在同一臺機器上或在後端將被移動到一臺機器和前到另一個? –

+0

前端和後端都將始終位於同一臺機器上。 – Avery235

回答

2

一個簡單的解決方案是在您的Webpack設置中定義環境變量並將其傳遞到React應用程序。

您可以創建dev.webpack.config.js和prod.webpack.config.js並在每個配置文件中,使用webpack.DefinePlugin:

new webpack.DefinePlugin({ 
    BASE_URL: 'YOUR_SERVER_BASE_URL' 
}); 

而在你的應用程序做出反應,你可以參考他們與process.env.BASE_URL。例如:

let url = process.env.BASE_URL + '/user'; 
+0

我應該在哪裏放這兩個文件?我還有什麼要做的?不熟悉webpack,我用'create-react-app'。 – Avery235

+0

看來Facebook團隊不會爲開發人員提供更多自由來擴展當前的create-react-app。檢查這篇文章:https://github.com/facebookincubator/create-react-app/issues/99我認爲創建一個React應用程序的最好方法是通過一個着名的yeoman生成器或一些很好的樣板例子,以便您擁有更多控制設置,環境等。 – MattYao

+0

我只是聲明2個變量,並根據'process.env.NODE_ENV ===「開發」'選擇'。但是,當前端和後端都移動到新服務器時,必須手動編輯服務器url。 – Avery235

相關問題