Hello Folks,
In this article, I will demonstrate the 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 an 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
here)
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.
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 the new 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.
Create Azure Web App service
It’s time for Azure now.
Login to your Azure account and go to Azure Portal. Then click on ‘Create a Resource’ option.
What you see now is called ‘Marketplace’ in the 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 the App Service Plan. Let’s create a new App Service Plan by clicking on the ‘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 purposes, 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 here)
Click on ‘Review + Create’ button to validate all details and then click on the ‘Create’ button.
It takes usually 3-4 mins to create a resource. Once the resource is created, click on the ‘Go to resource’ button.
From the ‘Overview’ section of Web App Service, you can get public URL for your Web App.
Get the URL and run it in another browser tab. If you can see a web page like below, then you have successfully created your Web App service in Azure.
Now we have our sample web app and Azure Web App service ready.
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
here and install it.
After installing the 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 publishing, you should be able to see the new repository in your GitHub account.
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 the 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 the ‘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 the 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 your 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 the 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 !! 🙂