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.
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
Once again, for this tutorial you’ll need the following;
- An Azure Subscription
- Either a Cloud Hosted Octopus Deploy Environment or…
- … If you’re self hosting Octopus Deploy, a local SQL Server instance.
- The .NET 5 SDK
- Visual Studio Code
- For Teams Notifications – A Teams Environment with Admin access
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;
If we hit the “CREATE RELEASE BUTTON”, we’ll be taken to the Release page;
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;
If we hit the green “SAVE” button in the top right of the page, we’ll be taken to the 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;
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;
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;
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;
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;
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;
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;
Hitting the Deploy Button again begin the deployment to our Staging Environment;
Once again, we can examine the logs;
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;
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;
If we now press the green “DEPLOY” button in the top right we’ll be taken to the Deployment page;
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;
After we’ve entered some notes, we can hit the “PROCEED” button and the rest of the Deployment will continue after a few seconds;
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;
In the next post we’ll learn how to configure Octopus Deploy to send notifications to Microsoft Teams when a Deploy has completed.