Publishing Web Application to Azure Web App from GitHub using GitHub Actions

Hello Folks,

In this article, I will demonstrate step-by-step procedure to publish a .NET Core web application to Azure Web App from GitHub using GitHub Actions. All you need is Visual Studio and accounts for GitHub and Azure. Once you have it, you are all set to publish your first web application to Azure.

What is Azure App Service ?

Azure App Service is a HTTP-based, Platform as a Service solution provided by Azure for hosting web applications and REST APIs. It supports hosting of applications developed in .NET, .NET Core, Java, Ruby, Node.js, PHP or Python.

(More information available at https://docs.microsoft.com/en-in/azure/app-service/overview)

Now we know what is Azure App Service and what are the pre-requisites for publishing web application, so let’s get started and create our sample web app and publish it to Azure.

1. Create a new project in Visual Studio

First, we’ll create a sample web application using Visual Studio. To do so, open Visual Studio and click on ‘Create a new project’

In new the project window, select ‘ASP.NET Core Web Application’ and click on Next.

In ‘Configure your new project’ window, enter ‘Project Name’, ‘Location’ and ‘Solution name’ of your choice and click on ‘Create’ button.

Select ‘Web Application’ and click on ‘Create’ button. (Ensure that you have .NET Core with ASP.NET Core 3.1 selected)

Once the project is created successfully, click on ‘IIS Express’ to test the application locally.

If you’re able to see the below application running in your browser, then you have successfully created a .NET Core web application.

2. Create Azure Web App service

It’s time for Azure now.

Login to you Azure account and go to Azure Portal. Then click on ‘Create a Resource’ option.

What you see now is called ‘Marketplace’ in Azure world. You can create any Azure service from here. For our purpose let’s select ‘Web App’.

Once you’re in ‘New Web App’ page, fill in details for ‘Subscription’, ‘Resource Group’ and ‘Name’ for your Web App.

Next, select ‘Runtime stack’ as .NET Core 3.1 (LTS) and ‘Operating System’ as Linux.

On the same page, scroll down and you will see App Service Plan. Let’s create a new App Service Plan by clicking on ‘Create new’ option.

Give service plan name of your choice. Now click on ‘Change size’ for ‘Sku and size’.

As we are doing this exercise for learning purpose, you can select ‘Dev/Test’ tab and select on ‘F1’ under ‘Recommended pricing tiers’ and click on ‘Apply’

(For pricing details on App Service, visit https://azure.microsoft.com/en-in/pricing/details/app-service/linux/ )

Click on ‘Review + Create’ button to validate all details and then click on ‘Create’ button.

It takes usually 3-4 mins to create resource. Once resource is created, click on ‘Go to resource’ button.

From the ‘Overview’ section of Web App Service, you can get public URL for you Web App.

Copy URL and run it in another browser tab. If you can see web page like below, then you have successfully created you Web App service in Azure.

Now we have our sample web app and Azure Web App service ready.

3. Push source code to GitHub

Next is to push our sample web application source code to GitHub. We are doing this step as we want to publish our web app from GitHub.

For pushing source code to GitHub from Visual Studio, we need to setup GitHub extension in our visual studio.

To download the extension, go to https://visualstudio.github.com/ and install it.

After installing GitHub extension, you will be able to see GitHub option under ‘Team Explorer’ in your Visual Studio.

Next step is to connect your GitHub account with the Visual Studio. You can do it by clicking on ‘Connect’ button.

Now click on ‘Sign in with your browser’.

After signing in, right click the solution and select ‘Add Solution to Source Control’.

Then go to ‘Team Explorer’ and click on ‘Sync’ button to publish source code to GitHub.

After successful publish, you should be able to see the new repository in your GitHub account.

4. Deployment

Now, the last piece of the puzzle is to publish the application from GitHub to Azure Web App. To do so, let’s go back to Azure portal and go to Web App Service which we created earlier.

Click on ‘Deployment Center’ from the left menu and then select ‘GitHub’ option. Click on ‘Authorize’ button to connect your GitHub account.

Once authorization is successful, Select ‘GitHub’ and click on ‘Continue’.

In the next step, select ‘GitHub Actions (Preview)’ and click on ‘Continue’.

Select your ‘Repository’ and ‘Branch’ and click on ‘Continue’.

You can review GITHUB ACTION WORKFLOW CONFIGURATION file and click on ‘Finish’. This will create a configuration file and push it in your selected GitHub repository automatically.

You should be able to see the configuration file under ‘.github/workflows/’ location in you repository.

Once the workflow configuration file is pushed, it will trigger the pipeline automatically. To check whether the CI/CD pipeline in GitHub is passed successfully, go to repository and click on ‘Actions’ tab.

You should be able to see the pipeline status as below.

Once the pipeline is passed, you should be able to see successful deployment information under the ‘Deployment Center’ in App Service.

Now to check our web app, copy the public URL from the ‘Overview’ section of the App Service and run it in the new browser tab.

If you are doing this exercise with me, then you have probably published your first web app to Azure Web App.

Cheers !! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s