configuration - 如何在静态网页中访问 Azure Web App 配置

Question

我有一个简单的设置:

Azure Web 应用，运行静态 react 应用

Azure Functions App，访问数据库并从静态 Web 应用程序调用的 API 层

Web App 和 Functions App 都具有部署槽功能，您首先在单独的槽中进行部署，如果一切正常，您可以将槽中的工件与当前版本交换，而无需停机。我真的很想充分利用它。

我想使用 Web App 配置来注入(inject) API 的根 uri，让它指向相应插槽中的 API。所以生产暂存静态站点应该指向生产暂存 API。

但这是主要问题:我无法从我的 react 应用程序访问 Web 应用程序配置。我必须在构建时插入根 uri，这会禁用 Web 应用程序的交换功能(因为它仍将指向暂存)。

访问配置对 Functions App 来说工作正常；我假设是因为它正在运行节点。

Answer 1

Web 应用程序配置可用作服务器上的环境变量。您将无法在客户端上运行的静态 react 应用程序中访问这些变量。

您将需要某种 中间件 能够通过 API 读取和公开环境变量。

您可以使用带有 React 项目模板的 ASP.NET Core 要创建两者，一个充当 API 的 ASP.NET Core 项目和一个充当 UI 的标准 CRA React 项目，但可以方便地将两者托管在可以作为单个单元构建和发布的单个应用程序项目中。 (Source)。

然后你将不得不编写一个暴露配置的小 Controller 。这里有一个例子:

public class MyOptions
{
    public string ApiUri { get; set; }
}

[ApiController]
[Route("[controller]")]
public class ConfigurationController : ControllerBase
{
    private readonly MyOptions _options;

    public ConfigurationController(IOptions<MyOptions> options)
    {
        _options = options.Value;
    }

    [HttpGet]
    public MyOptions GetConfigurations()
    {
        return _options;
    }
}

您还需要配置 中的选项。启动.cs :

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<MyOptions>(Configuration.GetSection(nameof(MyOptions)));
    services.AddControllers();
}

现在您可以在 中设置初始值。 appsettings.json :

{
  "MyOptions": {
    "ApiUri" :  "https://myapp.domain.com/api" 
  }
}

您还可以使用 Azure Web 应用配置覆盖选项(中间件配置为也使用环境变量，并且环境变量覆盖 appsettings.json)

现在您要做的最后一件事是使用以下命令检索静态 UI 中的设置:

window.location.host + "/api/configuration"