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

Question

我有一个简单的设置：

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

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

我想使用Web应用程序配置来注入API的根uri，让它指向相应槽中的API。因此，生产暂存静态站点应该指向生产暂存 API。

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

访问配置对于 Functions 应用程序来说效果很好；我假设是因为它正在运行节点。

Answer 1

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

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

您可以将ASP.NET Core 与 React 项目模板结合使用来创建充当 API 的 ASP.NET Core 项目和充当 UI 的标准 CRA React 项目，但可以方便地将两者托管在单个应用程序中可以作为一个单元构建和发布的项目。（来源）。

然后您将必须编写一个公开配置的小控制器。这里有一个例子：

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;
    }
}

您还需要在startup.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 App 配置覆盖选项（中间件配置为也使用环境变量，并且环境变量覆盖 appsettings.json）

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

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