Communication between Static Web App and App Service back-end

Roberto Garavaglia 21 Reputation points
2022-04-03T14:17:15.823+00:00

Hello!
I'm going to create an architecture in Azure for a web site that has public pages and reserved page only for authenticated users.
The web app is developed with React and use api from a netcore web api used also by a mobile App.
I thought to host the web app in an Azure static web app and the back-end in an App service.
By a DevOps Azure repos and pipeline I have the web app and back-end online. My doubt and problems are:

  1. Is it correct separating the Front-end in a Static web app and back-end in the App Service?
  2. Azure assigned two distinct URL and public IP address to Static web app and App service. I cannot figure out how the front-end and back-end can have the same entry-point from the public.

I realize the questions are confusing but I'm confused too. Can you help me clarify?
Thank you!

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
762 questions
0 comments
Accepted answer
  1. Takahito Iwasa 4,841 Reputation points MVP
    2022-04-03T22:20:30.25+00:00

    Hi, @Roberto Garavaglia

    Static apps are correct because they can't do dynamic processing. Separation can also use Azure Functions in addition to App Serivce. In addition to separating as pages, there is also a method of incorporating dynamic behavior into a static site by calling a dynamic API server from a static site with a client-side script using an architecture called SPA (Single Page Application).

    By default it does not have the same entry point. If you want to have the same entry point, it is common to use a DNS server or L7 load balancer with a custom domain.
    The simplest way is to use a subdomain, for example, to resolve "static.example.com" to a static website and "dynamic.example.com" to a dynamic website.
    Alternatively, the L7 load balancer allows path-based routing in the same domain.
    For example, "example.com/static" will be routed to a static website and "example.com/dynamyc" will be routed to a dynamic website. The L7 load balancer can use Azure Application Gateway and Azure Front Door.

    1 person found this answer helpful.
    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Roberto Garavaglia 21 Reputation points
    2022-04-05T10:24:05.033+00:00

    Thank you @Takahitolwasa, you have given me the information necessary to study and implement in the correct direction.
    Regards!
    Roberto

    0 comments