Azure Serverless Demo

Video Activity
Join over 3 million cybersecurity professionals advancing their career
Sign up with
Required fields are marked with an *
or

Already have an account? Sign In »

Time
14 hours 28 minutes
Difficulty
Intermediate
CEU/CPE
15
Video Transcription
00:00
>> Hello Cybrarians, welcome to lesson 7.5 of
00:00
module 7 of this course titled AZ-301,
00:00
Microsoft Azure Architect Design.
00:00
Quick information on what we'll
00:00
be going through in this demo.
00:00
We'll start out by reviewing demonstration objectives,
00:00
then I'll show you the creation
00:00
of an Azure Function App,
00:00
and then we'll upload code to the Function App,
00:00
which would be our function.
00:00
>> Then I'll create
00:00
>> an Event Grid subscription, and
00:00
I'll configure the Function App to be
00:00
triggered by an Event Grid subscription.
00:00
Then we'll verify the solution itself.
00:00
But let me help you to understand first
00:00
what we're trying to achieve.
00:00
This is the setup that I am intending to show you.
00:00
I already have the application service,
00:00
I already have the Blob storage account created.
00:00
The only things that I'm yet to create are
00:00
the Event Grid service, and the Azure Function App.
00:00
I have all these others
00:00
created, and I'll show them to you.
00:00
What we intend to achieve with this it's an image
00:00
resized application that's implemented
00:00
in a server-less solution.
00:00
The user that's coming in from
00:00
the Internet is going to access the web application
00:00
that hosted in Azure App Service,
00:00
and then they're going to be able to
00:00
upload images to that web application.
00:00
When they upload images,
00:00
the web application accepts the images, and then
00:00
stores them in an Azure Blob Storage.
00:00
Now the Azure Blob Storage has two containers,
00:00
a container called images,
00:00
and a container called thumbnails.
00:00
Whenever any new image is
00:00
uploaded by end uses, and they're stored in
00:00
the images container of
00:00
Azure Blob that's going to trigger Event Grid.
00:00
Event Grid will use
00:00
that event to trigger our Azure function,
00:00
which we now make a call to the images container
00:00
to grab the image that was just uploaded by the user,
00:00
do some processing to resize
00:00
the image to the size of a thumbnail,
00:00
and then upload the image to the thumbnails container.
00:00
Then the web application is designed to
00:00
display the thumbnails that
00:00
are stored in the thumbnails container.
00:00
That's what I intend to show you today.
00:00
Remember that I already have the app service,
00:00
>> and I have
00:00
>> the storage account, and the containers already there.
00:00
Actually let me go to
00:00
the Azure portal to show this to you.
00:00
Right now I'm in the Azure portal.
00:00
If I go to my resource group, which is this,
00:00
and that's my web application over there,
00:00
and that's my storage account.
00:00
The first thing I'll do is I'll
00:00
show you my storage account.
00:00
Let's open the storage account.
00:00
Right now I'm in the containers
00:00
of my Azure storage account,
00:00
the Blob service,
00:00
and you can see that I have
00:00
two containers and images
00:00
container, and thumbnails container.
00:00
Now if I click on the Images container,
00:00
you see that it's currently empty.
00:00
Now let me go back, and I have
00:00
my web application running in Azure App Service here.
00:00
If I click on that,
00:00
and if I browse to my web application,
00:00
that opens up my web application, and you can see I
00:00
can upload images to this web application.
00:00
If I click on that,
00:00
I can select an image
00:00
which I've uploaded and that disappears,
00:00
but if I go to my images
00:00
container of my storage accounts
00:00
in the back-end and I refresh this,
00:00
you can see the image that I uploaded.
00:00
Now start here. So that's good.
00:00
I'll go ahead and delete
00:00
this image, because I'll
00:00
be uploading the same image again.
00:00
What I now wants to do is, that once
00:00
a new image is dropped in this container
00:00
received by the front-end web application
00:00
and dropped into this container,
00:00
that's going to trigger integrate,
00:00
which is going to trigger the execution and
00:00
Azure functions, and will grab this image,
00:00
resize it, and place
00:00
the resized image into this thumbnails container.
00:00
Let's go ahead and do the next steps.
00:00
So the next thing that I'll do is I'll go ahead
00:00
and create an Azure Function App.
00:00
I'm in the Azure portal,
00:00
if I go to Create a resource, and I type in function,
00:00
select my "Function App" and I click on
00:00
"Create," I can specify
00:00
the resource group from a Function App.
00:00
I'll put it in the same resource group,
00:00
the Mod7 resource group,
00:00
and I'll give the function a name.
00:00
I want to publish a code,
00:00
not a Docker container.
00:00
The runtime stack will be.NET
00:00
Core and the region I'll put that in UK South.
00:00
I can go next to hosting.
00:00
You cannot create an Azure function
00:00
without a storage account.
00:00
So I have an existing storage account,
00:00
so I'll just switch to that storage account.
00:00
I want the backend of
00:00
the windows that find the plan type,
00:00
I want that to be consumption,
00:00
not premium or App Service plan.
00:00
I can go to the next application insights,
00:00
I'll leave that disabled for now.
00:00
It always good to enable that for production,
00:00
but I'll leave that disabled.
00:00
I've got the next on the tags.
00:00
I don't want to add any tags, let's review and create.
00:00
Then if I click on "Create",
00:00
that's going to begin the creation
00:00
of my Azure Function App.
00:00
My Azure Function App created successfully.
00:00
That only took a few minutes to create.
00:00
Let's move on to the next step.
00:00
In the next step, I'll show you how to publish
00:00
code to the Function App from GitHub.
00:00
There are different options that we have.
00:00
We can just do the function development
00:00
in the portal using Visual Studio,
00:00
>> or Visual Studio Code.
00:00
>> But in this case, the code
00:00
>> I'll be publishing is already
00:00
>> existing GitHub, and I'll just publish it.
00:00
>> And here's a visual representation
00:00
>> of what I'll be doing.
00:00
I have my Azure Function App,
00:00
I have my code that's running into existing GitHub.
00:00
I'll be configuring my Function App,
00:00
so I'll be publishing the code on
00:00
GitHub to it. Let's get on with that.
00:00
If I click on "Go to Resource",
00:00
that takes me to my Azure Function App.
00:00
At the moment, it's currently empty.
00:00
There are no functions that exist in this Function App,
00:00
if I click on "Platform Features" and
00:00
if I click on "Container Settings surveyor".
00:00
Container settings takes me to
00:00
the Deployment Center,
00:00
>> and I want to publish from GitHub,
00:00
>> which the public GitHub,
00:00
we select an external,
00:00
and I'll click on "Continue" here.
00:00
I'll need to put in my repository URL, and the branch.
00:00
So here's the repo that
00:00
contains the code that I want to publish,
00:00
so it's available on the Azure samples.
00:00
It's called function image upload resize.
00:00
I can get the git URL over here.
00:00
I can simply copy that,
00:00
go back to my function and I can paste that in there.
00:00
It's asking for the branch that I want to use.
00:00
I'm going to be using the master branch,
00:00
not any of these other branches.
00:00
If I go back here, and I type in master.
00:00
Remember that the branch name is case sensitive.
00:00
Repository type will be git.
00:00
Is it a private or a public repository?
00:00
It's a public repository, and therefore I'll select
00:00
"No" and I'll click
00:00
on "Continue" and I'll click on "Finish".
00:00
That should begin the publishing of
00:00
the codes diagnosis in GitHub to this Function App.
00:00
The function code successfully
00:00
published now to the Function App.
00:00
That's in a success, which is great.
00:00
You can see the thumbnail function
00:00
that's been deployed over there.
00:00
The next thing that I'll do is, I'll go ahead and add
00:00
some configuration into this Function App.
00:00
Let's go back to platform features,
00:00
>> and I'll click on the "Configuration".
00:00
>> I need to supply
00:00
some parameters into this code
00:00
for it to work effectively.
00:00
If I go ahead and click on "Advanced edits",
00:00
and I'll just copy
00:00
some configuration, and I'll explain
00:00
the configuration that I'm pasting here to you.
00:00
Here's some configuration that I'm pasting here.
00:00
Number 1 configuration is
00:00
called THUMBNAIL_CONTAINER_NAME.
00:00
The code itself is expecting
00:00
this parameter to be passed through.
00:00
What this is specifying,
00:00
it's specifying the container that
00:00
the function will store the resized image into.
00:00
That's what that is specifying.
00:00
After that, we have
00:00
this other parameter called THUMBNAIL_WIDTH,
00:00
which specifies the value of
00:00
the size of the resized image.
00:00
That's what's specifying.
00:00
I'll add a comma there at the end,
00:00
so that's all good.
00:00
Actually before I click "Okay",
00:00
if I scroll up, that's pointing to my storage account,
00:00
so now the function code knows
00:00
the storage account and the name of the container to
00:00
start the resized image and also the size of the image.
00:00
If I click "Okay" to that,
00:00
and if I go ahead and click "Save".
00:00
Now once that's saved successfully,
00:00
I'll move on to the next part of the process.
00:00
That's successfully saved now, so let's move on.
00:00
In the next path,
00:00
I will show you how to configure
00:00
an Event Grid subscription for our Azure Function.
00:00
I'm still on the configurations of the Azure Function,
00:00
so I'll click "Back" and I'll click
00:00
on "Go to resource" to go back to my Function App.
00:00
What I would do is I'll expand
00:00
this and I'll go onto my Thumbnail Function,
00:00
and under the Thumbnail Function is where
00:00
I'll be configuring my Event Grid subscription.
00:00
Because of the native integration
00:00
I was talking to you about,
00:00
I can actually just click from within the Function App
00:00
and say add Event Grid subscription over there.
00:00
I can give the Event Grid subscription in name.
00:00
I'll call it image resizes subscription,
00:00
the event schema will be Event Grid Schema,
00:00
the topic type will be in this case,
00:00
storage account is a topic type.
00:00
I'll select my "Subscription",
00:00
I'll select my "Resource
00:00
group" and I'll select the results,
00:00
which is my storage account over there.
00:00
I'll select all my storage account,
00:00
what event types do I push to the destination?
00:00
By default it selects whenever a Blob is
00:00
created or whenever a Blob is deleted.
00:00
I just want whenever a Blob is created.
00:00
I'll go ahead and just select when Blob is created.
00:00
Only that selected.
00:00
You can see that it's automatically
00:00
added the Web Hook endpoint for me.
00:00
The next one that I'll do is I'll go under
00:00
the Filters tab and I'll a filter.
00:00
Because I don't just want to publish
00:00
an event or push an event to trigger my function,
00:00
if an object is created in another container,
00:00
I want it to be specifically if an object is
00:00
created in the container called images.
00:00
Let's go and enable subject filtering,
00:00
which is why I was talking to you about earlier,
00:00
so I can enable filter in there and I can say only
00:00
push a notification whenever
00:00
an object is created on that the images container.
00:00
Once I have this in place,
00:00
I can go ahead and click on
00:00
"Create" and that's going
00:00
to begin the creation of that event subscription.
00:00
That's succeeded already, so that looks good to me.
00:00
The next thing that I will show you is
00:00
the verification of the solution that we just designed.
00:00
What I'll do here is if I go back on my Azure Function,
00:00
what I'll do is I would just monitor my function.
00:00
If I select that and if I
00:00
expand the logs here
00:00
so I can set a logs that's going through,
00:00
we'll have that just switched on.
00:00
Then what I'll do is I'll go back to
00:00
my image resizer app.
00:00
Now what I expect to do is,
00:00
once I upload an image,
00:00
I expect the image to start.
00:00
Let's go have a look at a storage account.
00:00
I expect the image to be recollected by
00:00
the front end web application and stored into
00:00
this images container over here.
00:00
When that starred Event Grid is going
00:00
to push the events to Azure function,
00:00
which is going to trigger the function to
00:00
execute, grab this image,
00:00
resize it, and place
00:00
the image into the thumbnails container.
00:00
Then once that happens,
00:00
my web application should display
00:00
that generated thumbnails just
00:00
right under here. Let's have a look.
00:00
Let's click to "Upload" and I'll
00:00
upload my image again and there you go.
00:00
Just within a few seconds, now that's displayed.
00:00
Now what happened on the backend?
00:00
Let's go back over here.
00:00
If I refresh this,
00:00
you can see that
00:00
the resized image exists on a disk dominance directory.
00:00
Does Azure Function put in it there?
00:00
If I go to Azure function,
00:00
you can see where the function was
00:00
triggered and when it was executed by
00:00
Event Grid and then
00:00
wait does the processing and then place it there.
00:00
I hope that makes sense to you.
00:00
Thanks very much for watching
00:00
this video and I'll see you in the next video.
Up Next