將 Appsettings.json (.core) 中的 url 參數傳遞給 React

Question

我正在嘗試訪問 appsettings.json 文件中的 url 參數。 原因是 api URL 不同於開發發布。 我不完全確定解決此問題的最佳方法。

我找到了一個可行的解決方案：

如何使用 asp.net 核心從 appsettings.json 獲取配置數據並做出反應

正如我從上面的線程中了解到的，我需要創建一個服務並從 React 調用它？ 這似乎有點奇怪，因為我總是（？）需要向同一個項目發出 API 請求以接收 ZDB974238714CA8DE634A7CE1D083A14F 請求所需的 URL。

另一個建議是使用 webpack，或者以某種方式將 url 保存在客戶端。 但這是否意味着每當我需要更改環境時，我需要在 2 個地方（后端和前端）進行更改？

這就是我的 appsettings.json 文件的外觀（相同的變量，但.Development 和.Publish 的值不同）。

{
    "Url": "localhost:44000"
}

在我的啟動 class 中，我得到了值：

    var urlValue =
        _configuration.GetSection("Url");

我不能根據后端的環境以某種方式獲得價值並使用 React 接收它嗎？

不確定我是否在這里想錯了？

如果有人能夠指出我正確的方向，將不勝感激。

Answer 1

我對此的解決方案是使用 .env 文檔，但仍使用 .core launchSettings env。

為了使這個解決方案起作用，我需要 env-cmd：

npm install env-cmd

添加了 3.env 文件：

 1. .env
 2. .env.development
 3. .env.prod

每個文件包含一個 url 字符串：

REACT_APP_Url = https://localhost:44000

我添加了 env check in.core 啟動文件：

    app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
                else if (env.IsProduction())
                {
                    spa.UseReactDevelopmentServer(npmScript: "build");
                }
            });

當我運行生產代碼時 - 我指的是“構建”，所以在我的情況下，object“構建”將運行。

package.json 文件：

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "cross-env env-cmd -f .env.prod react-scripts start",
  }

我現在可以使用以下命令訪問 url： {process.env.REACT_APP_Url}