Static Web App connecting to Database for MySQL flexible server

Question

I have an application written in Next.JS (using server-side-rendering / app router), on the back-end it communicates with a MySQL database (hosted on Azure).

During development, I set the MySQL server to be available publicly, but just from my IP address, which works fine.

I've now deployed this application to an Azure Static Web App, and changed the MySQL networking to also be available to the Static Web App, but it seems that I have to open access up publicly (or maybe just within the whole of azure).

I don't like the idea of the MySQL database being available externally (apart from through my dev machine).

After reading up a bit about this, I think I have a few options, but I don't know if there's a preferred 'best practice' option.

1. Keep it as I describe above, which leaves it open to all Azure Customers
2. In the Static Web App settings, it allows me to link to an existing database, does this get around the above issue?
3. Set up a private network/end point and grant access between the Web App and the MySQL database - I've tried this in the past, and never got it working

Is there another option I have? It seem like something that should be simple, i.e. I just want my MySQL database to be accessible to other resources in my Azure subscription/resource group and also for my office IP address.

Answer 1

Hello Rich S,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

I understand that you would like to securely connect your Next.js application hosted on Azure Static Web Apps to an Azure MySQL Flexible Server, while restricting access to only your application and office IP.

The below are a few options you will need to achieve your goal:

1. Make sure that your Static Web App is integrated with the VNet (using VNet integration for Azure Functions if your Static Web App has backend APIs) and configure NSGs and DNS correctly to route traffic through the private endpoint. The best practices is that you should use Azure Private DNS Zones to resolve the private IP of the MySQL server, and your Static Web App has proper permissions and routing to access the private endpoint.
2. Use managed identity to securely retrieve database credentials (stored in Key Vault), but pair it with network security methods like private endpoint.
3. Add firewall rules for your Static Web App's outbound IP address (found in the Azure portal) and your office IP and make sure you avoid using "Allow Azure services" if you want stricter control. Also, if your IP changes frequently (e.g., office has dynamic IPs), this may require frequent manual updates or automation.
4. Integrate Azure Private Link with your MySQL Flexible Server and make sure Static Web App is configured with VNet integration and Private Link can resolve MySQL through DNS.
5. Use this feature to manage your connection string securely but combine it with private endpoints or firewall rules for network security.

However, given your requirements, I will advise you to securely connect MySQL and Static Web Apps within a VNet and temporarily use firewall during testing but avoid leaving it as the long-term solution. Then, make sure you combine it with Key Vault and Managed Identity to store and access credentials securely.

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

---

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful.