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"