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:
cd GithubActions2Azure
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
body { background-color: tomato;}
2) In
Views/Home/Index.cshtml, change the main heading from:
<h1
class="display-4">Welcome</h1>
TO
<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:
dotnet run
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 init
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:
If you refresh the GitHub
page, you will see that the code is in GitHub. It looks like this:
Azure
The 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:
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:
dotnet --version
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.
CI/CD
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:
git pull
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.
