Access Backend on VNet from public frontend

Simbarashe Kowo (Platinum Life) 0 Reputation points
2024-05-28T12:15:47.6033333+00:00

I need to deploy a frontend that will be publivly accessible but it needs to commuincate and write to a databse that must not be publicly accesible. The current setup i have is as follows:

  • Deploy the Next JS site using Azure Static Web Apps
  • Create a Virtual Network (VNet) and set us an Azure SQL DB.
  • Use private endpoint for connectivity
  • Set up Azure API functions to hndle requests from the frontend, functions also on VNet
  • Functions connect to the DB via private endpoint
  • Use API tokens to make requests from frontend to Azure API functions
  • architecture
Azure API Management
Azure API Management
An Azure service that provides a hybrid, multi-cloud management platform for APIs.
1,901 questions
Azure SQL Database
Azure Functions
Azure Functions
An Azure service that provides an event-driven serverless compute platform.
4,552 questions
Azure Virtual Network
Azure Virtual Network
An Azure networking service that is used to provision private networks and optionally to connect to on-premises datacenters.
2,256 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
829 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Andriy Bilous 11,176 Reputation points MVP
    2024-05-31T20:46:45.44+00:00

    Hello Simbarashe Kowo (Platinum Life)

    Your configuration is one of the supported scenarios as Static Web App has option 'bring your own functions' feature that requires the functions to not have IP restrictions.
    If securing your functions behind a private endpoint, Static Web App won't have access to it.

    Also consider Security constraints

    Authentication and authorization: If authentication and authorization policies aren't already set up on your existing Functions app, then the static web app has exclusive access to the API. To make your Functions app accessible to other applications, add another identity provider or change the security settings to allow unauthenticated access.

    Note

    If you enable authentication and authorization in your linked Functions app, it must use Azure App Service Authentication and authorization provider version 2.

    Required public accessibility: An existing Functions app needs to not apply the following security configurations.

    • Restricting the IP address of the Functions app.
      • Restricting traffic through private link or service endpoints.
      Function access keys: If your function requires an access key, then you must provide the key with calls from the static app to the API.

    You may also consider following Azure services to make secure connection from Static Web App to Azure Function:

    • API Management
    • Application Gateway

    https://techcommunity.microsoft.com/t5/apps-on-azure-blog/integrating-network-isolated-backends-with-azure-static-web-apps/ba-p/3721136

    https://video2.skills-academy.com/en-us/azure/static-web-apps/functions-bring-your-own#security-constraints

    0 comments