Subhankar Sarkar

Information Technology Consultant, Solution architect, Software Engineer.

One Dollar Deployment – the inexpensive way of deploying Single Page App in Azure

  • Home
  • Blogs
  • One Dollar Deployment – the inexpensive way of deploying Single Page App in Azure

Cost effectively deploy Single Page Application (SPA) in Azure with just a Dollar

One Dollar Deployment

How are you deploying your static Single Page Application (SPA) in Azure today ?  

Two of most popular options widely available today are – either you go with creating an Azure Virtual Machine (IaaS) and deploy there or create an Azure App Service (PaaS). But are they cost effective ? How about you get an option where your cloud bills for your SPA will be within couple of Dollars only? or maybe within just a Dollar ?

Azure Storage Account’s Static Website Hosting is here to save a lot of your cloud bills. Lets see how you can leverage this concept for your SPA deployments in Azure.

What are you paying today?

Just a rough estimate on how much you might be paying today if you use the Basic configuration of Azure VM or an AppService –

Azure VM:

Configuration : 1 A0 (1 vCPU(s), 0.75 GB RAM) x 730 Hours; Windows – (OS Only); Pay as you go; 0 managed OS disks – S4, 100 transaction units

Cost / month : $13.19 + additional manual effort cost for setting up this as Web Server

AppService:

Configuration : Basic Tier; 1 B1 (1 Core(s), 1.75 GB RAM, 10 GB Storage) x 730 Hours; Windows OS

Cost/ month : $54.75​

What you should pay?

Question here is do you really need a Web Server to host your Static web application ? Have you ever tried to browse your static websites content from your local folder from a browser? Your SPA will still work except a vanity HTTP URL.

How about you get an option to mimic the similar behavior + a HTTP url to serve the website over the internet?

Azure Storage Account’s Static Website works somewhat similarly. Since storage is very cheap you get this deployment option in a negligible price in comparison to VM or AppService deployment.

So how much you should pay approximately ?

Storage Accounts:

Configuration : Block Blob Storage, General Purpose V2, LRS Redundancy, Hot Access Tier, 10 GB Capacity – Pay as you go, 1,000 Write operations, 1,000 List and Create Container Operations, 20,00,000 Read operations, 1,00,000 Archive High Priority Read, 1 Other operations. 1,000 GB Data Retrieval, 1,000 GB Archive High Priority Retrieval, 1,000 GB Data Write

Cost/ month : $1.02

Yess!!! You should pay only One Dollar for your Single Page Application Deployment in Azure.

But How?

From the cost perspective deploying Static SPA application in Azure Storage Account Blob Containers is a No Biainer. You just need to follow some simple steps to enable Static Website under Storage Account and deploy.

Enable Static Website in Storage Account

Create an Azure Storage Account with the configuration mentioned above (Block Blob Storage, General Purpose V2, LRS Redundancy, Hot Access Tier). Go to Configuration section in the blade and check whether the secure transfer is enabled or not. If not enable it.

Now you have to enable the most important thing – the Static Website. Look for or search with Static website in the Blade of the Storage Account. Enable static website. Once you enable it, you will get two URL, using which you can browse your static website once you deploy your site. You have to mention your index document name (case sensitive). I had an angular application, so in my case it was index.html. Similarly you can mention your error document path.

Enable Static Website

Now that you have got your https web url, you need to have a place (container) to deploy your static SPA application.

Go to Overview >> Containers  you will see a newly created container with name $web 

This is the future home of your Static SPA Website.

Deployment options for Static Website in Blob Storage

You have the following options available for deploying your static website contents in the blob container –

  • Azure CLI
  • Azure PowerShell module
  • AzCopy
  • Azure Storage Explorer
  • Visual Studio Code extension
  • Azure Pipelines – this is my preferred choice because I have CI/CD setup in my Azure DevOps already. 

Deploy your Static SPA using Azure Release Pipeline

Here I’m working with an Angular SPA deployment. I have the following build pipeline setup –

  • I want to do two things in the Release Pipeline’s deployment task
  1.  Clean the existing files from the container using Azure CLI task
  2. Copy the files from the build artifact directory using Azure File Copy task to the Blob container ($web)

Cleaning the Container post deployment

  • Use Inline script and as Script Location
  • Add the following script in the Inline script section

az storage blob delete-batch --account-name YourStorageAccountname --source $web

Deploy the static files using Az Copy

In this task you have to do the following –

  • Set Source as your build artifacts drop location
  • Choose Destination Type as Azure Blob
  • Your Storage Account Name as RM Storage Account
  • Container name should be $web
  • In the output section mention the storage container URI as the URL you have got while enabling the static website option
  • Create a SAS token for your Storage Account and use it in Storage Container SAS Token section. You should create a pipeline variable to store this token in some secure location and use it from there.

That’s It. Now if you run your Release Pipeline it should first clean the target Blob Container and then copy your static websites files to the $web container. Once that is done you can check the copied file contents from Azure Storage Explorer.

storage explorer

And its done!!! Browse your inexpensive deployment

Now that your deployment is done, lets browse the site. Open a browser and use the URL you have got during enabling static website in the storage account similar to this –
https://YourStorageAccountName.Zone(id).web.core.windows.net/

Once your SPA is loaded in your browser and started working as expected then you know you just did a One Dollar Deployment of your Single Page Application in Azure.

Enjoy the extra Cash that you just saved.

What next?

