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.
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 masterYou may be prompted to login and once completed if you refresh the GitHub page in your browser, you should now see your code.
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
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.
Select GitHub as your source and find your Web App repostory we just created.
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.
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
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.
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.
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.zipNext scroll down to App Settings click the ellipsis and add the 5 keys/secrets
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’
That should now be our CI/CD pipeline fully configured. Now time to test it out!
Click Save and Queue
You should hopefully have a successful build
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
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.
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.