Deploy Azure Web Apps from Visual Studio Code using Azure Cloud Shell

By | May 21, 2018

In this post, we will learn how to deploy Azure Web Apps from Visual Studio Code with the power of Azure Cloud Shell. Visual Studio Code has Azure Cloud Shell integration.  This comes as a part of Azure Account Extension available in Visual Studio code marketplace. In this post, we will create an ASP.NET Core MVC application quickly using Visual Studio Code. Further, we will push the code to Git and then we will deploy it to Azure using Azure Cloud Shell.

Deploy Azure Web Apps from Visual Studio Code - Steps

Create ASP.NET Core MVC Application in Visual Studio Code

There are several ways create an ASP.NET Core MVC Application. Here we will follow the quick one, terminal approach. Open the Terminal in Visual Studio Code and switch the root directory of the terminal where you want you to create the website.  Execute following Command to create a web app using template ASP.NET Core MVC.

 

PS D:\myproduct> dotnet new mvc

Once the site creation is done, you can open the app in Visual Studio Code. Proceed with necessary changes in case you want to do.

Deploy Azure Web Apps from Visual Studio Code - Web App

Push the Code to GitHub

As part of next step, let’s push the code to Git. Again, you can achieve it from the Source Control Activity Bar or just by using few commands from Terminal.  Let’s do it from Terminal.

 

PS D:\myproduct> git init
Initialized empty Git repository in D:/myproduct/.git/
PS D:\myproduct> git add *
PS D:\myproduct> git commit -m "Initial Checkins"
PS D:\myproduct> git push --set-upstream  https://github.com/JanaAbhijit/DemoProductWeb.git master

This will push you the overall solution to Git Source control.

Deploy Azure Web Apps from Visual Studio Code - Git Push

 

Related Post: Visualize the Git history in Visual Studio Code

 

Deploy Azure Web Apps from Visual Studio Code

As part of the final step of the post, we will now take the source code reference from Git and deploy the web app to Azure using Azure Cloud Shell.  Launch the Azure Cloud Shell from command plate with “Azure: Open PowerShell in Cloud Shell” and select the Azure directory

Following is the PowerShell script that you need to execute.

 

# Start Deploying Azure Web App from Visual Studio Code using Cloud Shell
$gitrepo="https://github.com/<your github account>/DemoProductWeb"
$webappname="webforVSCode"
$location="West Europe"
$myresourceGroup ="VsCodeResourceGroup"
# Creating the Azure Resource group for Web Application
New-AzureRmResourceGroup -Name $myresourceGroup -Location $location
# Creating the Azure App Services Plan
New-AzureRmAppServicePlan -Name $webappname -Location $location -ResourceGroupName $myresourceGroup -Tier Free
# Creating the Web App Resource under the newly created App Service Plan
New-AzureRmWebApp -Name $webappname -Location $location -AppServicePlan $webappname -ResourceGroupName $myresourceGroup
# Set Git Properties
$PropertiesObject = @{
repoUrl = "$gitrepo";
branch = "master";
}
# Final Deployment of Solution
Set-AzureRmResource -PropertyObject $PropertiesObject -ResourceGroupName $myresourceGroup -ResourceType Microsoft.Web/sites/sourcecontrols
-ResourceName $webappname/web -ApiVersion 2018-02-01 -Force

You can execute all of them together from Azure Cloud Shell or, save it as a PS1 script file and execute.  This script will create all the resources including Azure Resource Group, App Service Plan, App Services.

Deploy Azure Web Apps from Visual Studio Code - Azure Resource from PowerShell

You can check all the created resources from Azure Portal.

Deploy Azure Web Apps from Visual Studio Code - Azure Resource Creation

 

Finally, with script execution completed, you can launch your site which is hosted on Azure.

Deploy Azure Web Apps from Visual Studio Code - Running Web App

That’s it.  Further, you can modify the web apps, push the code to git and use the same script for deployment.

Hope this helps.

 

 

 

 

 

Leave a Reply