In this post I will show you how easy it is to implement a CI/CD DevOps pipeline using GitHb Actions. The sample web application I will use is an ASP.NET Core 3.1 MVC application and I will deploy it to Azure App Services.
Before proceeding, It is assumed that you have the following pre-requisites:
- You already have an Azure Account
- You already have a GitHub account
- You have .NET Core 3.1 (or later) installed on your computer
Creating a simple ASP.NET Core 3.1 application
In a working directory, execute the following command from within a terminal window:
dotnet new mvc -o GithubActions2Azure
Change directory to the newly created app:
Add a .gitignore file to the application:
dotnet new gitignore
Let us make the application our own by, perhaps, changing the title of the app and the background color.
1) Add the following CSS to wwwroot/css/site.css
2) In Views/Home/Index.cshtml, change the main heading from:
<h1 class="display-4">Welcome to our MVC Core 3.1 App</h1>
Let us now run the application and see what it looks like. In the terminal window run the following command:
Point your browser to https://localhost:5001. You will see a strangely colored web page that looks like this:
Stop the server by hitting CTRL + C in the terminal window.
Push code to GitHub
We are now ready to push this application to GitGub. Go to GitHub and create a repository. I created a repository named GithubActions2Azure. Copy the commands that are shown on the GitHub page that looks like this:
Back in your application’s terminal window, type the following commands to initialize a git repo, add files to the repo and commit the changes:
git add .
git commit -m "1st commit"
Next, we will push the code to GitHub. Paste the git commands that you copied from GitHub. This is what it looked like for me:
git remote add origin https://github.com/medhatelmasry/GithubActions2Azure.git
git push -u origin master
git push -u origin master
If you refresh the GitHub page, you will see that the code is in GitHub. It looks like this:
AzureThe next step is to create a web app in Azure. Login to the Azure portal at https://portal.azure.com/. Click on Create a resource:
Enter “web" in the filter then choose "Web App”:
On the next page, click on the blue Create button:
Choose a subscription then create a new Resource Group:
In named my new resource group GithubActions2Azure. Here are all the choices I made:
Click on Create on the next page:
Creation of a new Azure web service takes less than three minutes. When it is completed, a message appears declaring that “Your deployment is complete”. Click on the blue “Go to resource” button:
We need the publish profile. Click on “Get publish profile” to download your publish profile XML file:
Build & Deploy using GitHub Actions
Back it GitHub, click on the Settings tab of your application’s repo:
Click on Secrets on the left-side:
Click on “Add a new secret”:
Give the secret the name AZURE_WEBAPP_PUBLISH_PROFILE and paste the contents of the publish profile file that you earlier downloaded from the Azure portal for your web app:
Click on Actions on the top navigation bar in GitHub:
You will see a multitude of templates for a multitude of technologies and programming languages. We will paste our own template, therefore, click on the “Set up a workflow yourself” link on the right-side:
This will create a .github/Workflows folder in your application. Name the file deploy_to_azure.yml then click on the green “Start commit” button:
Enter a comment and description for the commit then click on the “Commit new file” button:
Go to this site to get an appropriate template for our web app: https://github.com/Azure/webapps-deploy. Scroll down until you find this section then click on dotnet.yml:
Copy the contents of the asp.net-core-webapp-on-azure.yml. Return to the GitHub repo of our application, edit the deploy_to_azure.yml file, and replace the contents by pasting the clipboard. This is what it looks like for me:
On line 18, set the value of AZURE_WEBAPP_NAME to the name of your app. In my case it is GithubActions2Azure.
On line 20, set the value of DOTNET_VERSION with the exact version of .NET Core with which you created your app. You can find out by running the following command in a terminal window:
In my case, the .NET Core version is 3.1.200.
Click on the green “Start commit” button, give it a title then click on “Commit changes”.
Click on Actions on the top navigation bar:
Click on “Deploy ASP.NET Are all to ..”. If all goes well, there should be a green check mark beside the workflow, which was responsible for building and deploying the app to Azure. Click on “Updated deploy_to_azure.yml”.
Click on “build-and-deploy” on the left-side:
You will be comforted by the fact that all tasks completed successfully:
To make sure all is well, go to the Azure portal and click on the URL of your website:
Our ugly looking tomato-colored website appears:
Note that if you make any changes to your source code and push it to GitHub, it will automatically get deployed to Azure. This is what CI/CD is all about. Let's try that.
In a terminal window at your project folder, do a pull in order to get all the changes we made in GitHub when we added the .yml file:
In wwwroot/css/site.css, change the background-color to wheat. Let us push our changes to Github with these commands:
git add .
git commit -m "changed background color to wheat"
git push origin master
Back in GitHub, you will find that the deployment is running:
Upon completion it will display a green check mark:
Refresh the website in your browser and you will find that it has changed background color to something nicer:
Thanks for coming this far in my tutorial and I hope you found it useful.