Deploying a .NET Web App on Azure Using GitHub Actions: A Step-by-Step Guide

all right welcome in this video I'm going to show you how to create a new project inside of solution from the CLI and get it set up to be hosted on Azure and deployed automatically through GitHub actions whenever we push new changes to the master Branch here we go so we're going to start off in the terminal and we're going to create uh well okay so let's let's make this like closer to a real world kind of scenario where we're going to have a solution with several projects inside of it right so let's say our main our main product for our startup is a web app running razor pages but we also need some sort of CLI tool so like you know a console app for admin stuff and of course we want to test our application so we'll need a test project right so let's try and set that up all from the command line so what we want first is to create there's several ways to go about this but since I know we're making a project or the whole solution with several projects inside it I'm just gonna make a new directory and let's call our project Phoenix let's call it Phoenix yeah so all right and we'll see into that and good now we'll create our solution so dot new solution or I think you can just do sln and let's see I think we can just pass the name so actually you don't even need to put to to pass in anything it'll take the containing folder's name as the solution name so if we do this yes so we've got our solution file inside of our Phoenix folder at this point though you know that's pretty much all that we have let's add a new let's start with our Razer app so Razer we'll call it Phoenix web okay and there it is and let's add a paper console application yep Phoenix console and there it is and let's get a what are we missing are we gonna test you unit tests with X units okay Okay so we've got our three projects here but if we look at actually let's do this right so if we look at our solution file we can see that it's pretty much empty so when creating projects from the command line like this they won't automatically get added to your solution you need to do it manually and the way to do this is.net sln add and okay here we go Phoenix test let's let's add that one and then we can let's go with Phoenix web I wonder if yeah okay let's if that'll work yep okay ah okay so here's a little gotcha we got to be careful with this see how it added the actually let me open it again so if we look at this here it used lowercase because that that's what I typed in and I believe on Windows machines this will be fine but it might create problems on Linux machines I think I've had problems with this before so that's one thing we're going to have to be careful about I'll probably just fix that in a sec in a second which one were we missing we're missing the console one so dot net excellent add con Phoenix console so it's better to do it that way okay so now we've got our projects we've got our solution we're going to go inside of Visual Studio code for the rest to fix to fix that solution file for starters but also from there we're going to push our project to a new repository on GitHub and it's a really easy way to do it inside of the VSCO window there's like tons of different ways to do it but first before we do that actually let me show you how to do another really useful thing with the.net CLI sorry you can create a editor config file which personally I kind of like to do it's got all the defaults that are you know related to.net Solutions and projects and as well since we're going to be creating a new repository with you know git Source control you can do new call again git ignore git ignore yep getting more and now we're in pretty good shape so let's do code period to open our folder in Visual Studio code and there we have it we've got our gaining nor editor config here's our Phoenix solution I'm going to just fix that path naming here to get my capital w just to make sure we don't get any issues with that okay okay we don't need this to be open so what we're going to do our next step is setting up Source control right so we go to Source control on the left panel here it's going to tell us well we don't have Source control setup do we want to initialize the repository yeah we do but on top of that we'd like we'd like it to be tied to you know or to live on on GitHub so there's a convenient button here published to GitHub which will do both for us so initialize the repo and push it to GitHub so let's make this public there we go it's creating our first commit for us automatically and it's publishing the branch uploading all of that then we're done we can even open directly on GitHub and here's our Phoenix repo available on GitHub great the next step is to set up hosting with azure so we're going to go to our Azure portal obviously as a prerequisite you need to have an account and you know all your stuff set up with azure once you have that you can go to let's see app services and create okay so subscription I'm going to keep the pay as you go Resource Group we're going to create a new one I will call this Phoenix I guess Phoenix RG for Resource Group okay our web app name let's call this Phoenix and just because yeah it's already taken right because the name is also you know that's part of our Azure websites URL let's call this Phoenix 723 yeah we're good publish is going to be code runtime stack is going to be dot net 7. that's what I've got to set up at the moment we're going to use Linux as the operating system it's looking for a region right now that would fit what we need I guess probably going to end up with us East usually the one that it selects for me yep East you ask good Linux plan it's going to create a new one with a kind of a randomly generated name that's fine our pricing plan I'm going to keep that on free and at this point we could do next and set up a bunch of other things but since this is just a demo and I'm using the free plan so a lot of those options wouldn't be available anyways we can just skip ahead to review create okay and create we just need to wait while it's creating our deployment obviously you know you'd probably in the real app you probably have uh a need for a database so there would be a few more things to set up in Azure but this what I'm showing you right now is enough to get you started and get something hosted and actually get a web application going while this is uh okay that was pretty fast actually so let's go to resource and we've got our web application here and this is our URL so we could try to navigate there though the app just started so it's probably gonna take a little while so while it's doing this let's just go back to our command line and confirm that all of this is working right I've just created all these projects and repo and all that but is is this all working so if we do uh dot net run and yeah let's confirm that our web app is working just just you know to be okay and in the background you can see that our page is loaded the one on azure but let's just wait a second for this to okay there we go and we can load okay so right our razor page web app is working phoenix.web that's locally here now let's see what's happening on Azure so as we can see it's just showing us kind of this generic thing your web app is running and waiting for your content right because though we've created the environment on Azure to to receive to host our our code we haven't transmitted anything to Azure so that's the next step right once we've confirmed and actually let's do the other one just just so that you know that everything works properly locally so our web app works fine let's try our console which is just console by default I think it just prints yeah hello world and finally we also have a test project so let's do.net test and I think by default there's just like one bogus test and it should be passing so yeah one test file and one pass great okay so now we we know that everything works locally no reason to think that this wouldn't work that our web app anyways wouldn't work um on Azure as well okay how do we set that up so that we can get our app to be deployed automatically to azure every time we push a change to the main or Master Branch actually Azure makes that really easy for us so we can go to deployment deployment Center and depending on the plan that you select when you create the app you might even be able to set that up on app creation but if you didn't no worries you can do this afterwards like we're doing right now by going to the deployment Center all right so the source will be GitHub and and this is really cool right so I'm I'm already signed in here if that's not your case you would you would sign into GitHub at this point you could sign into different account if you wanted to I've got my personal account you can choose the organization snow frog Dev that's my personal account now it's going to load up my repository I could try to search the drop down but I've got way too many of them so I'm just going to use the search feature for Phoenix there it is and I only have the master Branch so that's the one we're gonna bind to and that's really all we need to do we press save and at this point Azure is going to create a new GitHub action file and actually install it on our repo it's going to make a commit for us and we should be let's refresh we should be seeing that yeah here we go so we can see the last commit Right add or update the Azure app service build and deployment workflow if we look here we've got this new file and the everything's all all set up for you it's pretty well done right on push to master Branch what happens well we build we publish we upload we deploy that's basically what of course you know you can add more stuff to it but this is all we need to get started and actually since this is a push right this commit is actually a push to master Branch our action should be running at the moment oh actually we see that it failed and actually that's going to give me the opportunity to highlight one of the one of the gotchas that you want to look for especially if you're not familiar or not very familiar with net projects and yeah here we go the publish step failed why did the publish step fail well it's telling us and this is a rather new error so you might have never seen that before you're going to start seeing it it's a new thing that came out over the the last few days and we're in mid-February or 2023. so with I think dot net 7.0.2 and up they no longer allow using the output flag when building a solution that's what this is right the output option isn't supported when building a solution and that it's a good thing actually because this Clues it this Clues us into one problem that we have the GitHub action file that Azure set up builds the solution in our solution we have a test project we have a console app and we have a web app we don't want to build and deploy all of that to Azure we just want to deploy the web app right so the GitHub action file that Azure produces it will work out of the box if what you have is just one project at the root level of your repository then that would work but if you have a solution with several projects you want to be careful you'll have to go and change some things in there and let's okay let's do it from our Visual Studio code and we should be able to pull in the change with the GitHub action file yep here we go and what we're going to do is change so I guess not only to publish it failed on the publish but we might as well change the build as well so we'll build which one is it that's the web right right right right so Phoenix Dot and we can here and now this change should the error we're getting in the GitHub action we could have changed it right in GitHub but you know change let's see I will say build only build the web app push that change and now should trigger a new run there we go might as well watch what's going on live let's go in there so that's actually a problem I've run into in the past and it wasn't quite as obvious because before we wouldn't get that error so it would just build the whole solution and it would deploy the whole solution to Azure and then it wouldn't work as expected and it was kind of hard to figure out why Okay so our build step has gone through so we fixed that.net publish area we were getting now it's actually deploying to Azure web app here we go yep we're done now it might take a second or two because received our code but you know it's starting up the app but let's see let's hit refresh on our page here here we go successful not bad right took us about 20 minutes to get this up and running now let me show you one other thing that tripped me up and it might happen to you too so it's a good thing to know let's say right our our app right now and our solution is rather simple let's make it a little bit more complex let's you know obviously your your web app would probably depend on other projects and packages right it would have dependencies that would need to be built and all that stuff so to kind of emulate that let's just get the web application the web project to depend on the console app we could pretend that there are some classes in there that we want to reuse or something and then look at that that's GitHub copilot it's trying to help me I'm not interested in package references I'm interested in Project references so you got that right let's add a project what is it forgetting this part yeah project I believe no let's see if GitHub copilot can help us the band on Console project yeah project reference yeah I don't know why it wasn't suggesting it before there we go and yeah even got the path and everything for us in there that's great thank you co-pilot and I think that's all we need so okay actually let's just to satisfy our sense that everything is working the way it should let's dot net run and let's run our web app project we want to make sure this didn't break anything there's no reason that it would have we didn't change the code we're just changing the really like the build the assembly dependency but in the build here we should probably see that it's also building the console app as it's getting things ready August they don't see it when we're building they don't show it but maybe we can get dot net build and we're building the with that so Phoenix web this should give us a terminal output yeah okay so here you go so now it's also building the console app as well as the web one when we try to build the web one that's just what I wanted to highlight let's do a commit and we're going to say web depends on console push that to GitHub which should trigger our action let's go see kick off the whole chain yep already started to wait a few seconds and this is worth knowing because it's a pretty benign problem what I'm about to show you but it's not immediately obvious and it's not necessarily easy to find the solution when you're not you know when this never happened to you before and it's it's okay so that was pretty quick now it's deploying so hopefully this will this will be one more resource out there with the solution to that problem because when researching this wasn't necessarily easy to find and okay here we go so our code is deployed let's give it a second or two for the app start and hit refresh right and this is what I expected this is exactly what I expected so why isn't why isn't it working anymore right are everything built properly everything was deployed properly we didn't change any code at all the only thing we did is we said oh uh we'd like the web app to also depend on the console project what's what's the problem with that well let me show you and this will be at the same time way to show a possible you know it means to kind of debug problems you might have with your Azure app service so we're going to go to log stream log stream if I can remember what there it is under monitoring monitoring so in log stream we should see the app start basically right if we scroll up enough and and and here it is right application started and but we see this is what I'm looking for right warning found files Phoenix console runtime config and phoenix.web runtime config to fix this issue issue to fix this issue you can set the startup command to point to a particular startup file in other words Azure doesn't know which application it's supposed to start because we're depending on the console app the console app is and executable and that's why it's producing this runtime config file and that's why Azure is all kind of is all confused we're only using that project for maybe you know just a class or two in there we're not actually running the executable but Azure doesn't know that so it's confused and it's giving us the means to fix the problem right where was it here I think the logs shifted did we lose it here it is okay for example.net and then pass in a dll so the startup command how do we set that up well we go to configuration settings configuration there we go and in the general settings tab there's startup command and it's empty right now because normally if all you have is the one executable app it'll know that it needs to start that but in this case we're going to help it along and we'll say.net and what's the name of our Phoenix Phoenix dot web Dot dll right hit save continue it's updating the web app settings which will kick off a restart of the application well maybe not restart but a start and let's see if we can refresh not yet sometimes there's a bit of caching oh there you go okay so we're done just wanted to show how it can be relatively easy to set up a web app to be deployed automatically through GitHub actions on Azure naturally you know the complexity increases if you have to set up a database service and maybe some messaging and things like that but really the base of it can be relatively easy

Channel: NimblePros

Views: 2,355

Keywords: .NET, Azure, C#, CI/CD, Cloud computing, Continuous integration, Deployment, Github, Visual Studio Code, Web app, Web development, dotnet

Id: sCcNJy7KrZo

Length: 26min 37sec (1597 seconds)

Published: Mon Feb 20 2023