Hello and welcome! My name is Cephas Lin, and I'm a Senior Content Developer here at Microsoft. Today, I want to show you how to host a website or a web application in Azure based on lesson 3.2 in "Learn Azure In a Month of Lunches" by Ian Foulds. You can download this e-book for free at aka.ms/monthoflunches . For today's demonstration. I want to show you Azure App Service, which is a web hosting service in Azure that's great for web developers because it supports all the most popular programming languages that web developers use. So we're going to create a resource group. We're going to create an app service plan, and then we're going to create an app service app. After that, we're gonna deploy a simple HTML page to Azure, and then we're going to see it running live in Azure in minutes. With that, you get the benefit of security, high availability and scalability that Azure has to offer. So let's get to it. So to get started, open a web browser and navigate to portal.azure.com and log in with your Azure account. And once you're logged in, you're gonna see a homepage like this and then go go ahead and go to create a resource and then click web app. A web app is just an app service app. And in this create page, you can specify in the resource group you want, and the app service plan you want and then the app you want. But for this video, we're going to create everything. So let's create a resource group called MOL for a month of lunches app service and then for the app name. Let's give it a unique name called pizza lunches. Okay. And because you're just deploying HTML code - so let's stick with code and then for runtime, stat, let's pick ASP.NET 4.8. You won't actually be running ASP.NET 4.8, but that allows you to run your HTML code. Okay, down to app service plan. You can see that a name is already generated for you for a new app service plan and then for SKU and size. Let's click change size. The standard S1 tier is already picked for you. In fact, the higher the plan you select, the higher the density that you can host your app. So in the end, it actually saves you money. But because this is just a demo, let's go to "Dev / Test" and pick the free tier so that you won't lose any money. Okay, let's click, apply and click review and create, and then click create again. So now, Azure is creating all the resources that you just specified, that includes the resource group, the app service plan with a free pricing tier and also the app service app. And just give it a second. Once you see this message that says that your deployment is complete, click on this go-to resource, which will automatically take you to the management page for your new app service app, - and then go here to the URL of your app and see what happens. Right away, I just want to point out if you remember the pizza - lunches right here in the URL is the name that I chose for the web app name the name that you choose for the web app name is part of the URL. So you want to make sure that it's unique, But, great! Now you see a splash page. That means something is running in Azure. So it's exciting, but not so exciting because it's not your code, So that's where you're going to do next. You're gonna download some sample code and then try to deploy it to this app. So let's go back to the Azure Portal and then click here for the Azure Cloud Shell. So the Azure Cloud Shell is a terminal environment inside your browser, and you can you can run it anywhere because it's in the browser and there are two variants. One is Bash and the other one is PowerShell. And for this video, we're gonna stick with Bash. This Bash Shell in your browser is great, because not only can you run all the Azure CLI commands to manage your resources, but it also comes with a lot of great tools, including Git, because the sample code you want is in Git and it's in GitHub you're going to use Git to bring it down to your local folder. Local means local to your cloud shell. Okay, so let's paste this command called Git clone - and with this URL to our GitHub repo. Great. But before we move on, if this is your first time running, Git inside the cloud shell you're gonna need to tell Git who you are. So let's run, Git config global user "." email and then here I'm just going to use my own. And then you have to run Git config global user "." name. Okay, so now your Git installation is configured. Let's go see our sample code. Let's go to CD into the repository and into the third module and the prod folder. Let's take a look at what's here. That's it. That's our "website". That's just one html page, which is kind of simplistic, but you can kind of imagine if you have a node.js app in this folder or a python app in this folder, you would use the same steps to deploy them. So you have a folder with some files, or here, a file, but in order to deploy it to your app service app with Git this needs to be a Git repository. So let's initialize a Git repository using Git in it. And then once we have this initialized Git repository, let's add the files to it. Git add "." The add "." adds all the files in this folder into the repository, the once we add them we need to commit our changes. Let's have a nice commit message pizza. So this Git repository is ready to go. However, on the on the app service side for pizza lunches app service app, this app, by default, does not accept Git deployment yet, So you need to configure that. So you're going to run az webapp deployment source config, local Git and then give it a name of your app which is pizza lunches, And also the resource group name. So this command outputs a URL that you can use for your Git deployment. But what's embedded in it is the user level credentials. And if you read the book, the book tells you to use the user level credentials to deploy your app. But in this video, I want to show you how to use the app level credentials, the user level and app level credentials are both credentials that you can use to deploy your code to an app service app. The difference is that the user level credentials can be used to deploy code to any app in your subscription, whereas the app level credentials can only be used for that particular app. And so, in a sense, you can say that the user level credentials are more convenient while the at level credentials are more secure. So to use the app level credentials, let's find them first. We're going to run az web deployment list publishing credentials, and then you're gonna give the name of the web app again pizza lunches and then the resource scrutiny. This section of non-speech has been intentionally left blank. Okay, so in the .json output, you see the publishing username here and the publishing password here. But even better, there's a pretty crafted URL for you for your deployment that has the username and the password already embedded. We're going to copy this, and then we're going to add this as a remote into your local GitHub repository. So let's do "Git remote." Add Azure - that means, add a remote to this Git repository called Azure. We're going to paste this URL. Don't run this yet, because notice here, this dollar sign pizza is going to be interpreted by Bash as a variable. And we don't want we don't want Bash to do that. So we're gonna work around it by adding a single quotes, and the single quotes will will make sure that that Bash interprets that character just as a dollar sign character. Okay, so now you just need to do a Git push to that remote push. Azure master. Great. That's it. The code is deployed. So you just go back to the web page and refresh it. Wonderful. Now you see that the HTML file is deployed and it's displayed at the URL. This is great. But what if I tell you that you can do all the things that we just did? Including creating the resources and pushing your code to Azure with just one single Azure CLI command? and I want to show you right now. So if you go back to the Azure Portal back to the Azure Cloud Shell, let's assume that you're already in the folder that you want to deploy, and then you haven't deployed any resources yet. So let's run az webapp up and let's give it a different name called pizza lunches quick - because it's quicker. And then let's add a HTML flag. This tells the az webapp up command not to try to interpret the files that are in the in the folder because those are just HTML files. Okay, so let's run it. So, immediately. the az webapp up command recognizes that the web app called pizza lunches quick doesn't exist, so it tries to create a resource group for it and an app service plan for it and the app service app for it. And once the resources are created, it will try to zip up all the content of the folder and then upload it as a zip package, which is what it's about to do right now. See, And so the nice thing about this approach is that you don't even need Git, and you don't even need to play around with publishing credentials because that one command does all of that for you. Okay, so now the app is deployed. Let's go to pizza lunches quick and see what happens. Great. Same result. The HTML file is deployed to this new app and it doesn't take that many steps. Just one step. You can imagine that, of course, this is done in Azure Cloud Shell. But if you were on your own development machine and you have an app in this one folder that you want to deploy, just need to install Azure CLI on your local machine. And then you can just use az webapp up to deploy. And let's say you make any changes and then you want to redeploy your app. You just run the same command. And you don't even need to specify the resource group or the app service plan or the app name again, because the first time you ran the command az webapp up already remembered it and then stored into your your local folder. And so now, anytime that you want to redeploy, you just run az webapp up like that. And of course, if you have something other than HTML, then you would just run that you would just run it without the HTML flag. And of course I don't expect anything to change here. I'm just showing you that that's all you need to do to redeploy. And the command recognizes that the pizza lunches quick app already exists. And so it's not going to try to create any resources, and it will just try to perform another zip deployment. So, great! This is the end of the demo. I showed you two different ways to deploy a simple HTML site to Azure App Service. You may ask, which way should I choose? That's really a preference matter. You maybe already using GitHub to do source code management, in which case a Git deployment would really make sense. But, you know, if not, then az webapp up may offer you a very easy way. az webapp up, it doesn't support all the language run times right now. According to the documentation, it only supports Node, Python, .NET Core and ASP.NET, so it may factor into your decision whether to choose az webapp up. If you enjoyed this tutorial, the e-book has even more examples waiting for you to work through. Download your free copy of "Learn Azure in a Month of Lunches"