Skip to main content

How to build a Scalable, Secure, and Performant Umbraco Website on Azure

Umbraco is a highly flexible, open-source content management system (CMS) that allows developers to easily build powerful websites. Hosting Umbraco websites on Microsoft Azure provides numerous benefits, such as scalability, security, and seamless integration with other Azure services. 

In this guide, we’ll explore one of the recommended architectures for hosting an Umbraco website on Azure, including key services, configurations, and best practices to ensure performance, reliability, and ease of management.

Architecture Diagram and Breakdown of Primary Azure Components

Microsoft Azure is a robust cloud platform with a broad set of services that align well with the needs of a modern web application. Azure can offer hosting, storage, monitoring, security, and automatic scaling for an Umbraco website, among other features. With the right architecture, Azure enables Umbraco websites to serve traffic seamlessly, adapt to changing loads, and provide a secure environment for content management.

Here’s a breakdown of the primary components of an optimized Umbraco setup on Azure:

  1. One Resource Group for each environment, i.e. Dev, UAT and Production resource groups.
  2. Two App Service Plans in each Resource Group, one for hosting the Umbraco back office website on an Azure App Service and one for hosting the Umbraco front-end website on another Azure App Service.
  3. One Azure SQL Server and Azure SQL Database for content storage for both Umbraco backoffice and front-end websites
  4. Azure Blob Storage for media and forms storage
  5. Cloudflare or Azure Front Door CDN for performance and security improvements for the front-end website
  6. Two Application Insights, one for monitoring and diagnostics of the Umbraco backoffice website, and one for monitoring and diagnostics of the Front-end website
  7. Azure B2C or a similar service for Front-end login.
  8. Azure AD or Azure B2C for Umbraco backoffice login and extra protection for the Umbraco backoffice login. 



Two Azure App Service Plans to Host Umbraco Backoffice and Front-End Websites

At a high level, an Azure App Service Plan is a container in which your web applications run and it is used to determine the Azure resources available for your applications and their boundaries. The App Service Plan defines what specification of hardware your app runs on, and how many servers you have. Your billing depends on your chosen plan and usage and since Umbraco v9, you can choose a Linux or Windows plan for your Umbraco website.

Once we create two Azure App Service Plans, we then need to create our App Services, one for hosting the Umbraco back office website and one for hosting the Umbraco front-end website. The benefits of this approach include the following;

  • We can use fewer Azure resources for the Umbraco backoffice website as in most cases, only a limited number of Umbraco users need to access the backoffice website. Using fewer resources promotes sustainability while reducing costs.
  • We can use the backoffice App service plan to handle some other tasks, like background running tasks without impacting the front-end website performance.
  • We can make sure that we only have one Umbraco backoffice website instance as currently, the Umbraco backoffice website requires to work on a single instance, otherwise, you might see some mostly caching-related issues.
  • We can implement Azure Active Directory (Azure AD) in front of the Umbraco backoffice app service to ensure that only authenticated users can access the Umbraco login screen and subsequently log in to the Umbraco backoffice. Additionally, we can utilize Azure Active Directory B2C to enable Umbraco users to log in.
  • This approach also includes creating two Azure Application Insights, one for Umbraco backoffice and one for Umbraco front-end websites. Application Insights collects telemetry about your apps, including web server telemetry, web page telemetry, and performance counters. This data can be used to monitor your backoffice and front-end apps' performances, health, and usage independently.
  • For the Umbraco front-end website, we can scale both up and out the Azure resources as needed without affecting the Umbraco backoffice server. This flexibility allows us to allocate additional Azure resources when necessary. More importantly, we can establish dynamic rules to scale out the front-end website to multiple instances, thereby enhancing its availability and performance.
  • We can use Azure Active Directory B2C for secure access to the Umbraco front-end website, enforcing multi-factor authentication (MFA) for added security.
  • Since we have a separate app service for our Umbraco front-end website, we can implement further security and performance improvements by setting up a Content Delivery Network (CDN) specifically for the front-end. An ideal solution would involve using either Cloudflare CDN or Azure Front Door.
  • Additionally, since the Umbraco backoffice operates on a distinct site, we should restrict access to it from the front-end website. If someone attempts to access the Umbraco backoffice using the front-end URL, we should simply return a 404 error.

Azure SQL Database

In this approach, we need just one SQL Server and one Umbraco SQL database that is used by both Umbraco backoffice and front-end websites.

Azure Blob Storage for Media Files

Umbraco recommends Azure Blob Storage to store media such as images and documents. Umbraco integrates seamlessly with Blob Storage for media files, making it easy to offload media from the web server, which enhances performance and scalability. 