Browsing with the Azure provided default URL may not be the ideal way of browsing your site. You may want to have a custom domain for your site. You may also want to serve your website using a CDN. 

At the time of writing this post Custom Domain with HTTPS endpoint for Azure Storage is not supported. As an alternative this can be achieved using Azure CDN to access blobs using custom domain over HTTPS. Here is a Microsoft official documentation for setting up custom domain over HTTPS using CDN. This whole process is nicely demoed by Scott Hanselman in this video.

Wrap up

In my experience shifting to Static Website Deployment in Blob Container resulted a significant savings in cloud billing.  I was able to lift and shift all my existing SPA built on Angular from Azure AppService to Storage Accounts Blob container without compromising performance or hitting any issues.

In my situation the Cloud billing for Single Page Application in Blob Container never crossed $1 mark per month. I want to know more from the Azure user community about their experience and total savings in the cloud billing with this approach.

This approach of deploying Single Page Application in Azure Blob Container with Static website option was really a One Dollar Deployment for me. How about you?

Search

Recent Blog Posts

  • The Plain and Simple Way to Create SPN and Service Connection for Azure DevOps Pipelines July 18, 2021
  • .NET 6 Azure Web App Deployment using Azure DevOps Pipelines July 3, 2021
  • Hosting Free Website with Serverless backend on Azure Static Web App May 16, 2021
  • Inner Source –  the key to improving software asset reusability April 15, 2021
  • Visual Studio Codespaces – Bringing the Power of Cloud to Your Development Environment October 24, 2020
  • Document Versioning with Azure Blob Storage September 26, 2020
  • One Dollar Deployment – the inexpensive way of deploying Single Page App in Azure December 1, 2019
  • .NET Core WebJob Console app CI/CD using Azure DevOps Pipelines July 20, 2019
  • WSL2 for Dockerized .NET Core application June 17, 2019
  • Azure DevOps – manage your application lifecycle in cloud September 30, 2018
  • Make your .NET Core HTTP endpoint to react to Custom Azure Event Grid Events July 21, 2018
  • SQL Information Protection – why should you care and what you can do about it? March 25, 2018
  • SQL Server on Linux – Install and use it with SQL Operations Studio December 24, 2017
  • Windows Subsystem for Linux – build ASP.NET Core MVC web app in Linux December 12, 2017
  • Run native Linux bash on Windows 10 December 10, 2017
  • Microsoft Loves Linux – what it means to you and your clients? December 4, 2017

My twitter feed

Subhankar SarkarFollow

Information Technology Consultant, Solution Architect, a Coffee person with a lot of enthusiasm for Tech. RT/Like/Shares are not endorsement. Views are my own.

Subhankar Sarkar
Retweet on TwitterSubhankar Sarkar Retweeted
Gartner_incGartner@Gartner_inc·
31 Dec 2021

We’re reinventing the future of work every day and it’s time to be more intentional about it — whether employees are working at home, remotely, in reimagined on-site locations or some combination of the 3. Visit our #FutureOfWork resource center here: https://gtnr.it/3JzwDiU

Reply on Twitter 1476957099343200265Retweet on Twitter 14769570993432002653Like on Twitter 14769570993432002656Twitter 1476957099343200265
Retweet on TwitterSubhankar Sarkar Retweeted
ddskierDeeDee Walsh 💻⛷🍩@ddskier·
22 Dec 2021

Convert #ASPdotNET Web Forms to Native Web App https://hubs.li/Q010BGZ10 cc: @csharpfritz #dotnetconf #dotnet

Reply on Twitter 1473665379478212609Retweet on Twitter 14736653794782126094Like on Twitter 14736653794782126093Twitter 1473665379478212609
Retweet on TwitterSubhankar Sarkar Retweeted
SoniaCuffSonia Cuff@SoniaCuff·
19 Dec 2021

OMG automated key rotation (preview) in #Azure Key Vault!

https://docs.microsoft.com/azure/key-vault/keys/how-to-configure-key-rotation?WT.mc_id=modinfra-0000-socuff

#security #secrets #KeyManagement #AzOps #Microsoft #secOps

Reply on Twitter 1472705493088944130Retweet on Twitter 147270549308894413029Like on Twitter 147270549308894413094Twitter 1472705493088944130
Retweet on TwitterSubhankar Sarkar Retweeted
MLRepositoriesAwesome Machine Learning Repositories@MLRepositories·
14 Dec 2021

spark: .NET for Apache® Spark™ makes Apache Spark™ easily accessible to .NET developers.
Lang: C#
⭐️ 1719
#MachineLearning
Author: @dotnetfdn
https://github.com/dotnet/spark

Reply on Twitter 1470825261277003790Retweet on Twitter 14708252612770037907Like on Twitter 147082526127700379020Twitter 1470825261277003790
Retweet on TwitterSubhankar Sarkar Retweeted
azure_pirateAzure Pirate 🏴‍☠️@azure_pirate·
10 Dec 2021

Ahoy Thar Swashbuckler!

New YouTube post from @NTFAQGuy called: Native SFTP in Microsoft Azure with Azure Storage

Check it out it here: https://youtube.com/watch?v=-0PPA0tJLKA

#Azure #AzureFamily #CloudFamily #AzurePirate

Reply on Twitter 1469327866169020416Retweet on Twitter 14693278661690204163Like on Twitter 14693278661690204161Twitter 1469327866169020416
Load More...

Follow Me

  • LinkedIn
  • Twitter
  • GitHub
  • reddit
Designed and developed by Subhankar Sarkar