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

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

Create a sample ASP.NET Core Razor web application
Create Azure Web App service on Azure portal
Deploy initial web application to azure App Service using GitHub Action feature.
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

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.

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.

Fig 3: Azure App Service GitHub - Login

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

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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

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