Skip to main content

Creating a Web App and Deploying Code from GitHub Using PowerShell

Hands-On Lab

 

Photo of Chad Crowell

Chad Crowell

DevOps Training Architect II in Content

Length

01:45:00

Difficulty

Intermediate

In this hands-on lab, you will create an Azure web app and insert configuration information into that web app using the code from a GitHub repository — all using PowerShell. PowerShell is a powerful scripting and automation engine that can be used to provision and automate a lot of tasks in Azure.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Creating a Web App and Deploying Code from GitHub Using PowerShell

Introduction

In this hands-on lab, you will create an Azure web app and insert configuration information into that web app using the code from a GitHub repository — all using PowerShell. PowerShell is a powerful scripting and automation engine that can be used to provision and automate a lot of tasks in Azure.

Log in to the Linux VM

  1. Open a new terminal.

  2. Copy the public IP address provided with this hands-on lab.

  3. Connect to the VM via SSH using the public IP provided on the lab page:

    ssh cloud_user@<PUBLIC_IP_OF_THE_VM>
  4. Once logged in, start the PowerShell prompt:

    pwsh

Install the Az Module and Connect to Azure

  1. Install the module:

    Install-Module -Name Az -AllowClobber -Scope CurrentUser
  2. Enter Y to continue installing from the PowerShell gallery. It will take a couple minutes to finish.

  3. From the PowerShell prompt, connect to Azure:

    Connect-AzAccount
  4. In the browser, navigate to https://microsoft.com/devicelogin.

  5. Enter the code provided in the terminal.

  6. Enter the Azure Portal username and password provided on the lab page.

Create the Azure App Service Plan and Web App

  1. Get the name of the resource group provisioned with the lab:

    Get-AzResourceGroup

    Copy the name into a text file, as we'll need it in a minute.

  2. Create a script:

    vim script.ps1
  3. To avoid adding unnecessary spaces or hashes when you copy in the next code, first enter :set paste.

  4. Paste the following into the script (replacing <UNIQUE_WEB_APP_NAME> with a globally unique name — e.g., mywebapp with a series of numbers at the end):

    $gitrepo = "https://github.com/chadmcrowell/app-service-web-dotnet-get-started.git"
    $webappname = "<UNIQUE_WEB_APP_NAME>"
    $location = "West US"
    $resourceGroup = '<RESOURCE_GROUP_NAME>'
  5. Add a line break and then enter the following to the script to create the app service plan:

    New-AzAppServicePlan -Name $webappname -Location $location -ResourceGroupName $resourceGroup -Tier Free
  6. Add another line break, and enter the following to create the web app:

    New-AzWebApp -Name $webappname -Location $location -AppServicePlan $webappname -ResourceGroupName $resourceGroup

Create and Apply the Configuration to the Web App

  1. Still in the script, add another line break and enter the following to create the variable for the GitHub configuration:

    $PropertiesObject = @{
      repoUrl = "$gitrepo";
      branch = "master";
      isManualIntegration = "true";
    }
  2. Finally, add another line break and enter the following to apply the configuration to the web app:

    Set-AzResource -PropertyObject $PropertiesObject `
     -ResourceGroupName $resourceGroup `
     -ResourceType Microsoft.Web/sites/sourcecontrols `
     -ResourceName $webappname/web `
     -ApiVersion 2015-08-01 `
     -Force
  3. Save and quit the script by hitting Escape followed by:

    :wq!
  4. Run the script:

    ./script.ps1

    It may take up to five minutes to run.

  5. Get information about the new web app:

    Get-AzWebApp

    It may take a few minutes to complete.

  6. In the output, copy the URL listed beside HostNames and paste it into the browser. We should see an ASP.NET page.

Conclusion

Congratulations on successfully completing this hands-on lab!