Deploying an ASP.NET Blazor App to Azure using Octopus Deploy – Part 6 – Create a Release

What we did last time

In this series of posts we’re running through how to get Octopus Deploy setup, along with the required Azure Services, in order to deploy an ASP.NET Blazor app to Dev, Staging and Production environments.

In the previous post we uploaded our Package to Octopus Deploy, configured some Project Variables, then created and configured out Deployment Process.

What we’re doing this time

In this post we’ll Deploy our Blazor WebAssembly application to Azure using an Octopus Deploy Release. We can then view the results by navigating to our deployed Web App.

Contents

Part 1 – Environments and Deployment Targets
Part 2 – Linking Azure
Part 3 – Create Azure Web Apps + Staging and Production Deployment Targets
Part 4 – Create and Package a Blazor WebAssembly App
Part 5 – Octopus Deploy Projects, Variables and Processes
Part 6 – Create a Release
Part 7 – Send a Notification to Microsoft Teams

Prerequisites

Once again, for this tutorial you’ll need the following;

Octopus Deploy – Creating a Release

Now that we have our Deployment Process set up, it’s time to try creating a Release!

An Octopus Deploy Release is the process of deploying our Binaries to a Deployment location using the Deployment Process we created earlier.

We’ve specified three Environments to deploy to each with it’s own Azure Web App, and we’ll deploy our application to each Environment and view the results.

On the left of our project we’ll see a blue “CREATE RELEASE” button;

Octopus Deploy – Project – Create Release button

If we hit the “CREATE RELEASE BUTTON”, we’ll be taken to the Release page;

Octopus Deploy – Create Release Infrormation

Here we’re able to drill in to some of the details about our release. We can see that this is Release Version 0.0.1 at the top.

We’re also shown that we’re releasing version 1.0.0 of our package – This is the version we uploaded earlier of course. If we had more than one package uploaded, we’d be able to deploy different versions from the selection;

Octopus Deploy – Create Release – Choose Package Version

If we hit the green “SAVE” button in the top right of the page, we’ll be taken to the Release page;

Octopus Deploy – Create Release – Release Page

Here we can see the Progression of our release, we can see that Development is the next Environment we’re releasing to, indicated by the blue arrow to the left of the “Development” item in the “Lifecycle” section.

If we scroll down, we can also see a snapshot of the variables when this release was created;

Octopus Deploy – Create Release – Variable Snapshot

We can now begin the process of deploying our application to Development by pressing the green “DEPLOY TO DEVELOPMENT” button in the top right of the page;

Octopus Deploy – Deploy Release – Preview

We’re now shown a preview of the release, where we can begin the Deployment by hitting the green “DEPLOY” button in the top right hand corner of the screen;

Octopus Deploy – Deploy in Progress

We’re then shown the Release Task Progress screen, where each task has it’s progress indicated in the “Task Progress” area.

Completed tasks will be shown with a green tick and tasks that are progressing will be shown with a spinner.

We can click into any of these items to view the detailed logs;

Octopus Deploy – Deploy Complete – Deployment link

We can see our deployment is complete and we’re shown the log relating to the deployment/

We can click the link at the bottom of the log to view our deployment and check that everything has worked correctly;

Octopus Deploy – Blazor App Deployed

We can now see our Blazor App, along with a 50px “Configuration Example” H1 Header at the top of the page.

Deploy to Staging

Now that we have Development up and running, let’s deploy our app to Staging and Production.

The simplest method is to click the green “DEPLOY TO STAGING” button.

However, if you’ve moved away from that page, we can return to our Octopus Deploy Project Overview page by navigating to Projects and selecting our Project, we’ll see the overview of the release process for our project;

Octopus Deploy – Project Overview – Releases

We can see that we’ve released to Development, and there’s a “DEPLOY” button in the Staging Column.

Clicking the “DEPLOY” button will take us through the same process as Development;

Octopus Deploy – Preview Staging Deployment

Hitting the Deploy Button again begin the deployment to our Staging Environment;

Octopus Deploy – Deploying to Staging

Once again, we can examine the logs;

Octopus Deploy – Deployed to Staging

We can once again click on the link at the bottom of the logs to open our Staging Website;

We can then see our teeny tiny 10px font size “Configuration Example” H1 Header at the top of the page.

Deploy to Production

If we return to our Octopus Deploy page, we can now Deploy our app to Production by hitting the green “DEPLOY TO PRODUCTION” button at the top of the page;

Octopus Deploy – Deployed to Production Button

This process will be slightly different as we’ll now be taken through our Manual Intervention Step. We can see on the Deploy overview page for this release that we now have two steps rather than one;

Octopus Deploy – Deploy to Production – 2 Steps

If we now press the green “DEPLOY” button in the top right we’ll be taken to the Deployment page;

Octopus Deploy – Manual Intervention Required Step

For this Production set, we’re now requested to Approve this Deployment. If we click the green “ASSIGN TO ME” button, we can enter some release notes;

Octopus Deploy – Manual Intervention – Enter Release Notes

After we’ve entered some notes, we can hit the “PROCEED” button and the rest of the Deployment will continue after a few seconds;

Octopus Deploy – Deploying to Production

Once again, when the deployment has completed, we can drill into the logs;

Once again we can click on the link to view the result in Production with it’s huge 100px H1 Header;

Octopus Deploy – Deployed to Production Result

Next Time…

In the next post we’ll learn how to configure Octopus Deploy to send notifications to Microsoft Teams when a Deploy has completed.

You can check that post out here.