Featured image of post Reflections

Reflections

A final look back at the project seeing how far it's come and reviewing the final costs given the deviations from the original plan.

This final post in the series sees us come to the end of the journey for this project. Over the course of this series we’ve deployed a web app, developed an API and a front end, integrated some user management and customised various aspects of the Azure services to make them fit the look & feel of our application. Let’s take a quick look back at what we’ve done and where we ended up.

Looking back

Thinking back to the first post in this series I set out to see what it would take to deploy a typical 3-tiered web app, in Azure, on a very tight budget. After looking at the various services that would be needed, this is the architecture I thought we would need.

The original design of the solution

Up to a point, this is how the infrastructure was looking. Our first deviation came when we customised the pages used by Azure AD B2C and required somewhere to host our custom html pages, which saw the introduction of a Storage Account. Continuing with Azure AD B2C customisations we then customised the domain to stop using b2clogin.com and use auth.adamrice.dev. This required the introduction of Azure Front Door. The final deviation from the original plan came when we customised the verification emails sent out to users. Initially, we configured this to use a third party service called MailJet. Not happy with the additional cost this would bring, plus the fact it’s a dependency outside Azure we replaced that with a Function App, Storage Account, and Azure Communication Services. This left our architecture finally looking something like this:

The design of what was actually built

There’s no particular reason for those two storage accounts being separate. In fact, if I get time I’ll merge them and just use separate containers within the one storage account to separate the different resources.

It’s been an enjoyable project and I’ve learned lots. Particularly around Azure AD B2C and the discovery of Azure Communication Services has been a great bonus too. I’ve only scratched the surface of what ACS can do, so I’d love to spend some time looking at it in more detail in future.

Cost Management

One of the principle aims of the project was cost management and delivering this on a very tight budget. Below is a table showing an estimated cost of each service.

Component Azure Service Price
Front End & API Static Web App £7
Database Cosmos DB Free
Identity Management Azure AD B2C Free
Content Delivery Azure Front Door £27
Verification Emails (delivery) Azure Communication Services £1
Verification Emails (processing) Function App Free
Content Hosting Storage Account £0.01

Since the initial post in the series we saw the addition of Front Door, which, compared to the other costs, is a massive addition of £27/mth. The rest of the services that we added along the way contribute negligible additional cost. I added a nominal cost of £1 for Azure Communication Services to cover the cost of sending 5,000 emails per month. The Function App that handles the creation of the emails is running on a consumption plan which has a monthly free grant of 1 million requests and 400,000 GB-s of resource consumption per month, which I’m confident should be adequate for our little demo app. The Storage Accounts hosting the html content for Azure AD B2C custom policies and the email template are tiny and cost almost nothing.

With the unfortunate exception of Front Door, it’s looks like it’s possible to launch a typical 3-tier web application on Azure with very little ongoing cost.

Look to the future

I opened by saying this is end of this series. While I feel that this series of posts has answered the questions I initially set out to answer, I don’t think I’m finished with this project just yet. Firstly, I’d like to integrate with a payment processor such as Stripe. I’d also like to look more into the custom policies in Azure AD B2C and build out more to handle a profile editing flow and allow the user to delete their account & data. Should I find the time to do such things I’ll probably write about them in separate, standalone posts, rather than continuing this series.

And with that, if you’re still reading this far, thanks for sticking with me. If you want to take a look at the demo app please do. You can find a live demo at https://howdo.adamrice.dev and all of the code is available on GitHub at https://github.com/arice2358/sample-app.