Note: This is the first article on the topic of integrating Static Web Apps with resources bound to a virtual network. See the second article for more context: Access network isolated APIs and databases from Azure Static Web Apps - Microsoft Community Hub
Azure Static Web Apps allows you to easily host your web apps globally, with built-in support for APIs, staging environments and more. With the introduction of the API integration feature for Azure Static Web Apps, we’ve heard many developers indicate that they want to link network isolated backends to their Azure Static Web Apps resources to benefit from this feature’s key benefits: integrated security and seamless routing.
However, since Static Web Apps hosts web apps in a distributed manner, Static Web Apps resources can’t be deployed directly into virtual networks directly (only integrated via private endpoint). Therefore, they can’t integrate directly with network isolated backends.
Instead, integrating network isolated resource with a Static Web Apps resource can be achieved by leveraging API Management and its virtual network integration capabilities. This article details how to do this.
Azure Static Web Apps’ backend integration works by reverse proxying calls made to `/api` to the linked Azure resources (whether it be a Web App, a Container App, a Function App or an API Management instance). When it proxies these calls, it also injects the HTTP headers necessary for authentication and authorization, such as the `x-ms-client-principal`.
By doing this, the Azure Static Web Apps backend integration feature enables the aforementioned benefits of seamless routing and integrated security. By serving your API from the `/api` endpoint, no additional CORS configurations are needed for your backend. Additionally, by injecting the required headers, you can access your user credentials if you are using Azure Static Web Apps’ authentication and authorization.
Azure Static Web Apps’ backend integration also comes with the added benefit of securing access to your API by configuring your backend to only accept traffic coming from your Static Web Apps resource.
All in all, backend integration is an important and interesting feature which allows you to build full stack applications (while leveraging the global distribution of Azure Static Web Apps). As such, it is understandable to want to use this feature with network isolated backends.
Given the benefits of backend integration for Azure Static Web Apps, it is understandable that those with existing network isolated backends wish to make use of this feature. Here are a few alternatives to help you consider your choices when using Azure Static Web Apps with network isolated backends. For this use case, we demonstrate how to integrate your Static Web Apps resource with an API deployed onto a Web App within an App Service Environment in your virtual network.
As you can see from the above architecture options, only the API Management network integration option achieves both the integrated security and seamless routing benefits. While the other options can be suitable for your architecture, they do not enable all benefits of backend integration and come with limitations as explained above. Note that only API Management's developer and premium tiers offer external virtual network integration.
Therefore, API Management is the best option for those wanting to integrate virtual network-bound backends with Azure Static Web Apps since it gives you full feature parity. Below, we detail how to implement this architecture.
Let’s take another look at the architecture diagram detailed in option 3 above. As we can see, the use of API Management integrated into the virtual network using the external mode allows Static Web Apps’ distributed hosts to access the API endpoints, since this mode gives external access to network isolated backends.
This guide will detail how to configure your Azure Static Web Apps and your API Management instance to achieve integration with network isolated backends. For this demo, I decided to build this architecture using an Azure Function App and a private endpoint instead of the Web App within the App Service Environment for simplicity, though this would apply to all available isolated backends.
Upon linking your API Management as a Static Web Apps backend, Static Web Apps will configure your API Management to only accept requests coming from your Static Web Apps resource by configuring the subscriptions and products of your API Management instance.
With this architecture, you’ll notice that your APIs are now being served by Azure Static Web Apps’ `/api` route. Moreover, you can notice that your APIs are now receiving requests with the authentication headers injected, allowing you to use Azure Static Web Apps’ authentication feature.
To test it out, follow these steps:
In conclusion, by leveraging API Management and its network integration capabilities, we can integrate a network isolated backend with an Azure Static Web Apps resource. API Management serves as a proxy that allows external access to your private backend APIs. This allows both benefits enabled by Azure Static Web Apps backend integration feature: the ability to serve your API from the `/api` endpoint (no need to configure custom CORS rules in your API) and the injection of authentication headers to API requests allowing you to use Azure Static Web Apps’ authentication feature.
In conjunction with the ability to integrate Static Web Apps with virtual networks through the use of private endpoints, this article demonstrates that Azure Static Web Apps can be well integrated into existing architectures that make use of network isolation for security purposes.
Read more about architectures to integrate Static Web Apps with network isolated backends here: Access network isolated APIs and databases from Azure Static Web Apps - Microsoft Community Hub
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.