Deploy a Blazor App to Azure with GitHub Actions 🚀

so let's say you have your Blazer web assembly Ace peanut core hosted application right with a client project a server project a web API and also a shared project this thing then looks like this home counter fetch data so we are actually making a web service call here and now you want to publish everything to Azure using GitHub and even GitHub actions well that's pretty easy actually so what you have to do is down here you go to add to Source control and then git and then what you can also do is pushing everything to your GitHub account they are creating a new repository as you can see here my local path I think you know this already with your account and then also the repository name in my case Blazer GitHub actions Azure tutorial nice name right and let's say we make it could also be a private repository so you really do not have to make this public let's try this with a private one I create and push this and as soon as everything is pushed I can have a look in GitHub of course so here it is two commits everything I did a second ago perfect now with that set we can go to Azure so here we are in your case you need an account maybe a free account when you haven't checked out Azure before you can do that and then try everything for free for a certain amount of time but either way you have to create a new resource to publish your full stack Blazer webassembly application so let's do that and here now we choose the web app so we go to create you need a subscription could be a free one it could be a subscription where you have to pay for that stuff and then we can give this thing a name maybe again Blazer GitHub actions Azure tutorial awesome name then we select code right and then your runtime stack now in my case I used Net 7 in your case this might be different but here now let's just say it's a.net7 app could also be a.net 8 app of course if you're watching a bit earlier or dot net six if it's another application in my case again.net7 then we can choose between Linux or Windows as an operating system now one little info about that when you choose Windows you can directly in the next step choose your git Hub repository in this wizard here in this process but deployment takes way longer so let's say we want to use continuous integration here or continuous delivery continuous deployment then as soon as you push something to your GitHub account or to your GitHub repository then automatically the build process and the deployment process is triggered but it takes way longer when you choose Windows as operating system and I guess it's also a bit more expensive so what I do here now is I choose Linux just for this YouTube tutorial case here Linux means continuous integration can be configured a bit later meaning we first create this web app and when this thing is configured then or created then we can configure continuous integration deployment with our GitHub account so it really doesn't make a difference it's just one step more we have to add here but either way it works it's way faster and again I guess it's cheaper so Linux in my case East US is fine for me then we have a Linux plan in my case it's the basic plan so this costs a little bit of money there's also a free plan available again if you want to try this out with Azure you can also create a free plan but basic the biggest difference for me with basic is that I do not have cold starts meaning that when you're when you want to work with your deployed application on Azure and you haven't checked out your app and for an hour or something then the machine is in let's say a standby mode so so when you then access this application via the address bar here in the browser for instance then it takes a couple of not only seconds could even take some minutes to wake up the machine your application and then you see it and with basic you do not have this wake up process the application should be there should right it's still basic directly should be there directly so this is just a little information here anyways we go to the next step which is deployment and now here is the step where you configure your continuous deployment now I'm a bit surprised because I told you earlier that with Linux this was not possible and it really wasn't possible a couple of days ago but now it seems it is possible and I haven't checked that before I started the recording so please bear with me my apologies you can already configure this again could be still the case that this changes with another with another plan right so here when we um it shows uh or when we use a free plan then could be the case that deployment is not possible not sure about that sorry about that really if you know more about that please write it down in the comments but either way even if you choose Windows now this is nice because you now see how you can configure this in this process alright so here continuous deployment enabled and now we need a GitHub account and this is a crucial step because here as you can see we can log in with our GitHub account and we wanna give the Azure app service access to our GitHub account let me pull up the settings in my GitHub account first so there we are and then we go to settings and here now applications and then oauth apps Azure app service this is the one that need needs access to your GitHub account for whatever reason could be the case that there's something different also called something with Azure service something like that that wants access to your GitHub account when we wanna add get Hub here our GitHub account but this does not work I don't know why this was a problem in my case when I first tried to authorize GitHub here or Azure here for my GitHub account but please make sure that it's the Azure app service if it's not there try this a couple of times or just create your web app and then later try to configure The Continuous deployment step and then it should work also could be that this takes a couple of minutes to have an effect so just make sure Azure app service this is the thing that needs the authorization that leads the the access to your GitHub account and then you see well all the data from your GitHub account got a bunch of repositories here so what I actually wanna have is the Blazer GitHub actions Azure tutorial right so I choose the repository and here even you can choose several branches not only the master or the main branch could be any feature Branch whatever you want and when you choose this you can actually even preview the yaml file here but this is not really necessary for us you see that we're using Ubuntu Linux here when you choose this configuration here then this really means whenever you push something to your master branch in my case then the deployment building and deployment process will be started all right so next we go to networking for now net not that important for us monitoring not as well no tags review and create this is interesting of course we have.net7 we want to use the code thingy here setting here we have the basic service plan and also this is our repository all right so now let's hit create and this might take a while awesome deployment is complete we can now go to the resource or we go to home and then here it is as well and again just for your information when you weren't able to configure deployment with GitHub with a GitHub repository in the first steps you can here go to the deployment Center then to the settings and here then you will also have the ability to choose your GitHub repository even there's a link to the master branch in GitHub and we can also in the overview should be here yeah here with the deployment Center you see that deployment the last deployment is still in progress so what we can do actually we can go back to our GitHub repo there it is when I know refresh we see this a little bubble here so we can click on this thing and we see there are some processes going on and the build was already done and now we've got our deployment job and this is also now running deployed to Azure web app isn't that nice and when this is done we can actually access our application so let's just wait a little again and then we try to access our application awesome job is complete and now here's our URL the default domain let's just open this thing and there we are and now for instance we can go to fetch data and we see that everything works as expected that's just great but now the big question is what happens if we change something right so we when we go back to the GitHub repository and we have a look at our commits we see now there are three because Azure did some magic here so let's go back to our repository and first let's have a quick look here let's fetch incoming covets we have one and this is done well by me but actually by Azure so let's pull this so we have the current state and now let's just say to see an effect really we want to get more than just these five weather forecasts so here in our get method we just say now we want to have 500 for instance so let's save that and one more thing I want to show you is this here if you test something locally in the development state of or in the development environment of your application and you also want to see that deployed to Azure then make sure that this is a little Pitfall here make sure that you also set this for instance to is come on production right like that because the uh the default way Azure does this is that the environment then is the production environment and then you won't see for instance what's going on in this little scope here right so this is what you have to do if you're wondering hey I saw some debugging information or error information locally on my machine now I also want to see that in azure because I just want to test this but then again if this is really your production deployment then you should definitely remove this again so let's just keep it as that and then we see our changes here 500 weather forecasts and edit production environment for debugging something like that we commit everything and also already push this so now when we go back to our repository you see this little check mark but now I refresh and now we see a little bubble here again we can go to details and then we see again that there's the build process lots of stuff Happening Here and when this is done we will also see the deployment and then we can again go back to our application deployed on Azure for our last and final test all right this is done so back to up our application we just use this site here again we refresh and we get a couple more weather forecasts isn't that nice that should be 500. and now the next step would be to make the same thing happen with a database so how would that work with an Azure SQL database and if you want to know how to do that then check out the video here on the screen additionally if you want to know more about Azure then please write it down in the comments and if you want to see this complete process professionally in action then make sure to check out the link in the video description for the upcoming.net Web Academy thanks for watching take care

Channel: Patrick God

Views: 4,242

Keywords:

Id: t6IG2TqhS88

Length: 13min 42sec (822 seconds)

Published: Tue Apr 18 2023