Deployment Slots in Azure App Service with a Free Azure Account

Heads up: This is the 5th article in the series 'Deploy Your App on Azure Without Spending a Dime'. Recommend to read previous articles in series for better understanding.

*****************************************************************************

Deployment slots are the slots where we deploy the system that can be accessible for users.

We can divert the amount of traffic to different slots OR make intended slot as default/production for consumers.

Please check below the screen shot which azure is offering with FREE TIER As on TODAY.

While I am exploring with azure free tier, I find there is a deployment slot available for me. Thought to explore.

Continuing with the sequence I am following in the series, I am in ‘nitin-readit-inventory’ and can see ‘Deployment slots’ on the right panel.

Click and there is ‘Add slot’ option.

Clicked ‘Add slot’
And filled in ‘Name’ as ‘staging’ for the slot.
Clicked on ‘Add’ to create the slot.

And there is URL created for the new slot where I can deploy my system traffic for another version in future.

Here is what I see once the 1st slot is created.

The production slot is already available as a default one.

And there is a ‘Traffic’ column as well to manage traffic for different slots.

As of now, the ‘Production’ slot is having 100% traffic.

Clicked on the newly created ‘staging’ deployment slot.

As I can see, Its app service staging slot is fully functional and running on the domain URL mentioned.

Tried checking my ‘default domain’ mentioned on the page.

It's the same as the prod slot when I created the app service. You can check the URL

I can now deploy another version of code to this slot.

Closed the ‘Slot’ window and back to ‘Deployment slot’ window for my ‘readit’ app.

As seen earlier, the 100% traffic is routed to the ‘production’ slot.
I want to create another version of my app and divide the traffic between ‘Production’ slot and ‘Staging’ slot.

I now want to deploy the new version of code to the ‘staging’ slot.

I have installed ‘Azure resources’ extension and synced my azure account with my VSCode local, I will review the updates that are reflected there as well.

Clicked on the ‘Azure resources’ extension icon in VSCode and expanded the subscription I have ‘Free Trial’

I can see VMs created by me in ‘de-allocated’ status – right clicking any resource showing me quick action list I can perform with resource.

Now, I will check ‘App Service’ and action I can perform with.

I can see my newly created ‘staging’ slot is reflecting and also the action to deploy my new version to it.

I will now make a minor change to the code and deploy it to the ‘staging’ slot.

Updated the ‘highlighted’ value and hit ‘f5’ build and run + to deploy the change locally to verify.

Succeeded. I can see the new version is successfully deployed locally.

I will now deploy this new code version ‘staging’ slot.

To do that,

I clicked on the ‘Azure Tools’ extension.

Expanded ‘Subscription’ > ‘App Services’ > ‘App Service name’ > ‘Deployment Slots’

Right clicked on the ‘staging’ and clicked ‘deploy to slot’ option.

It asked me for confirmation with a caution message. Also contains the name of the service I am deploying to.
Clicked on ‘Deploy’

I can see updates on publish in the local terminal.

The deployment is complete to the intended app service slot and in the ‘Azure’ tab, I can see options.

Clicked on ‘Browse Website’

And I can see, a new version is deployed to the newly created slot.

Will check for my production slot now from the azure dashboard. To make sure I have 2 versions of the code.

Clicked on the default slot URL.

And the older version of code is on the ‘production’ slot.

+ the new version is on ‘staging’ slot.

I will now try to divide the traffic between slots.

To do that, I have to navigate to ‘nitin-readit-inventory’ > ‘deployment slots’

As soon as I entered the value for the ‘staging’ slot, the value for the ‘production’ slot got updated.

Clicked on ‘Save’

Tried hitting the default slot URL to see if the new version is visible there.

Refreshed page a few times to check if traffic is routed.

It's not showing me alternate results – may be due to cookies.

Trying to hit from incognito.

It's still showing me the same results. Seems I might have to try from different machines to see results.

I will now update the traffic percentage and try again hitting the default slot.

And hit from the new incognito browser.

I see I landed on an older version of code from the default app service URL.

This means the traffic routing between the slots worked.

I will now try for the slot ‘SWAP’.

To do that, will update the Traffic percentage to default one.

Click on SWAP button just above the list of Slots

It opened up the info for SWAP

It will make the ‘staging’ slot as default in case I SWAP.
Meaning, I can see the older code version on staging URL.

I clicked on the ‘Start Swap’ button.

Swap took a few moments to complete.

I hit the staging URL to verify the swap.

I am swapping again, so the staging URL should show me ‘V2’ of the code.

Post the SWAP complete, hit the staging URL again to verify if I am landing on the latest page.

Just refreshed the page and I see the intended results.

Take Away:

Exploring deployment slots in Azure App Service using a free Azure account has proven to be a valuable exercise. By creating and managing deployment slots, you can seamlessly deploy new versions of your application, test them in a staging environment, and gradually route traffic to ensure stability before making them live. This approach not only enhances the deployment process but also minimizes downtime and potential disruptions for users. The ability to swap slots and manage traffic distribution provides a robust mechanism for continuous integration and delivery, making Azure App Service a powerful tool for developers. I hope this guide has been useful in demonstrating how to leverage these features effectively. Let me know if you have any questions or need further assistance!