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.
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.
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.
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.
You can check all the created resources from Azure Portal.
Finally, with script execution completed, you can launch your site which is hosted on Azure.
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.
