Azure Static Website Deployment Slots

Deployment slots are very useful service from Azure cloud services, this isolate enviorment for developers to develope and test the codes in a seamless manner.The feature swap, enable the developers to rapid deployment and easy roll out roll back.

The Web App deployment slots are a great feature, really useful however, they don't really work elegantly when the site is protected by an application gateway. The current behaviour means that the app gateway needs to be “aware” of the active deployment slot, this really isn't something that it should be aware of. For example: Website: Slots: Production Staging Development By default, the. After the slot is created, if you click on the slot, you will be taken to another Web App. So what happens behind the scenes is Azure does create another Web App with some more sugar on top of it so that it can be classified as a deployment slot. You can use this slot to push code to this the same way you have pushed to the original Web App. ARM Code for Azure Web App Slot Here, slot name is defined inside a property named stagingSlotName. Again, we have made sure that web service exists first before the slot is created by using the dependsOn in the above code. Since it is defined within the resources array of the web app itself, there is no need to link the two. Now that you can run.NET web applications without server side code, you can deploy these applications to various static site hosts, such as Azure Static Web Apps and GitHub Pages. This walkthrough will show you how to deploy Blazor WASM to Azure Static Web Apps communicating with the built-in Azure Functions integration. Deploying to Azure Static Websites For my website I use Azure Static Websites as a cheap host. It turns out that there's a GitHub Action already made for this, feeloor/azure-static-website-deploy which makes things super easy to deploy.

For an example your web users connected and accessing the original production site on the production slot,you can deploy a new version of the Web App into a secondary deployment slot, so you can test it before it goes live.

Slots are based on the application services(standard ,premium or isolated)and running on the same application services.There won,t be any additional cost.

Features
Hot deployments to production with out downtime
Easy roll out and roll back

Benifits of Deploying application to a non-production slot
Validate app changes in a staging deployment slot before swapping it with the production slot.
Deploying an app to a slot first and swapping it into production makes sure that all instances of the slot are warmed up before being swapped into production.
If the changes swapped into the production slot aren’t as you expect, you can perform the same swap immediately to get your “last known good site” back.

Setting up

Suppose, you have a production site which is running and don’t want to disturb the site,create a clone site and modify the codes and test it.

In the Azure Portal, navigate to App Service and click the deployment slots menu item

click on the add slot

clone the site

This will create a same your production site,but the site name is different(with your slot name).

divide your traffic
By default, Traffic % is set to 0 for the new slot, and all traffic routed to the production slot.We can change the traffic % divided to both the slots.

swap
When swap the slots,from a staging slot into the production slot after code changes to know,how the web page looks like with out production downtime and revert back to old.

To configure auto swap:
Go to your app’s resource page. Select Deployment slots > <desired source slot> > Configuration > General settings.
For Auto swap enabled, select On. Then select the desired target slot for Auto swap deployment slot, and select Save on the command bar.

Using powershell create web app
New-AzWebApp -ResourceGroupName [resource group name] -Name [app name] -Location [location] -AppServicePlan [app service plan name]

create slot
New-AzWebAppSlot -ResourceGroupName [resource group name] -Name [app name] -Slot [deployment slot name] -AppServicePlan [app service plan name]

Initiate a swap with a preview (multi-phase swap), and apply destination slot configuration to the source slot
$ParametersObject = @{targetSlot = “[slot name – e.g. “production”]”}
Invoke-AzResourceAction -ResourceGroupName [resource group name] -ResourceType Microsoft.Web/sites/slots -ResourceName [app name]/[slot name] -Action applySlotConfig -Parameters $ParametersObject -ApiVersion 2015-07-01

Cancel a pending swap (swap with review) and restore the source slot configuration
Invoke-AzResourceAction -ResourceGroupName [resource group name] -ResourceType Microsoft.Web/sites/slots -ResourceName [app name]/[slot name] -Action resetSlotConfig -ApiVersion 2015-07-01

Swap deployment slots
$ParametersObject = @{targetSlot = “[slot name – e.g. “production”]”}
Invoke-AzResourceAction -ResourceGroupName [resource group name] -ResourceType Microsoft.Web/sites/slots -ResourceName [app name]/[slot name] -Action slotsswap -Parameters $ParametersObject -ApiVersion 2015-07-01

Azure Deployment Slot Settings

Monitor swap events in the activity log
Get-AzLog -ResourceGroup [resource group name] -StartTime 2018-03-07 -Caller SlotSwapJobProcessor

Delete a slot
Remove-AzResource -ResourceGroupName [resource group name] -ResourceType Microsoft.Web/sites/slots –Name [app name]/[slot name] -ApiVersion 2015-07-01

See the video

other references
https://teckadmin.wordpress.com/2019/07/06/create-demo-app-web-site-in-azure-using-azure-cli/
https://teckadmin.wordpress.com/2019/07/06/create-your-first-we-application-in-azure/

GitHub Action

Use latest version

Azure Static Website Deploy

Deploys code to Azure Storage and enables Static Website

Installation

Copy and paste the following snippet into your .yml file.

Azure Static Websites

Function Learn more about this action in feeloor/azure-static-website-deploy
Choose a version

⚠️ Note: To use this action, you must have access to the GitHub Actions feature.

This action is designed to use the Azure CLI to enable static website and upload a directory of your choice to your Azure Storage account.

Azure Static Website Deployment Slots Software

Usage

Example

Place in a .yml file such as this one in your .github/workflows folder. Refer to the documentation on workflow YAML syntax here.

Required Variables

KeyValueTypeRequired
SOURCE_DIRThe name of the directory you want to uploadenvYes
AZURE_CLIENT_IDYour Azure Client ID.secretYes
AZURE_SECRETYour Azure Secret.secretYes
AZURE_TENANT_IDYour Azure Tenant ID.secretYes
AZURE_SUBSCRIPTION_IDYour Azure Subscription ID.secretYes
AZURE_STORAGE_ACCOUNT_NAMEYour Azure Storage Account Name.secretYes
AZURE_INDEX_DOCUMENT_NAMEThe index document that you specify when you enable static website hosting, appears when users open the site and don't specify a specific file. More Information HereenvYes
AZURE_ERROR_DOCUMENT_NAMEIf the server returns a 404 error, and you have not specified an error document when you enabled the website, then a default 404 page is returned to the user. More Information HeresecretNo

License

This project is distributed under the MIT license.

Stars
Contributors
Categories
Links
feeloor/azure-static-website-deploy Open issues 0 Pull requests 0 Report abuse

Azure Static Website Deployment Slots Tool

Azure Static Website Deploy is not certified by GitHub. It is provided by a third-party and is governed by separate terms of service, privacy policy, and support documentation.