Hosting Multiple Static Web Apps on Azure - azure

I have multiple static web apps (5 to 6) that I need to host on Azure. I will be accessing the Web Apps like example.com/app1, example.com/app2 and so on; where each app after the slash is completely separate static web app. Given this requirements I have few questions
Can I host all the static Web apps in same storage account ? or do I need to create storage account for each static web app ?
Do I need Single Azure CDN for all those static web apps or should I be using CDN for each storage account separately ? I am aware we can use rules to redirect to right static web apps but creating one to one mapping of CDN with static web apps would have any cost implications ?
What could be the preferred way given the above requirements ?
Thanks

According to one MSFT's answer:
actually it's not possible to host multiple static website in one storage account. You should create a separate Azure Storage Account for each static website.
Although multiple static apps is not achievable, sub folder is achievable, which would also meet your need. You could check the link I post as a comment: Subfolders in static Azure hostings

Related

How to use Azure App Services domain for Static Web Apps?

I have an Azure App Services instance, which by default goes to https://myappservice.azurewebsites.net (not actually mine, but it's the same format). It's not a bad domain and a lot better than the sporadic randomized domains from Static Web Apps (https://lively-tree-randomletters.azurestaticapps.net).
Is there any way to switch the serverless website running on static web apps to also use the https://myappservice.azurewebsites.net domain?
Or is the only possible solution for hosting (1) react and (2) spring boot on the same domain, to buy one? Or this isn't possible at all?
(I want them to be on the same domain so I don't need to worry about CORS)
I think you could pull this off by using an Application Gateway. With the Application Gateway you can set up path-based rules so that you've got both your app service and your static website, but say yoursite.com/sprintBoot will be routed to your App Service and everything else on yoursite.com, to your static website.
See this article as an example: Create an application gateway with path-based routing rules using the Azure portal
Though it is up for debate if this is easier than worrying about CORS.

i need to redirect multiple domains to the same static web URL in azure in case of a full site down....can anyone advise

first off i want to thank you all for the amazing information on here, i have learnt so much!
so the issue i have is i need to create a static web page for when we have a whole site down, as we host general maintenance pages on word press.i need to have multiple domains redirected to this web site when this issue occurs. the way i was thinking of doing it , is create a storage account then add to a static website to that storage container. then place the web page in a CDN adding multiple domains. then adding a cname record in DNS pointing to that endpoint? would this work?
many thanks in advance
Unfortunately map multiple custom domains directly to storage accounts website is not currently supported
https://feedback.azure.com/forums/217298-storage/suggestions/955579-enable-multiple-custom-domains-for-storage-account
You can integrate a Storage Account static website with Azure CDN and map a custom domains.
https://learn.microsoft.com/en-us/azure/cdn/cdn-map-content-to-custom-domain?tabs=azure-dns%2Cazure-portal%2Cazure-portal-cleanup

Static web site on Storage Account & App Service

I've a conceptual question about Static web site on Storage Account & App Service.
My team have develop an Angular10 + ASP.NET Core (API) application. Our frontend (Angular10) only consumes our API , so the availability of our app depends on the availability of both, frontend + backend (our API will NOT be consumed by any other app). We don't have any latence issue or requirement as our final users are all in the same region. Our app must be consumed through HTTPS and with a specific name (CNAME).
When we deploy the app to Azure, my team decide to deploy it separately using a Store Account as static web site for Angular 10 and an AppService for the API as backend of our App.
As far I see on MS docs (here is the related article):
"App Service Static Web Apps is a great alternative to Azure Storage static website hosting and is also appropriate in cases where you don't require a web server to render content"
Because of we currently need an AppService to render content, i have some questions:
The app works but, is a correct arquitectural approach or is better only publish our app to an AppService?
There are any security/cost related/whatever topic that makes StaticWebSite + AppService approach better than only AppService deploy?
I think that this approach does not give us any facility or advantage. Instead of this, we have to configure more things on Azure to connect through SSL and to give a CNAME to our app and AppService deploy.
Please, can you give me your oppinion?
Thanks in advance
Best regards
Luis
The best approach would be to split out the SPA and API and host them separately. This creates a loose coupling between the applications giving you more flexibility around performance, scalability, and deployment.
The .NET Core API could be hosted on an Azure App Service, or could it even be refactored into running as a set of serverless Azure Functions? Converting it into functions would allow for auto scaling and a likely reduction in cost as you only pay when the function is running. It depends what the API methods are actually doing.
The SPA could be hosted as a static web site in a storage account blob container, and with a CDN endpoint mapped to it you can set it up to expose the SPA using HTTPS on a custom domain. Alternatively you could use an Azure Static Web App (although this is still in preview). This simplifies the deployment of SPAs as it will connect to your code repo and build and deploy the SPA for you when changes are committed to the repo.
That would of course mean configuring two separate CNAME subdomain records (assuming you wanted to the API to have a custom domain name), but that's not a big deal and ultimately a clearer separation on concerns.
Static Web Hosting: https://learn.microsoft.com/en-gb/azure/storage/blobs/storage-blob-static-website-how-to
Azure Static Web Apps: https://learn.microsoft.com/en-gb/azure/static-web-apps/overview
Static Hosting with Azure CDN: https://www.red-gate.com/simple-talk/cloud/azure/static-hosting-with-azure-blob-storage-and-azure-cdn/
Hosting option depends on your requirements.
Use case for using Static web site on Storage Account is a need to manipulate or process data on the server side, simply call the relevant managed Azure service like Azure Cognitive Services or leverage a web server of your own hosted on Azure Functions.
https://azure.microsoft.com/en-us/blog/static-websites-on-azure-storage-now-generally-available/
Your are Static web site makes a call to Azure WebApp API, so you should have Azure WebApp Plan.
Azure WebApp Plan can host both API and Static web site. Benefits of such scenario are:
Reduce cost as you can host multiple WebApps in same Azure WebApp Plan.
Azure WebApp gives you more hosting features versus Storage Account
Deployment can be implemented in same way for both Static web site and API

Change the URL of a Azure Static Web App from the randomly generated name

I created a Azure Static Web App in Azure. The process saved a workflow file in the Github repository and created a URL https://nice-beach-0253b8b10.azurestaticapps.net. How can I change this URL?
You currently can't change the azurestaticapps.net itself. However, you can configure a custom domain (using your own domain provider) or setup a CNAME record.
See more info: https://learn.microsoft.com/en-us/azure/static-web-apps/custom-domain?tabs=azure-dns
Unfortunately, you cannot pick and choose your app URLs. But if you hate only the nice-beach part, you can always create another Static Web App resource and hope for the best as Azure picks a random two-word phrase every time.
Static web apps are just another Azure app service and you should be able to set up custom domains as you normally do for any other app service.

Azure Static Website Hosting

Is there any way to host static website (HTML + CSS + JS) in Azure? Like we do Amazon S3 Static Website hosting, they charge only for storage.
UPDATE: 29-June-2018
It is now possible to host static websites in Azure Storage. You can read more about it here: https://learn.microsoft.com/en-gb/azure/storage/blobs/storage-blob-static-website
As of today, no. Azure doesn't have an equivalent of that. You can however host static sites as Web Apps and for free as well if you're comfortable with the restrictions with free tier.
It's not officially supported, but if you hosted your site in Azure Blob Storage's root container and made the container publicly accessible, you could probably achieve the same affect. You can even give the blob storage account a custom domain name.
Only downside is that you'll have to figure out a good deployment story. Two of your options are to use an FTP-like client such as CloudBerry to manually deploy your site, or write your own deployment script using the blob storage api
I found a way to host a static website in an Azure blob, using a subdomain and an http re-direct
I do the following
1) In Azure I create a storage account with a container ( called docs ) that has Blob access policy.
2) I upload my static website to the docs container using the storage explorer. This includes some PHP files in a sub folder.
3) In the DNS I set up a cname record for a subdomain ( called info say) with alias myblob.blob.core.windows.net ( where myblob is the name of my blob)
4) In the DNS I create an Http redirect for record to a file on the subdomain for www with url http://info.mydomainname.com/docs/index.html
5) In Azure I create a custom domain for info.mydomainname.com
My website then works however if someone knows the location of the PHP files then they can download them which means I must not store secrets in them.
I have asked if there is a work around here

Resources