How to publicly access an Azure Web API which needs to access an On-Premise DB (Via ExpressRoute)?

Hello Everyone!

As you can see in the image, that's essentially the architecture I'm planning but I'm having some doubts. I need to create a publicly accessible API layer which also needs to access an On-Premise SQL database via Express Route. Express Route connection has already been established.

After doing a some digging, I found that in order to make the Web API access the on-premise database I need to integrate the App Service which is hosting the Web API using VNet integration with the virtual network connected with Express Route. However, I have a couple of questions.

1. Is VNet integration enough to establish a successful TCP 1433 communication between Web API and on-premise DB? If not please let me know what other services I should configure?
2. Will I lose public access to the web API? If so what would be the best way to make the Web API public?

Appreciate any help and thank you for taking the time!

1. You can use VNet integration, but you might also want to look at simply setting firewall restrictions on your DB. You can open up access to the DB for the IP ranges of your Azure App Service. Depending on the App Service Plan you're on, there is a list of 10 - 15 outbound IPs which you might want to whitelist. This gives your API access to the database while the database is still being protected from being public access.
2. If you want to make your API publicly accessible (at least on some routes) you need to open up your API to everyone. I think the best way to go would be to set up authorization for the routes you want to protect. For example with token/bearer authentication. This way, you make your API accessible, but you require authentication for some routes. You can handle the authentication in your Angular JS app, with something like Auth0 or other OpenID providers.