azure

Zero to Azure Hero with ASP.NET Core, Blazor, Azure DevOps, Cognitive Services, SonarCloud and App Services - Part 8

In the previous post we built out our Web Application using ASP.NET Blazor, we are now going to push this to a new GitHub repository then setup an Azure DevOps CI/CD pipeline to build and deploy direct to Azure App Services.

Create a new repository on GitHub for your project, then run the commands to push your project up to GitHub (these are the same steps you went through in part 3 of this blog post series.

WebRepo

It will provide instructions on creating and pushing your repository from the command line (from the root of your project folder). If using my commands below, ensure you replace the GitHub project url with your own

git init  
git add .  
git commit -m "initial commit"  
git remote add origin https://github.com/stevenknox/TwitterSentimentWebApp.git
git push -u origin master

You may be prompted to login and once completed if you refresh the GitHub page in your browser, you should now see your code.

TSWA-Repo

Now that our code has been pushed to GitHub lets create our CI/CD pipeline to build and deploy to Azure App Services.

Return to the Azure DevOps portal and create a new Build Pipeline

NewPipeline-1

This time we will use the 'Visual designer' rather then the YAML approach just to show the different options you have when building your pipeline. We covered the Visual Designer briefly in part 5 of this series.

SelectVisualDesigner-1

Select GitHub as your source and find your Web App repostory we just created.

SelectWebAppRepo

When prompted to select a template, we are going to use the 'Azure Web App for ASP.NET' option that will do some of the inital configuration of our pipeline.

WebAppTemplate-

Once the pipeline has been created you will see it has already added tasks to restore and build your Application however the Deploy task needs some additional configuration. Select the Azure App Service Deploy task then select your Subscription and Authorize if prompted.

We don't yet have an App Service Plan to provide for the App service name field. Lets create this now in the Azure Portal.

Within the Azure Portal, navigate to the Resource Group you created in part 6 of this series and Add a new Resource. From the marketplace search for Web App

CreateAppPlan-2

Give your web app a name that will form part of the url, select your subscription then choose the existing resource group created earlier for the Text Analytics API.

Once configured click Create and wait for the service to provision.

App2Config

Once deployment has completed and your Web App resource is now available, return to Azure DevOps to complete configuration of our pipeline.

You can click the refresh icon beside the 'App service name' field then select it from the dropdown list.

N1

SelectService

A few more settings that need configured here is the Package or Folder and also our App Settings that will contain our keys and secrets.

Under the Package or Folder we need to explicitly specify the zip file to use as there will be one generated for both the App and Server projects. In my case the path will be updated to:

$(build.artifactstagingdirectory)/**/TwitterSentimentWebApp.Server.zip

Next scroll down to App Settings click the ellipsis and add the 5 keys/secrets

ConfigurePackageAndAppSettings-1

AppSettings

We also need to update the NuGet restore task to use our NuGet.config file that knows about our private feed.

Select the NuGet Restore task and change the feed to use the option 'Feeds in my NuGet.config' and use the ellipsis to select the path to your NuGet.config file.

Next update 'Credentials for feeds outside this account/collection' and select the Service Connection setup earlier in this blog series. My connection was called 'WholeschoolPackagesAuth'

NugetWrrows

That should now be our CI/CD pipeline fully configured. Now time to test it out!

Click Save and Queue

FinalSaveAndDeploy

You should hopefully have a successful build

FinalGreenRun

If all looks good you can navigate to your Web App in your browser, if you forget the URL you can access it from your Web App Service blade from the Azure Portal

AppUrl

Our Web Application should now be running live on Azure, and if you enter a username and click search it should return results showing everything has hooked up.

Live-Web-App-1

We have now created a .NET Core Library for interacting with the Twitter Rest API, pushed our code to a GitHub repository, configured a CI/CD pipeline that incudes static analysis using SonarCloud, published our package to a private NuGet Feed using Azure Artifacts, implemented Sentiment Analysis using the Text Analytics API from Azure Cognitive Services then finally created a Web App using the exciting bleeding edge Blazor technology and pushed it live on Azure App Services using another CI/CD pipeline. A lot covered!!

Our final post in this series just covers some tips and tricks including adding status badges to your GitHub repo and setting up Dashboards under Azure DevOps to monitor your builds.