如何设置Azure静态Web应用程序和Azure应用程序服务之间的访问控制？

Question

我已在 Azure 应用服务中部署了 FastAPI 后端，并在 Azure 静态 Web 应用中部署了前端。为了增强安全性，我想引入访问控制，以便只有特定的客户端（在本例中为我的前端）才能访问我的后端 API。 我尝试使用 Azure 应用服务中的访问限制进行配置。在源设置中，我看到虚拟网络或IPv4选项。但是，我无法识别 Azure 静态 Web 应用程序的 IP 地址块或虚拟网络。有些帖子说 Azure 静态应用程序不会发布静态 IP 地址。

我的目标是建立一个规则，只允许我的前端访问后端 API，同时阻止其他未经授权的请求。目前，我在后端代码 (FastAPI) 中创建访问控制规则。我觉得不太好。

app = FastAPI(
    docs_url=None if os.getenv("ENV") == "production" else "/docs",
    redoc_url=None if os.getenv("ENV") == "production" else "/redoc"
)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://xxxx.x.azurestaticapps.net"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

ChatGPT 推荐我引入 Azure API 管理。这可行吗？最有效的方法是什么？

Answer 1

通过将应用服务与虚拟网络 (VNet) 集成并设置私有访问，您可以将对后端 API 的访问限制为仅受信任的来源。

要通过虚拟网络在静态 Web 应用程序和应用程序服务之间创建私有连接，您可以按照以下步骤操作：

通过为 Azure 应用服务启用 VNet 集成，创建 VNet 并将应用服务与 VNet 集成。

为静态 Web 应用程序创建一个专用端点，关联相同的静态 Web 应用程序 VNet，这可确保只能通过 VNet 访问后端 API。

通过将静态 Web 应用程序配置为在高级或标准层中使用具有虚拟网络集成的 VNet来限制 Azure 静态 Web 应用程序访问。

请参阅此链接在 Azure 静态 Web 应用程序中配置专用终结点。此外，您可以参考此链接了解如何通过VPN连接访问Azure Web Apps。

使用静态Web应用程序的私有IP来允许与应用程序服务通信。

转到应用程序服务的访问限制部分。

添加一条规则，仅允许来自集成 Web App 的子网的流量。 网络应用程序输出：

要访问静态 Web 应用程序 URL，您必须位于同一专用终结点 VNet 网络范围内。

vnet 网络范围内的静态 Web 应用程序的输出：

如果在网络范围外访问，会返回403 Forbidden错误，如下所示：