AWS Project - Architect and Build an End-to-End AWS Web Application from Scratch, Step by Step

hi there and welcome to the channel let's start off this video with a story once upon a time when i first started learning aws i learned bits and pieces of it some of the core services i could find my way around the aws console i could do things like create a new ec2 instance or create an s3 bucket and upload something to it and i felt like my learning was going along pretty well but then one day i was telling some friends about aws and how i was learning a new way to do development and one of them said send me a link to something because i wanted to check out my handiwork which made me a stammer a little bit um about that because it made me realize two things one i hadn't actually built anything that i could share with the outside world and two and more importantly i didn't actually know how to build something because i wasn't able to put all the services together into an actual application i knew what the puzzle pieces were in other words the different aws services i had been learning about but i wasn't able to put them together into an actual usable thing and if you're feeling the same way you've come to the right place in this video we'll be using five aws services shown here to build an end-to-end web application from scratch and yes you can even share it with your friends when you're done if you'd like let me show you the working version to the power of math now admittedly this is a super simple application but it ties together all of the main components that you would need to build a much larger real world application this just takes in two different numbers so we have a base number let's say two and then an exponent we'll go with five and it's going to return the result the base to the power of the exponent if we click on calculate the result is 32. you'll see that we get that in the popup it's also being saved to a dynamodb table on the back end if you wanted to do something with it down the line all right now that you've seen that very exciting application that we're working towards let's walk through how we got there what do we need to do to make this happen well first we need some way to create and host a web page this is what your users will navigate to in their browser we need a way to invoke the math functionality we need a way to actually do that math to do the calculation that we saw somewhere to store the result we also need to return the result to the user and then sort of a given is that we need to handle permissions along the way as well and before i get ahead of myself if you're following along with me you are going to need a text editor something like a notepad plus plus or notepad whatever your favorite editor is you'll need an aws account and access to the console link above and below on how to set that up if you don't have one already and then a basic knowledge of aws this video isn't meant to be a deep dive into any of those five different services i mentioned but it's really to help you tie them all together into a working application so if you have some basic understanding already that will be helpful if you don't though you should still be able to follow along as i'm building out the app so back to what we need to do for this application we need a way to create and host a web page how would you implement that in the land of aws as with most things in aws there's actually several ways you could do this the one we're going to choose just because it's super easy it's called amplify with amplify you can build and host websites and it's a great service particularly if you're a front-end developer but for our purposes since our page will be so simple i'm actually just going to go create an html page in my text editor on my local machine and then we're only going to use amplify to deploy and host that web page so let's go do that now so here on my local machine i'm just going to create a new i'll start with a text file and we'll call this index dot html you can get rid of the txt yes we want to change this we want an html file or if you have a preferred way to create a new html file you can go ahead and do that but let's open this one up i'm going to use notepad plus plus over here and i'll just paste in some really simple code here we're basically just going to display to the power of math the name of our application now all of this code incidentally i'm going to upload and link it in the description below so don't feel like you have to type all of this out this one will be called index dash original we are going to update this later to be a little bit more robust but this is the one you want if you're looking at the description so let's save the file and then what we need to do is zip it up so zip up just the index.html file in my case that will be send to compressed folder or if you have some other way to zip up your files do that so you should have one zip file called index and now we're going to use amplify to deploy that here in the aws console navigate to amplify now i do have one app here already this is the completed app that we saw a minute ago so i'll create a new app and here we just want to host the web app we don't have a get provider so you can select this option right here and continue give the app a name i'm going to call mine power of math 2 since i already have an original one the environment name i'm going to use dev and we want to drag and drop so here's where you grab that zip file that we created a minute ago just drag that over save and deploy and i don't know if this is a small bug but you might need to refresh my screen just goes white there but you'll see deployment is successful and here is your link you can also get to this anytime by coming over to domain management and you can access those links as well okay so let's open this in a new tab i have the original one open here too let me just close that so i don't get confused this is the one that we just deployed our simple index.html page to the power of math yay all right so here's what we have so far super simple but we now have a live web page that users can navigate to back to our list of things to do i'm actually going to skip around a little bit here to this item in green and we're going to work on a way to do some math to do this we're going to use a lambda function as you might know a lambda function is just a bit of code that runs in response to some trigger for example when you upload a picture to an s3 bucket that could trigger a lambda function to go process the picture into a thumbnail or something like that it's just code or functions really sitting out there that get run when you need them and these are serverless meaning that you don't have to set up and manage servers to run the code it just happens automatically behind the scenes for you so we'll write some python code and use the python math library to do the calculations that we need back here on the console go ahead and open up a new tab here just so we can keep amplify handy and this time we're going to navigate to lambda once again i have the function that i was using for my original application i'll create a new one and we're going to author this from scratch that should be your default already and then for function name i'm going to do power of math function 2 in my case for runtime let's go with the latest version of python39 you can leave everything else the same and create function down here on the lower right all right this code down here we're going to need to update let me go grab that from my desktop once again if you're getting the code from the link in the description you'll want the one that says lambda original we are going to update this later so i wanted to keep them a separate but let me just grab this and then i'll walk you through it real quickly you can replace everything here so pretty simple code we're just importing the json utility package and the python math library so we can do our calculation then you've got your lambda handler this is common to all lambda functions and here's where we do most of the work this is where we're getting our math result so remember that our user is going to be passing in two numbers the base number and then the exponent we're grabbing those out of the event object that we'll get and then plugging them into this math.pow for power which is going to give us the result and then we'll return that result down here in the json object all right make sure you save this code you can just do a ctrl s and then very importantly you also need to deploy it so this button right here and now let's test to make sure this functions as we expect so click the little drop down arrow right here to the right of test and let's go set up a test event this basically lets us pass in some test data to make sure that the function's working so create a new event event name power of math test event in my case i'm going to do two you can leave this private and then down here it's giving you some starter code we only have two values to pass in one of them is going to be base and one is going to be exponent and you can choose whatever values you want here i'm going to do 2 to the power of 3 which should give us 8 so we can test that that's working scroll down and then save my bad we don't need quotes around those numbers if you are using strings you would okay make sure you get rid of that last comma there as well and then scroll down and save so that was just configuring the test event now we need to actually run the test which you can do right here by the orange test button and we get a status code of 200 and the result is 8. perfect so our lambda function is working all right this is what we have so far just the simple html page hosted an amplify and a lambda function to do some basic math what's next well next you need to go hit that like button if you're enjoying the video i would really appreciate it it does help the content spread to more people and also think about subscribing to the channel thank you so much all right back to work next we need a way to invoke that math functionality or basically invoke that lambda function so our users obviously aren't going to go into the aws console like we just did and run it so we need a public endpoint or url that can be called to trigger that function to run and for that we're going to use api gateway this is a core service in aws that you can use to build your own apis application programming interfaces whether those are http rest or websocket apis and it's really the perfect way to invoke a lambda function so let's go do that all right back here in the browser i'm also going to open a new tab for this just so we can keep all the services up and visible easily and for this one we're going to navigate to api gateway once again this is my original api let's create a new one by clicking on the create api button up here for this we're going to be using rest api so here on this section click on the build button you can leave these first two options as they are so this will be rest and a new api and then we need to give it a name so mine will be power of math api 2. you can leave everything else the same and then create api okay so we have sort of an empty api right now there's no methods that somebody would call so let's do that next over here on the left make sure you have resources selected and then here make sure you've got the backslash selected and then on the actions menu create method the type of method will be a post so remember the user is sending in some data those two numbers and then click the little check mark right here for integration type we're going to use a lambda function and then the lambda function name itself you'll need to start typing in here but it should be power of math and in this case function 2 for me click on save and ok here we're giving api gateway permission to invoke this lambda function now one other thing we need to do is enable cores or cross origin resource sharing so come over here and make sure you've got post selected and then on the actions menu enable cores and basically what this does is allows a web application running in one origin or domain to be able to access resources on a different origin or domain so because our web application is running on one domain and amplify our lambda function is going to be running in another we need to be able to work across those domains or origins that's why we're doing this you can just click on enable course and yes and now let's deploy the api so we can test it out so up here again on the actions menu let's deploy api we'll need to set up a new stage here you might have different stages for dev test production and so on this one we'll call dev and deploy and then you'll need to copy this url right here the invoke url and we'll need that later so just pull up a notepad or wherever you want to keep this i'll do that myself now and just so i can keep things straight this will be api gateway url and i'll just save that for later all right now let's go validate this so over on the left come into resources click on post and here you'll kind of see a flow of how this works so we have the method request the integration request to lambda lambda's going to work its magic and then we're eventually going to get this response back to the client to the browser so we want to test that this is working to do that click on the blue lightning bolt here and this will let us send in whatever test data we want so we'll just keep it simple it's the same format we use to test lambda actually so we'll have base and let's say two comma and then the exponent number and maybe we want to try with say four okay now let's test and here's the result 16 everything worked yay progress now we can trigger our math function in lambda with an api call we still haven't hooked that up to our index.html page and amplify yet but don't worry we'll get there next though let's see how to incorporate a database into all of this we want to persist or store that math result somewhere and we obviously need to return it to the user as well now maybe i should rephrase that we don't actually have to store the results anywhere we could just return them but most real world apps these days have databases so i'll walk you through how to set this up as we do that we're also going to need to handle permissions between the different parts of the application starting with the database for our purposes we're going to be using dynamodb this is a key value or nosql database it's generally going to be lighter weight than something like a relational database where you have to go set up your schema your relationships and so on ahead of time and then i mentioned a second ago that we have to deal with permissions as well specifically we're going to need to give our lambda function permission to write to the database so let's go work on this next all right once again i'm going to open a new tab so we can keep this one dedicated to dynamodb and here we want to create table for table name i'll do power of math database 2. for partition key we'll say id you can leave everything else the same and create table okay now we do need to save the amazon resource name or the arn for this so if you click into that table and under general information and additional info grab this arn right here and then just paste that into the same notepad or whatever you're using to store your links so this is my arn for the database and we'll come back and get that later all right now moving on to that permissions discussion this has to do with our lambda function having permissions to write to this table so we'll come back to our lambda function here the power of math function a 2 or if you've closed that tab just navigate back to lambda and find this function and you want to go to the configuration tab here and then if it's not already selected go to permissions and then you want to click on this role name here the execution role this should open up in a new tab and we basically need to add some additional permissions to what this role has already permissions related to dynamodb to do that come over here to the right add permissions and create inline policy and then i personally find it easier just to work with the json code so click on the json tab here and let me go grab the code that we need to put in here this again will be linked in the description if you want to grab it but i'll just copy all of this and replace what i have here and this is just basically saying allow all these different actions in dynamodb so the lambda function is going to have permissions to do all of these things on our dynamodb table but very importantly you need to update this right here to that table arn that you copied just a minute ago so let me grab mine it's this one right here starting with arn the lower case arn colon aws colon so copy that put that right here then we'll review policy we'll give it a name power of math dynamo policy and finally create policy down here on the lower right okay so that was the permissions thing that we needed to get through now we can update the lambda function to actually go right to the database it wasn't doing that before so let's come back to the lambda function here and code and if you still have your execution results up you can just close those we want the function.py here your python code and for this one i also have some code completed that i'll just paste in let me grab that this one's going to be power of math function lambda final so we'll grab all of this paste it in here replacing everything now i do need to make an update to my table name since i'm using a two at the end of mine so i'll just walk you through what's new here so we have two new imports up here one for the aws sdk software development kit and because we're using python this one's called boto3 and then we've got some packages here that help us with date and date formatting so when we go to insert our math result into the dynamodb table we're also going to insert the current time and that's what we're doing right here is working with the dynamodb table so we're getting our boto3 resource for dynamodb grabbing the table so in my case this was power of math database 2 and then getting the current time the rest of this is the same as what we had before but the code that actually inserts into the table is with this table.put item and then we're inserting the math result along with the time so just a few minor updates from what we had before all right so paste in that updated code make sure you save with a control s very importantly make sure you deploy this pushes out your changes and then let's test so we should still have the same test case back here or test event a base number of two exponent of three you can change that if you want but let's just hit test and see if we get the correct result yay result is still eight but this time if we go look at our dynamodb table back here and we come into explore table items this will show you what's been stored there we have a result now so this is the one that just came through from us running that test so this was the math result here eight and then the time that that happened all right things are looking good we're writing things to the dynamodb table we've got the proper permissions on the lambda function we're super super close but you might have noticed that we're missing a connector here and i didn't just mess up the diagram we actually are missing a connector here between amplify and api gateway we've built out all this goodness over on the right but currently from our index.html page there is no way to get to it so let's work on this final piece for this part we're going to need to update the index.html page so go ahead and open that up i'll open it in notepad plus plus and remember this code is what's giving us this over here i'm going to paste in the final code here so definitely not something you want to type if you're grabbing it from the description below it'll just be the index.html the original was just a simple one that's giving us that so make sure you're grabbing that one there and i'll walk you through the code here let me collapse this to make it a little bit easier so first i've just done a little bit of a styling update definitely personal preference here feel free to update any of this css code and then down here under body we have an h1 tag here to the power of math so that'll be our heading and then the form so this is where the user is going to input their two numbers and then we have a calculate button here as well increase the size a little bit but the magic really happens here with this call api we're passing in the base and the exponent those two numbers and call api is defined right up here in the script tag and this is what's hooking us up to our api gateway endpoint but very important though you need to update that with your url so let me go grab that for mine here it should end in dev if you created a dev stage like i did so i'll grab that update this here but this is basically the code that is going to pass your base and exponent to the api gateway endpoint and ultimately we're going to get this alert back with the result of that calculation the alert being just the pop-up that we saw there in the browser all right let's save this i'll close out of that close out of that and then we need to make a zip file out of this again so i'm going to delete our original zip file and then this is the updated index.html we'll send to compressed folder so there's our new zip and then we're going to need to go redeploy it using amplify so i've got amplify open in this first tab back here just grab the zip file drag it over here and this will automatically redeploy so deployment is queued and success so it should be the same domain here you can open it again or just come back to the one that we had open from earlier and i'll do a refresh so this is our original one let's see what we have now and tada some style all right so let's walk through what's happening here we're going to enter our numbers let's just say 2 to the power of 8 for something different when we click this calculate button that script here on our html page is going to call api gateway that's then going to trigger the lambda function which does the calculation that gets written to the database and then we're going to get a message returned to us in the browser through api gateway so here we go calculate and the result is 256. all right that's our completed application nicely done i hope you were able to follow along and have a working application yourself this is a link that you should be able to share with your friends if you want all right now before you go run off a very important reminder if you've been following along let's go delete everything that we spun up in the video everything should be in the free tier but just in case you don't want any surprise bills at the end of the month so i'll walk you through how to delete things i'll just close out of this tab where the app was and then coming into amplify your app you'll want to come up to actions on the top right here and delete app you'll need to confirm this is my original one that i will keep for now next come over to dynamodb and i'll click on tables over here just to make sure i'm getting the right one this was powermath database 2 and up here you can say delete this also has confirmation required and delete next you can go delete your lambda function so back here power of math function 2 or if you're at your functions top level just select that and actions and delete delete and okay or close and then lastly api gateway come here back up to apis and i'll delete this one as well so up under actions and delete and with that one final thing to do if you haven't already go hit that like button and also consider subscribing for more content like this thank you so much for watching i hope you found this helpful

Channel: Tiny Technical Tutorials

Views: 112,719

Keywords: technical tutorials, technical training, technology, amazon web services, aws, aws tutorial, aws for beginners, amazon web services tutorial, build a web application in aws, aws web application from scratch

Id: 7m_q1ldzw0U

Length: 26min 13sec (1573 seconds)

Published: Mon Jun 27 2022