Azure Blob Storage offers a cost-effective and scalable solution for storing media and forms and makes it much easier to move them between different environments. 

Cloudflare or Azure Front Door CDN to Improve Performance and Security

For faster, more responsive and secure websites, Cloudflare or Azure Front Door Content Delivery Networks (CDN) can help distribute content globally. You can check the following documents for details.

Other Considerations for Umbraco on Azure

Depending on your project requirements and budget, there are limitless options to make your system more robust and secure. You can consider additional security best practices, like using SSL/TLS Encryption, or Network Security via a Virtual Network and Application Gateway to control and monitor inbound traffic to your web apps.

You can consider things like (full-page) caching and image optimization options to reduce the load on the SQL database and speed up response times.

In terms of backups and disaster recovery, you can enable automated backups for Azure SQL databases, including long-term retention if required for compliance purposes. You can use geo-redundant storage for Blob Storage to ensure that media files are accessible even during regional outages. Mentioning regional outages, you can create backup resource groups for your front-end website using different regions of Azure. You can of course consider static website generation for your front-end websites, too, using something like Astro or Next JS and Umbraco Content Delivery API.

Conclusion

Azure provides an excellent foundation for hosting an Umbraco website. Using multiple App Service plans and the combination of managed services, scalability options, and robust security features ensures that your website is secure, highly available, and can scale to meet demand. By leveraging the services outlined above, Umbraco administrators and developers can focus on creating a great content experience, confident that Azure’s architecture will support the application’s needs as it grows.

By following best practices and implementing this architecture, you can create a high-performance, resilient Umbraco website that not only meets today’s requirements but is prepared to scale in the future.

Comments

Popular posts from this blog

How to fix Git push error: "RPC failed; curl 56 HTTP/2 stream 7 was reset send-pack: unexpected disconnect while reading sideband packet fatal: the remote end hung up unexpectedly"

Problem Today I saw the following problem when I tried to push my changes to a Git server after doing some work for upgrading an Umbraco v7 project to v8.18.8.  Possible reasons After some investigations, it seems like this could be because of the following reasons; Git is not happy with the amount of changes that are being pushed into the server.  There are possible limitations on the server about the size/amount of files that you can push. Your internet connection is not good and stable enough. Your Git client's version is old. Solution options For me, the easiest option was connecting to another Wifi and trying again. Apparently, this option helped quite a few people, so it is worth giving it a try. Unfortunately, it didn't work for me. A bad internet connection wasn't an option for me either, as my internet is pretty fast (500 Mbps). Similarly, my Git client version was the latest version (git version 2.41.0.windows.3).  On StackOverflow, there were a lot of recommendat

How to use JQuery Ajax Methods for Async ASP.NET MVC Action Methods

Making repeatedly calls to async methods can be a nightmare. In this case, it makes sense to use 2 ajax methods, instead of one. Here is a simple solution to overcome this problem. See that  ajaxcalls   is emptied after the success response for the first ajax call and then the second ajax method is used to make one single call to the async action method. Hope it helps. View: @section Scripts{     < script type ="text/javascript">         var smartDebitObject = new Object();         smartDebitObject.MembershipNumber = $( "#MembershipNumber" ).val();         smartDebitObject.ProfileId = $( "#ProfileId" ).val();         smartDebitObject.FirstName = $( "#FirstName" ).val();         smartDebitObject.LastName = $( "#LastName" ).val();         smartDebitObject.AddressLine1 = $( "#AddressLine1" ).val();         smartDebitObject.Postcode = $( "#Postcode" ).val();         smartDebitObject

How to fix "Microsoft SQL Error SQL71564: Error validating element [USERNAME]: The element [USERNAME] has been orphaned from its login and cannot be deployed."

I needed to export a database in BACPAC format today in order to restore it somewhere else, and I encountered the following error. To resolve this issue, I deleted all of the users mentioned in the error log. After successfully creating the BACPAC file, I used it to create a new database with no problems. Error: TITLE: Microsoft SQL Server Management Studio ------------------------------ One or more unsupported elements were found in the schema used as part of a data package. Error SQL71564: Error validating element [USER1]: The element [USER1] has been orphaned from its login and cannot be deployed. Error SQL71564: Error validating element [USER2]: The element [USER2] has been orphaned from its login and cannot be deployed. Error SQL71564: Error validating element [USER3]: The element [USER3] has been orphaned from its login and cannot be deployed. Error SQL71564: Error validating element [USER4]: The element [USER4] has been orphaned from its login and cannot be deployed. Error SQL71