We're going to deploy a simple web application
that uses an HTTP API so let's have a look at what we're going to create. Visually,
we're going to deploy an HTTP API that's going to have some routes which will be
things like options and get and put and delete for various different paths. So the routes are similar
to the methods that we have in the REST API. We'll then have a Lambda function and a DynamoDB
table, and in front of all of this, we'll have an Amazon S3 static website. So then we're going
to connect from our machines using a web browser to the static website and it's going to have some
client-side code running. It's going to actually have a form in which we can enter information and
submit it to the API. The website will then talk to the public endpoint of the HTTP API and via the
API, it will then be integrated into the Lambda function and then the DynamoDB table. So the
request information gets passed through to Lambda, processed by Lambda, and DynamoDB will then store
the results in a table. And what this application will do is very simply just add some products
to our database. This could be a way for a store owner to actually add new items to their database.
The form that's generated will also be populated with information from the table, so it will always
be returned back and viewable on the form. As you can see at the bottom here, you can then add new
items and when you submit them, they get added to the table and then added to the web form as well.
So that's what we're going to create. Now we're going to use CloudFormation for deploying the HTTP
API, the Lambda function, and the DynamoDB table. So CloudFormation deploys infrastructure using
code. We're going to cover it in a lot more detail later in the course. For now, you can just follow
my instructions. It will deploy those services but we still need to go in and configure the HTTP API.
We need to add the routes, we need to configure the integration and so on. We also have to create
our static website on S3 separately and we need to compile some code and then deploy that code to the
static website. So that's what we're going to do. Let's head over and start building
this out. In your course download, you'll find a folder called API Gateway. In
there, you'll have the deployinstructions.md, so you should open that. There's also a code.zip.
You need to unzip that file, which is normally a case of double-clicking it, and then you'll have
a code directory. You'll need to also open a command prompt and change to the code directory.
I've opened my deployment instructions in Visual Studio code, and as you can see, the first thing
to do is to create the CloudFormation stack. In the Management Console, I'm going to go to
Services, come down to Management and Governance, and you'll find CloudFormation. In CloudFormation,
we're going to create what's called a stack. We have a template file, and that file defines
the infrastructure we're going to create. For template Source, we're going to choose "Upload a
template file," choose the file in the API Gateway folder in the course download. You'll find
the code directory that we unzipped earlier. Let's double-click on that, and you'll find
this YAML template file. Select that file, choose "Upload." That's been uploaded, and you
can choose "View in Designer." This will give you a visual representation of what's going to
be created. You usually have to move around and zoom in a little bit to see this, but what we
can see here is we've got a DynamoDB table, we've got a Lambda function, there's an invoke
permission for the Lambda function, we've got a role, and we've got the API as well, the item API,
and all that is defined in this YAML code here. So we don't need to change anything there.
What we can do is choose this little Cloud icon with a tick mark in it that says "Create
stack." So choose the "Create stack" button, and that brings us back. Let's click on "Next."
We'll give our stack a name. Mine's going to be called "web app." Click on "Next." You need to
scroll down to the bottom, choose "Next" again, scroll down to the bottom, and this time
you have to make sure that you check this box to acknowledge that CloudFormation
is going to create IM resources. Now, I've flicked through all the options there.
I don't want to teach you CloudFormation at this point. We're just going to use it, and
later in the course, you're going to learn about some of those options we just bypassed.
So let's choose "Create stack." You can now see that the create is in progress, and if you
click on "Refresh," you'll see what's happening. So we've got the item DynamoDB table which
is being created, and that's complete. And now we can see the item function execution role
being created, and it will only take a couple of minutes for all of this to complete. And just
a minute or so later, we have a create complete for the entire stack, so everything should be
created. The next thing we need to do is create an S3 bucket. Now you can call it whatever you
want, but I'm going to suggest just following my instructions here. I'm going to call mine front
end Dash website Dash and then some random code to make sure it's unique in S3. I'm going to create
a bucket, I'm going to paste in that name, and then add a few random characters so that should
be unique. Now you do need to deploy this in the AWS region Us East North Virginia, which should be
the same region that you've created your stack in. So let's scroll down now and I'm going to
create the bucket. My bucket's been created, so I'm going to choose the bucket name, go to
properties, we're going to scroll to the bottom, click edit, under static website hosting enable,
and then we're going to specify index.html as the document, and then simply scroll down and
save. We then need to add a bucket policy, so let's go to permissions, we need to
disable the blocking of Public Access, so I'm going to save changes on that change and
confirm. Then we can scroll down to bucket policy, click on edit, come back to our file, and we're
going to copy this bucket policy. I'm going to paste this in, I'm then going to copy my bucket
Arn and put that over the top here making sure that I still have the trailing slash and the star,
that's important. So make sure you copy your Arn and your Arn finishes with slash star, and we can
save that bucket policy. We then need to update the CORS configuration, the Cross-Origin Resource
Sharing. So we scroll down to CORS, click on edit, and then we copy all of this code, and we don't
need to change anything here. Make sure you get the hard brackets at the top and the bottom, paste
that in, and save changes. So we now have a bucket policy, and that's going to allow GET objects,
so it's essentially allowing the public read of the objects within the bucket. The CORS policy
will allow any headers, the GET method, and any origin. Now let's come back to our file and see
what's next. So now we need to go to API Gateway, and we're going to configure API Gateway. I've
opened the API Gateway console, and here's the API that was created by CloudFormation. If I choose
that on the left-hand side, here under stages, we're going to create a stage, and
the stage is going to be called prod. We can scroll down and then create. We don't need
to make any other changes. Then on the left-hand side, we're going to go to Integrations, and we're
going to click on Manage Integrations, and there's already an integration here, but let's create a
new one. This integration is going to be for our Lambda function, so we choose Lambda function in
Us East one, and we're going to choose the web app item Lambda function here. Scroll down, leave all
these selections as defaults, and click on create. Now take a note of the integration ID. I'm going
to copy mine so I remember it and paste it in my file. Next, we need to create the routes, so
let's click on Routes, create, and then we need to create different routes for different
methods in the file. As you can see here, we have GET for slash items, PUT for slash
items, and OPTIONS for slash items. So I'm going to do those first. So I'm going to choose
GET, paste in what I just copied slash items, create. Again, choose PUT, paste in slash
items, create a third time, and choose OPTIONS, and again put in slash items and create. So your
screen should look exactly like this. Back in the file, the next one is slash items slash and
then this parameter with the curly braces and ID. That's going to be for GET, DELETE, and
OPTIONS. So let's choose create, select GET, paste in slash item slash brackets ID and create.
Choose create again, we're going to choose DELETE and then OPTIONS. So again, your screen should look the same
as mine. Make sure that you have the correct routes with the various methods inside of them.
We then select each one of these, choose Attach Integration, and choose an existing integration.
And you want to choose the one which you just created a moment ago. So I know mine is this
first one here beginning with 92n, so I'm going to attach that integration. Do the same for each of
these, exactly the same for each of these routes, and the same under slash ID. So finally,
your screen should look like this. Back in the file, the next thing we
need to do is configure CORS in the API. So what we need to do is configure various fields.
Now the bucket URL for North Virginia should be in this format https://bucket name.s3.amazonaws.com.
It's a different format for other regions, which is why I'm suggesting that you do stick to
the North Virginia region so you can follow me closely. So I'm going to paste my bucket name
in here, and then I can copy this entire URL. And back in API Gateway, let's choose CORS
configure. Under Access Control Allow Origin, we're going to add that URL. The headers,
we're going to choose star and hit enter for Access Control Allow Methods.
Again, it's going to be a star, and then a star for Access Control Expose
Headers. For Max Control Age, we can choose 96400, and Allow Access Control Allow
Credentials, and then click on Save. So again, your screen should look very much
like this, except you've got your own bucket name in the URL. For the Access Control Allow
Origin. We can now deploy our API to the stage. So we choose the stage name prod and deploy to
stage. And that's been successfully deployed. We should take a note of our invoke URL. You can
always find that by going up to your API, just clicking on it, and you'll find the invoke URL
for your stage here. So I'm going to copy this one and paste that into my file here. Now the last
step is the client-side code. Now we do need to have Node.js version 12 installed on our computers
and the Node Package Manager. Now I have included a link attached to this lesson to a page where
you can download and install those components. So this page here, you can find a Windows installer
or a Mac OS installer or also the source code, and you can also get the binaries for Linux as
well. So download the correct installer for your operating system and install npm and Node.js.
Back in my file, the first thing I need to do is actually update this file, config.ts. It's in
the client folder, then source, config.ts. And what we need to do is copy the invoke URL's API
ID. So that's this portion I've highlighted here, after the slash slash and before the dot. So
copy that. In the code directory, I'm going to go into client, source, and config.ts. We then
need to add our API ID. So just remove this code, making sure you leave these two tick marks either
side, paste it in, and that's it. Now just save that file. Now you may have noticed we do have a
region code here. So again, you should be in the US East 1 region. So that file's been saved.
Back in my deployment instructions, the next thing we have to do is go to a command
prompt and change to the client folder. So I'm on a command prompt in my API Gateway directory. I'm
going to change directory to code, and in here, I'm going to change directory to client. And
then we need to run npm install and hit enter. And that should just take a few seconds to
complete. Mine's complete, and I've just cleared the screen. I'm now going to run npm run build
and hit enter. And again, that should just take a few seconds to complete. So then we'll have
a build directory with our compiled code in it once complete. So again, I'm going to clear
the screen and then just run LS so I can show you that I have the build directory.
And if we change to the build directory, we can see that we have various files. Now what
we need to do is upload those to our S3 bucket. So back in my S3 buckets here under objects,
I'm literally going to select everything inside the build directory and then just drag it over
to S3. Now we can upload, and it should upload all of those files, and they should be in the
same structure as they were in the file system within the build directory. That's done. So
let's close out of there. And what you should see now is all of your objects in your bucket in
exactly the same structure as they were in the build folder. So for example, the static folder
here should then have some additional folders underneath it. So make sure that your objects are
in that structure. Let's come back up a level, click on index.html, and choose object
URL. So copy that to your clipboard. This is the URL for the web application. In a new
browser window, I'm going to paste that in, and I get this web form. If I click on items,
we can see that we don't have any items at this stage. So let's add something. Let's choose item
100. It's going to be a phone, and the price is going to be $900. So let's add that item. And you
can see it gets added in. Do the same again, 101 computer, and maybe this is $2000. And add new
item. So now we can see that we're adding things to the database. Now of course, I'm just showing
you the monoform. So let's go to DynamoDB and make sure that they really are there. So I've opened
the DynamoDB console, and if we go to tables, we can see that we have the all items table. If
we click on items, choose all items, and it's going to return the items from the table, and we
can see the two items we just added are there. If we then go ahead and delete an item, then
that should be removed from the database as well. So if we come back now, expand all items,
choose scan, run, and now the item gets removed. So back looking at our diagram, what we've done
is we use CloudFormation to deploy an HTTP API, a Lambda function, and a DynamoDB table. We created
a static website and compiled some code for it, and we configured our HTTP API to integrate with
the Lambda function. Now the Lambda function already had the code to talk to the DynamoDB
table, so it processed the requests that we sent free to it, and that's when we were adding
things to the table by creating new items in our web form. So that's it for this lesson. I hope
you enjoyed that, and I hope that was a useful lesson in helping you to understand API Gateway
and how to create a functional application. Now, if you want to remove your infrastructure,
the simplest thing to do is to go back into CloudFormation and delete your stack. So back in
CloudFormation here, you can simply select your stack and choose Delete, Delete Stack, and it's
actually going to remove all of that for you. So do that once you're ready, once you finish playing
around, and that will remove the API Gateway, the Lambda function, and the DynamoDB table. You
can then remove the bucket yourself manually.
