Build your first Web App with Microsoft Azure

In Mobile App Development


Build your first Web App with Microsoft Azure - read the full article about app development tutorial, Mobile App Development and Native and cross-platform solutions from Microsoft Azure on Qualified.One
alt
Microsoft Azure ,
Youtube Blogger
alt

Hello and welcome! My name is Cephas Lin, and Im 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 todays demonstration.

I want to show you Azure App Service, which is a web hosting service in Azure thats great for web developers because it supports all the most popular programming languages that web developers use.

So were going to create a resource group.

Were going to create an app service plan, and then were going to create an app service app.

After that, were gonna deploy a simple HTML page to Azure, and then were 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 lets 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 youre logged in, youre 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, were going to create everything.

So lets create a resource group called MOL for a month of lunches app service and then for the app name.

Lets give it a unique name called pizza lunches.

Okay. And because youre just deploying HTML code - so lets stick with code and then for runtime, stat, lets pick ASP.NET 4.8.

You wont 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.

Lets 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, lets go to "Dev / Test" and pick the free tier so that you wont lose any money. Okay, lets 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 its unique, But, great! Now you see a splash page.

That means something is running in Azure.

So its exciting, but not so exciting because its not your code, So thats where youre going to do next. Youre gonna download some sample code and then try to deploy it to this app. So lets 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 its in the browser and there are two variants.

One is Bash and the other one is PowerShell. And for this video, were 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 its in GitHub youre going to use Git to bring it down to your local folder. Local means local to your cloud shell. Okay, so lets 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 youre gonna need to tell Git who you are.

So lets run, Git config global user "." email and then here Im 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.

Lets go see our sample code.

Lets go to CD into the repository and into the third module and the prod folder.

Lets take a look at whats here.

Thats it.

Thats our "website".

Thats 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 lets initialize a Git repository using Git in it.

And then once we have this initialized Git repository, lets 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.

Lets 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 youre 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 whats 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, lets find them first.

Were going to run az web deployment list publishing credentials, and then youre 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, theres a pretty crafted URL for you for your deployment that has the username and the password already embedded.

Were going to copy this, and then were going to add this as a remote into your local GitHub repository.

So lets do "Git remote." Add Azure - that means, add a remote to this Git repository called Azure. Were going to paste this URL.

Dont run this yet, because notice here, this dollar sign pizza is going to be interpreted by Bash as a variable.

And we dont want we dont want Bash to do that.

So were 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. Thats 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 its 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, lets assume that youre already in the folder that you want to deploy, and then you havent deployed any resources yet. So lets run az webapp up and lets give it a different name called pizza lunches quick - because its quicker.

And then lets 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 lets run it. So, immediately.

the az webapp up command recognizes that the web app called pizza lunches quick doesnt 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 its about to do right now. See, And so the nice thing about this approach is that you dont even need Git, and you dont 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.

Lets go to pizza lunches quick and see what happens.

Great. Same result.

The HTML file is deployed to this new app and it doesnt 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 lets say you make any changes and then you want to redeploy your app.

You just run the same command.

And you dont 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 dont expect anything to change here.

Im just showing you that thats all you need to do to redeploy.

And the command recognizes that the pizza lunches quick app already exists.

And so its 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? Thats 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 doesnt 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"

Microsoft Azure: Build your first Web App with Microsoft Azure - Mobile App Development