Setting Up Vite React Website with Azure NoSQL Database

Question

A Vite React website is being developed with a NoSQL database on the Azure platform to gain experience. Help is needed with configuring the database to be private while still allowing access from Azure Functions or Azure Static Web Apps.

The issue arises from the lack of static outbound IP addresses for Azure Functions (flex consumption) and Azure Static Web Apps (Standard), making it impossible to whitelist these in CosmosDB. Locally, everything functions well as the local IP address is static, but the cloud service's outbound IP addresses vary, preventing a successful connection to the database.

Various configurations have been attempted:

• Azure Static Web App -> Azure Functions -> CosmosDB (with Azure Functions as a proxy)
• Azure Static Web App -> CosmosDB
• Azure Web App -> CosmosDB
• Azure Web App -> Azure Functions -> CosmosDB (with Azure Functions acting as a proxy)

Despite these attempts, the outbound IP address issue persists, along with the absence of the Cosmos DB Built-in Data Contributor role. Aiming for hosting costs under 50 euros a month, assistance is sought in resolving the database connectivity challenges, especially with an expected usage of 50,000 - 100,000 requests for saving and retrieving data.

Answer 1

Hi arsen harutjunjan

It sounds like you're facing a challenge with securing Azure Cosmos DB while ensuring access from Azure Functions and Azure Static Web Apps, given the lack of static outbound IP addresses.

1.Use Private Endpoints for Cosmos DB
Since you want to keep the database private, setting up Azure Private Link for Cosmos DB ensures that traffic stays within Azure’s network. You’ll need to:
-Create a private endpoint for Cosmos DB.
-Integrate Azure Functions and Static Web Apps with a VNet that has access to the private endpoint.
-Configure DNS settings to resolve Cosmos DB’s hostname to its private IP.

2.Use Managed Identity for Authentication: Instead of relying on IP whitelisting, you can use Azure Managed Identity to authenticate Azure Functions and Static Web Apps with Cosmos DB. This eliminates the need for static IPs and allows secure access.

3.Consider Using Azure API Management as a Proxy:If direct access is problematic, you can introduce Azure API Management as an intermediary between your web app and Cosmos DB. This allows you to control access and apply security policies

4.Check Cosmos DB Role Assignments: Since you mentioned the Built-in Data Contributor role is missing, ensure that your Azure Functions and Static Web Apps have the correct RBAC permissions to access Cosmos DB.

5.If cost is a concern, consider using Azure App Service with VNet integration instead of Static Web Apps, as it provides more flexibility with networking.

I hope this information helps. Please do let us know if you have any further queries.