Configure Azure Blob for Umbraco Media

Introduction

Here is the step-by-step guide to configuring the Umbraco website to utilize Azure Blob Storage for media.

Why do We need to Use Azure Blob Storage for Your Umbraco Meda?

Moving content in Umbraco can be a pain, especially when it comes to media. You have to move it between different environments, like development, staging, and production. It’s a necessary part of content management, but it can take up a lot of time. The good news is that there’s a way to make it easier- using Azure blob storage as a one-stop shop for all your media hosting needs.

Points to consider- while we plan to use Azure Blob Storage for your Umbraco Media, what important factors should you keep in mind during your development process?

• Consider the cost. Although it’s not necessarily expensive, it’s not free either. Microsoft provides a pricing calculator.
• Ensure you have internet access if you need to use the media in your local environment.
• If you have multiple developers working on the project with their databases, you may need to configure separate blob storage accounts and config transformations. But it will increase the cost; use available Umbraco tools/packages such as uSync or Umbraco deploy. uSync has a free version so developers can share their changes(Umbraco data[content, media, doctype, datatype, etc.]).

Prerequisite

Prerequisite to set up Azure blob storage for your Umbraco 11 website’s media.

Follow these steps

• Make sure you’ve installed Umbraco on your website; if not, check the official documentation.
• To see your media on the website, you can install a starter kit, but it’s optional(either start from scratch or install a starter kit).
• Once the starter kit is installed, then run the project, log in to the back office, go to the media section, and there we can see the media created from the starter kit, this media is now loaded from the local /media folder.

Configure Azure Resources

Let’s set up Azure Resources for our Umbraco website! We’ll start by configuring a resource group, storage account, and storage container. These resources are essential for our website media to work properly.

Create a Resource Group

Are you ready to create a resource group in Azure? First, log in to the Azure portal with your Microsoft account. Once you’re in, you’ll see a “Create a resource” button. Click on “Resource groups” and then “Create” to get started.

When creating a resource group, you’ll need to do a few things on the “Create a resource group” screen. Choose your subscription, give your resource group a name, and pick a region. That’s it!

Once you’ve set up the basic resources, click “Review + create”. Creating a resource group only takes a few seconds. Once that’s done, we can create a storage account to store our Umbraco media.

Create Storage Account

Once you have your resource group configured, the next step is to add a storage account to that same resource group.

From the left portal menu, select Storage Accounts to display a list of your storage accounts. If the portal menu isn’t visible, click the menu button to toggle it on.

On the Storage accounts page, select Create.

When you create a storage account in Azure, you’ll need to provide some more information, just like you did for the resource group. Start by selecting your subscription and the resource group you previously created. Then, give your storage account a name and choose a region. Remember to use the same region as your resource group for consistency. As for the performance and redundancy settings, you can leave them as the default Standard and Geo-redundant storage (GRS) options unless you have specific needs. Once you’ve filled in your storage account details, click “Review” to move on.

Confirm your details on the Review + Create tab and click Create.

Azure is working on setting up your new storage account, and you’ll receive a notification on your screen once it’s done. When it’s ready, we can move on to creating a Storage Container.

Create Storage Container

After you have your storage account set up.

In the portal navigation pane on the left side of the screen, select Storage Accounts and choose a storage account. If the navigation pane isn’t visible, select the menu button to toggle its visibility.

• In the navigation pane for the storage account, scroll to the Data storage section and select Containers.
• Within the Containers pane, select the + Container button to open the New Container pane.
• Within the New Container pane, provide a Name for your new container. The container name must be lowercase, must start with a letter or number, and can include only letters, numbers, and the dash (-) character. For more information about container and blob names, see Naming and referencing containers, blobs, and metadata.
• Set the Public access level for the container. Set Blob(anonymous read access for blobs only)
• Select Create to create the container.
  

Save the connection string for our storage container

Now that we’ve set up the necessary resources in Azure, we need to grab the connection string for our storage container. To do this, head over to the Access keys section in the sidebar below Security + Networking. Once there, you can show and copy the connection string for your storage container.

Let’s Configure Umbraco Solution

We’re done with the Azure setup. It’s time to move on to configuring our Umbraco solution.

Install Umbraco.StorageProviders.AzureBlob NuGet Package

Using the NuGet package manager or dotnet CLI, you will need to install the Umbraco.StorageProviders.AzureBlob package.

Install via CLI

dotnet and add package Umbraco.StorageProviders.AzureBlob

Install via Nuget package manager

Add Connection String to AppSettings.json

Next, we need to add the connection string and the name of the container to the appsettings.json file.

Update ConfigureServices Method in Startup.cs

One final step! Let’s update the ConfigureServices method in the startup.cs file. We need to add “.AddAzureBlobMediaFileSystem()” before the “.Build()” is called. Here’s an example.

public void ConfigureServices(IServiceCollection services)
{
    services.AddUmbraco(_env, _config)
        .AddBackOffice()
        .AddWebsite()
        .AddComposers()
        .AddAzureBlobMediaFileSystem()
        .Build();
}

Add Media To Your Umbaco Website

Exciting stuff! With everything configured, we’re all set to add some media to our website. Simply run the project, log in to the backoffice, go to the Media section, and upload an image. That’s it!

After uploading media to the Umbraco backoffice, you might notice that the media folder on your computer is empty. But don’t worry; you can easily view your media files using a free tool called Azure Storage Explorer. Simply download the tool and login with your Azure account. Remember to keep your connection string handy, as you’ll need it.

Alternatively, you can open Azure portal > Storage account > Go to created storage account > Containers (under Data Storage) > Open Container configure in the appsettings.json file; for this exercise, the container name is umbracomediacontainer see the below image, open the container umbracomediacontainer and you can see media folders, and inside media folders, we can see other folders with alphanumeric combination, inside those folders we can see physical media files.

Github repo here- https://github.com/dKumarmj/UmbracoDemoAzureMedia

Summary

In this article, I went through several pieces of documentation to help you Configure Azure Blob for Umbraco Media. Hope you found this article helpful. Should you have any questions, you are always welcome to reach out to [email protected].