Access Backend on VNet from public frontend

Question

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
• 

Answer 1

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://learn.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own#security-constraints