azureazure-web-app-serviceazure-virtual-networkvnet

Azure N-Tier application architecture not working with App Service Container deployment


I'm developing an application in Azure that needs to have the following requirements:

(below is an indicative picture how it is currently implemented)

Now I found the exact tutorial on how to do this : https://learn.microsoft.com/en-us/azure/app-service/tutorial-secure-ntier-app and implemented it exactly as is except the app services.

In addition I also set WEBSITE_VNET_ROUTE_ALL and WEBSITE_DNS_SERVER variables.

Now my problem is the following :

root@f9ce3583a969:/home# wget https://webapp-ntier-api.azurewebsites.net
--2024-09-15 11:17:16--  https://webapp-ntier-api.azurewebsites.net/
Resolving webapp-ntier-api.azurewebsites.net (webapp-ntier-api.azurewebsites.net)... 10.0.1.4
Connecting to webapp-ntier-api.azurewebsites.net (webapp-api-ntier-002.azurewebsites.net)|10.0.1.4|:443... connected.
nslookup webapp-ntier-api.azurewebsites.net
Server:         127.0.0.11
Address:        127.0.0.11#53

Non-authoritative answer:
webapp-ntier-api.azurewebsites.net  canonical name = webapp-ntier-api.privatelink.azurewebsites.net.
Name:   webapp-ntier-api.privatelink.azurewebsites.net
Address: 10.0.1.4

So that implies that the traffic is not going through the azure network but rather publicly.

The only difference in the tutorial is that they use App Services with Code Deployment and I'm using Container deployments.

Only when I go through the API App Service > Networking and enable public network access the API call works.

UI deployment: https://webapp-ntier-ui.azurewebsites.net API deployment https://webapp-ntier-api.azurewebsites.net

Does anyone see a problem with this or knows if there is indeed a difference between docker and code deployments on network level because I've tried a lot of things and none of them seem to do anything

enter image description here


Solution

  • Jens, please, be aware of different things.

    First, it is important to understand that your API must be publicly accesible in order to be able to be reachable from your SPA. Your pages are running in your browser, and you are performing the API call from your browser: there is no way for your browser to interact with your API unless it is publicly accesible.

    On the other hand, the CORS error is motivated always for the configuration of your server: your server is the only one that must define the origins that could interact with it. As a consequence, please, be sure that the public URL of your UI is configured as an allowed domain in your server CORS configuration.

    Having said that, sometimes you face a CORS error but due to the response received by the Azure load balancers, it is not a true error; again, opening your API probably will solve this problem.

    A last word; when I say publicly accesible I don't mean open to the internet: it is a possibility, if you wish, but you can restrict the access to your application to a certain ip ranges by adjusting the firewall rules of your app service. For example, you can temporarily restrict the access to your application from your home.