DotNet Mirror
  DNM facebook   DNM Google+   DNM Twitter   

How to deploy your Web App using Github Actions on Azure App Service

By Ashok Nalam on 01 May 2020 | Category: Microsoft Azure | Tagged: azure azure app service azure devops azure portal GitHub 
We will deploy the Web application using Github Actions on Azure App Service. Let us create a sample ASP.NET Core Razor web application and deploy to Azure app service using Github Actions. Also, subsequent code check-ins are going to deploy using Github Actions from Continuous deployment.
  Discuss Add Comment   |  
Add rating Rate this resource   

Introduction

GitHub Actions is now available and in preview mode to deploy your Web Apps to Azure App Service from the Deployment Center under Deployment section. It's a continuous deployment(CI/CD) process to build and deploy the web app when we make any code commits on GitHub branches(master or other branches). 

In this article, we will

  1. Create a sample ASP.NET Core Razor web application
  2. Create Azure Web App service on Azure portal 
  3. Deploy initial web application to azure App Service using GitHub Action feature. 
  4. Change one of our project files and check-in the code to GitHub master branch and see how GitHub Actions will be automatically deploying the change to Azure App service.

Create Web App using Visual Studio and Push the code to GitHub master branch

Let's create an ASP.NET Core Razor web application. You can choose any of the App which Azure App Service supports.

Open visual studio > Create new project > ASP.NET Core Web Application named “SampleGitHubActionWebApplication” > In the next screen I have selected > ASP.NET Core 3.1 Razor Web Application > Click on the project. It creates a sample web application project and with out doing any changes to the code let us commit the code to Github. You can see committed code at https://github.com/dotnetmirror/asp-core-web-app-github-action

Create Azure App Service on Azure Portal

Login to Azure Portal and do the below steps. If you do not have an Azure subscription, you can create a free account

From Azure Portal, click on “Create a resource” > Search for Web App from Market Place and select Create New Web App > and Provide below details
  • Subscription - Select your Subscription 
  • Resource Group - azrggithubaction (create new)
  • Name - webappgithubaction (create new)
  • Publish - Code
  • Runtime stack - .NET Core 3.2 (As our application is ASP.NET Core)
  • Operating System - Windows
  • Region - West Europe (select your nearest region)
  • App Service Plan - Selected Free tier(F1)
  • Enable App Insights - No (We are not interested in App Insights for this article)
You can review your settings then create the webapp. After few minutes the web app will be created and app looks like below screenshot

Sample Web App created  on Azure App Service using .NET Core 3.1
Fig 1: Sample Web App created  on Azure App Service using .NET Core

From the left menu, navigate to the Deployment Section and select Deployment Center tab and you will see the below screenshot.

App Service Deployment Center - Source Control
Fig 2 : App Service Deployment Center - Source Control

Under continuous deployment(CI/CD), we have “Azure Repos”, “GitHub”, “Bitbucket” and “Local Git”. In our case we are interested in the GitHub option. If you look at the screenshot, GitHub box shows “Not Authorized” text on bottom right corner. As we have not configured our GitHub account to Azure portal it shows Not Authorized text. In order to use GitHub option first we must connect to a GitHub account.

Select GitHub box and click on Authorize button.  It popups GitHub login page, provide your GitHub credentials. In this case we are going to use dotnetmirror GitHub account credentials. 

Azure App Service GitHub - Login
Fig 3: Azure App Service GitHub - Login

Once you provide the credentials, it asks to authorize for few permissions to use your GitHub account. 

Azure App Service GitHub - Permissions
Fig 4: Azure App Service GitHub - Permissions

Click on “Authorize AzureAppService” button. Now Azure App Service is Authorized to use our GigHub account “dotnetmirror”.

Go to Deployment Center > Select GitHub box and click on Continue > Now you should be able to see an option “GitHub Actions(Preview)” under BUILD PROVIDER step. 

Azure App Service GitHub Actions(Preview)
Fig 5: Azure App Service GitHub Actions(Preview)

Click on the continue button. It takes you to the Configuration section. By default it shows your GitHub account as Organization. We need to select the repository and source code branch we want to build and deploy with our code commits. I selected the repository “asp-core-web-app-github-action” and master branch.

Azure App Service GitHub Actions - Configure
Fig 6: Azure App Service GitHub Actions - Configure

Click on continue. It will take you to the SUMMARY step of the Deployment Center page  where it will show the details with the YAML file. Automatically master_webappgithubaction.yml will be added to your code repo under .github/workflow folder.

 Azure App Service GitHub Actions - Summary
Fig 7: Azure App Service GitHub Actions - Summary

Click on the Finish button. Now it triggers a build and deploys the intial web application to Azure App Service.  Below are the screenshots from Azure Deployment Center and Github Actions tab.

Azure App Service Deployment Center - Initial build deployed
Fig 8: Azure App Service Deployment Center - Initial build deployed


GitHub Actions tab -  Initial build is deploying
Fig 9: GitHub Actions tab -  Initial build is deploying

Once deployment is successful, we can see the deployed application on the browser. If you look at the URL, it is deployed  to Azure App Service.

Deployed App on browser via Azure app service.
Fig 10: Deployed App on browser via Azure app service.

Let’s do the code change and see how GitHub Actions Deploys the web app automatically

Now let's do a change to our code file and see how the GitHub actions triggers the build and deploy to the App to Azure App Service. Here we are using GitHub online only to do code change from the browser. Select “Index.cshtml” and change “Welcome” text to “Welcome, DotNetMirror. Triggering deployment with Git check-in” and commit the code change. Refer below screenshot. 

Code change from GitHub.
Fig 11: Code change from GitHub.

After the commit changes action is done, navigate to the actions tab and see it triggers a build and deployment process will be kicked off.

Actions tab - Triggered the build and deploying the code change
Fig 12: Actions tab - Triggered the build and deploying the code change

 Actions tab - Build Process in-progress
Fig 13: Actions tab - Build Process in-progress

Once it is deployed, you can  go to the Deployment Center and see latest build status as success.

Azure App Service Deployment Center - Change is deployed
Fig 14: Azure App Service Deployment Center - Change is deployed

Refresh the web app on the browser, you should be able to see the committed change.

Deployed App with change on browser via Azure app service.
Fig 15: Deployed App with change on browser via Azure app service.

Conclusion

Github Actions can be used as continuous deployment process to deploy the code commit to Azure App Service automatically.

References

  1. https://azure.microsoft.com/en-in/updates/azure-app-service-support-for-github-actions-is-in-preview/

  Discuss Add Comment    
Add rating Rate this resource   
About the Contributor
Member Since : 10 Dec 2012
Member Points (Level) : 8586  (Professional)
Location : INDIA
Home Page : http://dotnetmirror.com
About : I am admin of this site.
Rate this resource
 
Add your Comment
Name Email WebSite
Captcha Refresh


Comments (0)
No comments found, click here to add comment.