AWS CDK - A Crash Course (1Hour)

hi my name is manoj and in this episode i am going to show you how to use aw cdk to automate your infrastructure now if you have a production application that is running on aws you must automate your infrastructure why would you do that because there are so many benefits to it for example imagine that there's a disaster and the disaster strike on the region that you spin up your aws resources so you want to spin those resources in a different region so your users can use your services without much interruptions but if you have created those resources manually in the aws console you have to do it all over again in that new region and that's going to take a lot of time and of course that you are in a lot of uh under a lot of stress so probably you will make mistakes so that is one of the reasons that we would need to automate our infrastructure so we can easily spin up our resources now this is just one of the examples there are so many other use cases where you would need infrastructure automation for example imagine that you want to create a white label product of your application then you can easily use your infrastructure automation code to spin up that white label product fast okay so what i'm going to do in this video so in this video i'm going to automate the infrastructure that is required to run and front-end application that is written in react and also the back-end part of it that is a restful api that is running inside a container and then we are going to connect these two together and actually build our application from scratch but hey before going into the implementation we are going to look at the benefits of cdk and why would you use cdk instead of writing cloud formation templates in json and yaml so i'm going to discuss five main benefits that you will receive by using aws cdk and after that we'll jump into the implementation now if i explain what cdk in one sentence that is a construct library which helps you to automate your infrastructure very fast now here's the first benefit that you get from awcdk and that is ability to use a preferred programming language to automate your infrastructure now someone might have this question i already have cloud formation to automate my infrastructure so why would i need cdk the best answer is you can use one of your preferred programming language to code your infrastructure it's not just configuration you know this yamaha json configuration but actual programming code cdk supports multiple programming languages for example typescript javascript c sharp java python go like those programming language i think they will be bringing more programming language going forward so you can pick one of these programming languages and start provisioning your infrastructure and one of the main benefits that you get when you start using a programming languages is that you can use all the programming constructs you can use selections you can use loops right you can use this if then else logic to selectively provision a certain infrastructure based on certain criterias and if you have a set of infrastructure to be provisioned you don't have to like repeat the code maybe you can use that user loop let's say for loop to provision all these resources in in in one loop so all these constructs uh that we usually use in programming can be used in cdk okay here's the benefit number two the ability to use autocomplete and inline documentation now this is another perk of using a programming language because uh since the programming language we can import different libraries cdk libraries those libraries itself contain documentation and it supports autocomplete you know that is bound to your ide so you don't always have to refer back to the documentation to see what certain attributes are supported by this resource and so on you can just type dot and maybe control space and then you get a full list of methods that particular resource supports with auto completion you will get the inline documentation of that certain attributes so you will know what attributes to use and how to use that now here's the benefit number three ability to use your infrastructure code alongside with your runtime application code now this is one of the really cool feature because now you don't have to separate your infrastructure code from your application code because cdk supports creating your infrastructure and also linking that infrastructure to the application code now for example imagine that you want to create a static web hosting bucket so you can use cdk to provision that s3 bucket and enable static web hosting plus you can link the html css javascript code into the s3 bucket as well so when you are done with the cdk deploy you will have the static web application and also your application will also be running all right now let's talk about the fourth benefit and that is the ability to use higher level construct in cdk to easily provision our cbk applications now cdk supports three levels of construct level 1 constructs level 2 constructs and level 3 constructs now out of these three level one constructs are really cloud formation representation of a certain resource now imagine again you want to create a s3 bucket so in s3 you have a certain attributes that is required and that is optional required when you are provisioning it using cloud formation so you can exactly have a map with those attributes in cdk that gives you more control over creating your s3 buckets okay so what about level two constructs now level two constructs again represents a particular cloud resource imagine it's the s3 bucket but it's going to give you more abstract methods as well as some default values to provision that resource now let's take the example of creating s3 bucket using a l2 construct so in that case you don't have to provide the values for each and every attributes of course you can add some values for certain attributes and you can also use some methods like you know add lifecycle policy method and that is going to inject some of the sensible default values to creating a lifecycle policy for an s3 bucket now finally we have level three constructs now level three constructs are also known as patterns now the main reason there is a level three constructs do not directly represent one cloud resource there could be one no more cloud resource that has been provisioned to accomplish a certain activity or certain task the best example is there's something called application load balance forget service now the main purpose of this particular construct is to deploy containers on aws in a scalable manner so it's going to provision an ecs cluster that is powered by aws fargate and then it is going to create a docker image out of the folder that you specify and then put that docker image into ecr the elastic container registry and then it's going to create a ecs service so it can create and manage a number of containers not only that it's also creating a application load balancer that is in front of your ecs service and your customers can send traffic to this application load balancer endpoint and consume the services offered from your containers so that is the third type of construct now here's the benefit number five that is ability to use developer friendly cdk cli now aw cdk comes along with the cdk cli and we can use that cdk cli to create a cdk project in the preferred language you can use typescript java c-sharp or whatever the preferred language of yours and initiate that project and then once you are done with creating your resources in cdk you can use cdk synth command to synthesize your cdk code to the corresponding cloud formation template now one thing you should remember is that cdk is using cloudformation behind the scene and the main benefit is you don't have to write that entire cloudformation template which will be really long and you just only have to write few lines of code to you know get to that long cloudformation template so once you correctly synthesize your stack then you can use cdk deploy to deploy your stack to aws cloud now after the first deployment you probably want to update some of your infrastructure and you can do that in cdk code and then check the diff by using cdk diff and it will show the diff of the cloud resources so you know what cloud resource have been changed or added or deleted now those are the top five benefits i saw in cdk now you also know about it so without any further ado let's uh switch to the other side and start building a cdk app all right guys so let's get started with our implementation now as you can see i have written a blog post related to the theoretical aspects as well as the demo that we are just going to do so if you go to this particular link you can view this and i'll put this link in the description as well so you guys can follow along if you are doing that um so yeah so this uh includes uh the theoretical aspects that we discuss about and you know the top five benefits of cdk and also if you scroll right here so this is the part that we are going to start now so i have added all the steps that we need to follow along when we are building this application so yeah so let's get started okay now i have the vs code open on my left side uh but before actually go ahead with these steps uh let me quickly show you the architecture diagram that we are going to build with cdk all right so this is a fibonacci generator application and it has both front end as well as the contain rise back in so in the containers back end we have these containers running and those are managed by ecs service right and this ecs cluster is powered by aws forget and which is really cool because we don't have to manage any easy to servers here and then we have application load balancer and this application load balance is again connected to a cloud front distribution now i have added the application load balancer as a custom origin to the cloud from distribution and all the request that has this slash generate star styles like wildcard all the requests with this path pattern they will be directed to the application load balancer and the default route is slash star and the default request will direct to the front end bucket and it will serve the front-end application now why we added the cloud front here two reasons basically we wanted to cache the request of the front-end static assets and also because we will be calling this application load balancer domain if we directly call it then that will be you know a different origin and i have like enable this cross like cross origin request supports but with the cloud front here we will be associating our ssl certificate right at the cloud front level so both these origins can be called with the same domain name and with different path patterns so here the cloud front distribution we are going to associate this custom domain and yeah we have route 53 our dns service so it is always mapped to the cloud fund distribution so all the requests to the domain will be directed to the cloud front okay so this is our architecture and let's get started so i have opened vs code and i will click open folder and then i'm gonna create a new folder in my desktop and let's call it cdk youtube demo create and open this okay so first and foremost guys we need to install couple of dependencies now let me increase the font size just a little bit so you guys can see better yeah even before installing the cdk there are a couple of prerequisites you know you have to make sure that you have aws cli installed for whatever operating system that you have and uh and then you need to configure uh one of the imuser credentials and this im user should have administration permissions so your cdk application can also have access to all the aws resources so i'm not going to go over that apart from that you need to have node.js particularly the node.js version greater than 10.3 so with those two prerequisites installed we can start installing cdk toolkit and i'm going to install it using npm so paste it and hit enter well actually i have done that i am not going to do that but then i can actually see the cdk version so let me quickly show you the version that i have currently running cdk-version that is 1.105 okay now i'm going to initialize the cdk project now as you guys can remember previously we can use one of the preferred programming language to create the cdk project and in my case i'm going to use typescript so yeah i will initiate a cdk project let me copy this command and paste it right here so it is cdk init and you have to add this flag dash dash language and then typescript so if you want java then java and likewise now it's going to spit out some folders let's explore it in just a little bit and also it has given us uh some of the useful commands now this is one of the useful command and this will watch our typescript code and whenever we do changes to typescript code it's going to compile them to javascript so let's wait until this is completed and by the way guys if you like this type of contents make sure you subscribe to our channel because we are releasing a video on every week and you can hit that notification bell icon as well so you will be notified as soon as one of our creators released a video all right so it is completed um let me clear the screen and let's see what is the next step so now we're actually going to build our application the fibonacci generator so what this application does is uh basically from the front end a user can request the value of a particular fibonacci number then the front end will forward that request to the back end so our back end as i previously showed you uh so this one so it's a container stressful endpoint api really so it's going to calculate the result and send it back to the front end okay let's start implementing our back end first so in order to do that i'm going to create a folder at the root level let's call it uh backend and then inside this back-end folder let me go into this back-end folder now inside this back-end folder guys i'm going to create a file let's call it app.js so let's create in javascript now this app.js is going to be our rest api and we are going to use expressjs for this now let me copy the code from the blog paste so up here i'm requesting express js and then i'm creating express js app and then i have added couple of routes so the first route is slash health now this is actually required for our load balancers to make sure uh the server is up and running now we are going to dockerize this server and by the way guys we haven't yet used any cdk so right now what we are doing is building our back-end application code so this health endpoints it's only returning a text called healthy with the status code of 200 and then i have another get route and that is slash generate slash number now in the diagram you might remember so there's this slash generate path pattern we direct to application load balancer which uh will direct to this one of these containers so there i am getting the fibonacci number that user request and then i will pass the integer value of it and then i will you know generate the fibonacci uh value for that particular fibonacci number so here's this simple you know calculation for that and the output then we are going to send it as a json and finally we are running this express server on port 80. now we need to do a couple of things we need to uh install this dependency express.js let me take the terminal so right now i'm inside this backend folder let me initialize the another npm project here okay so with that i got package.json and then i'm going to install npmi express okay i can test if the application works by doing node fjs then app is listening on port 80 so now if i quickly go to a new tab and do localhost hit enter well i will do health then i'll get the message healthy so our server is running so now we can start dockerizing this so i'll stop this so in order to dockerize we need to have a docker file so here in the backend folder itself i'm going to create docker file and then i will copy paste this code the docker instructions and save so if you quickly look at this the base image is alpine image so this is a very small image and then we are installing node.js into that particular image because i think the alpine image doesn't have much really so we need to install node.js and npm and then we'll set the work directly as slash app and we are going to copy the package.json file write this one because we can utilize docker caching better with this and then i'm doing npm install so it's going to install this dependency particularly the express dependency and then i'm going to copy entire things inside this folder into app folder and then am exposing port 3000 okay i don't want 3000 let's uh expose port 80. and finally we have the cmd command so that is npm start so what this what does this basically do is once we create a container out of this docker image and that is going to run the container is going to run this command that is npm start well if we quickly go to our package.json the start command is not here yet so what i'm going to do right here is i'm going to add this start command and that is going to run our server node after js and i'm going to do one other thing so inside the same folder i'm going to add a docker igno file and i will ignore the node modules because we don't really need to copy this node modules folder when you are doing this copy command because in a previous step and pm run install is gonna already create that node modules for us okay so now we can actually test this i will do docker build and space period so period is the current folder so it will find the docker file from the current folder so let's see so my image is being built so it's now running the npm install as you see okay so it is successfully built and this is my docker image id so let me just copy that and i'm gonna spin up a container with this docker image i will do docker run dash id in the interactive mode and the docker id you can see now our content is up and running and i get the console log from the content itself so let's check this so right now i don't have a server running in my local machine but if i do this nothing happens well i forgot to do the port mapping so let's do a port mapping to map the hotspot to the container port dash p 80 280 into a small change okay let's check this time yeah i think now it is working so we can check the health endpoint again healthy and also let's try that generate endpoint generate slash let's say five there you go the output is also five let's try different number okay so the fibonacci number 10th is 55 what about 20 that is 6762. okay now our application works great stop this server now guys i think we are done with the backend uh implementation so as our next step we are going to provision the backend as code and this is where we are going to use cdk so at the root level itself i'm gonna create a file inside this lib folder so inside this leaf folder so right now i have one of this sample cdk file i will leave as it is but i'm going to create a new file and call so why did i name it as farget because we are going to create a ecs cluster that is powered by fargate and then we are going to instruct cdk to create a docker image out of these files inside this backend folder and then upload to ecr now if you guys don't know about ecr that is the elastic content registry it's just like docker hub but proprietary docker image repository in aws and then ecs will use that docker image to create containers inside its ecs cluster and together with that we are going to create application load balancer and to do all these things we are going to use a level 3 construct let's first go ahead and copy this code and discuss afterwards paste i'll expand the code so we can see the code better so here up top we are requiring some of these dependencies now cdk is a construct library as i already mentioned so we can require different constructs so right now there are a couple of constructs so first let's go ahead and install this and discuss afterwards so i'll do so right now i'm in back in so let me go back and i will go to the leap fold not to the leaf folder but to the root so right now i am at the root level and then i am going to install because my package json outside is at the root level right so i will install these three dependencies that i don't already have ec2 ecs and also aw easiest pattern now this is our level three constructors and hit enter so while it is installing let's go over this now first and foremost guys in order to create ecs cluster in the far gate mode forget mode as in like serverless compute we need to have a vpc so that's why i am creating a vpc right here so for that i am getting this vpc from aw is easy to construct and i call this vpc as youtube vpc and then i have defined two availability zones maximum and also one of the net gateways as well now this is going to create private subnets and public subnets now what is private subnet in a private subnet you don't have a route out to internet that means whatever the resource that we added to the private subnet cannot talk to internet and our containers are going to be in our private subnet now through this net gateway our ecs cluster can connect to ecr and download the docker image so that's why we have this vpc and then we are building the ecs cluster that is powered by farget and here i am going to use this ecs construct so acs dot cluster and i call this cluster youtube cluster and i'm setting the vpc that i just created for this cluster previously and then i'm going to use the third construct that is the level 3 construct ecs pattern which is this one and it's going to do a lot of things for us so as you can remember this is that application load balance for gate service i've been talking about and there i can define what my cluster is and how much memory am i allocating to a particular container and how much cpu am i allocating to a container and how many containers do i need to up and running all the time so i set the default or decide count as two so our ecs service will make sure if one container goes down it's gonna create another container for us and then i have to define the task image or the docker image for our container and there i'm using this ecs dot container image static method and there it has another method called from method and here i will just go one directory up and then into this back end directory and get the content inside it so this construct is smart enough to look at this content and get the docker file and create a docker image and put it to ecr elastic container registry as a docker image and then have a reference to it in our cluster so our cluster is able to create a docker container from that image and optionally we can pass some environment variable of course in our case we don't need it but imagine now if you have a use case where your containers need to talk to a database so you can reference those database urls or the database strings through secret manager or parameter store variables so that's all to it for our ecs pattern and this is going to create all of this stuff so it's going to create a vcs cluster and it is going to spin up two containers through a ecs service and these container images are taken from ecr so i haven't like represented the acr here and it's going to create the application load balancer as well so it's doing all this stuff for us and finally i'm setting the uh health check endpoint because of application we already have an end point called slash health and this has been particularly useful for our application load balance to check the health of this container and finally i am exporting this load balancer url because we need this load balancer url when we are configuring our cloud front uh because we are setting this uh application load balance as a custom origin to it so so we need the lb url or the dns name to reference it in cloud front so that's why i'm exporting here so i can import it in a different cdk stack all right guys so next i'm gonna go ahead and deploy this and test this on aws so in order to do that i will go to bin folder and that's the cdk demo ds right and right now if it is requiring the cdk youtube stack you know this default one so let me just remove this one and here instead of this reference let me import a fargate.ds great and in fargate we are exporting this fargate demo stack so let's use that one great and then we first create a cdk app you know app cdk.tab and then we are going to associate this stack with that app so let's from this one and guys when you are deploying a stack we can define to which account should we deploy these resources and in which region so that is where this environment variable or object comes in handy let me uncomment it and then i will associate my demo aws account id and the region that i want to deploy this to so here in aws i can find my id here paste and i will deploy to usd2 oh uh well i'm gonna change the region by the way uh i'm gonna pick a different region that is the north california because i already have some of these resources provisioned in this region and i'm gonna get some errors otherwise so i'll do us twist one region now before we deploy i want to bootstrap so cdk is going to create some of these cdk assets so i'll do cdk bootstrap so it is bootstrapping my environment it's creating the cdk toolkit resources now if you really look at the blog post um our next step you know step number five is building the front end react app but what we are doing here is step number seven that is uh you know deploying our back end first so that we can check if it all works okay so the bootstrap is complete now i can go ahead and deploy my stack now even before i deploy my stack i'm gonna run npm run watch so it's going to like convert all my typescript to javascript so you can see all my typescript files have compiled to javascript so let me take another terminal and now i will do cdk synth synthe to synthesize this type so it's going to create the cloud formation template that is related to our forget stack it will show us any errors if we have well you can see this is our cloud formation stack it's a long cloud formation template i mean we were supposed to write all these things if we weren't using cdk but with cdk it's only how many lines very few lines right less than 40 i believe so this is the beginning of our cloud formation stack and it goes all the way down so thankfully i don't have any errors so now what i can do is i can do cdk deploy now here we need to confirm like is this what we intend because uh cdk is going to prompt us a confirmation when it is doing some im related resources or creating some im related resources because these are security right issues or like security concerns so let me say yes i want to create all these security groups and i am rows hit enter okay let me take myself out of this now as you can see it is deploying our infrastructure and look it is building our docker file as well and this docker image is going to be sent out to ecr and then it will create this ecs cluster and the ecs service and also the task definition and this task definition will refer to this docker image and then it's going to create those two containers i uh you know set it here and not only that it's going to create the application load balance as well so let's wait until the end of this it's going to send me the load balance endpoint because because we ask it to export that value here and guess i think this will take some time so i will pause this video and come back once it is done all right guys so i am back and it is completed so as you can see so it has output the load balancer url which is this one very nice so let me click command click here and i will open this up there you go let me put it in the full screen right so it says cannot get and let's try our hash slash health i should get healthy very nice so uh it seems to be our back end is working let me do generate uh 10 to generate the 10th fibonacci number and there you go i got the output 55 55 okay so it all works which is really nice now we can go ahead and continue our uh back end okay so now we can go ahead and develop our front end for that i'm gonna start at step number five which is building the front end react app so we'll first build up and then we will provision the infrastructure that is related to deploy in that particular app so here i will create a new folder well i'm not going to create a new folder but i will take a terminal that is open up at the root if i do pwd yeah so i'm at the road and i'm going to create a react project for that i will use npx create react app and then let's call this front end i think it will create a frontend folder together with this one let's see okay you see all right i see the front and fold getting created now it is installing the dependencies and once it is done we are going to copy this code into app.js file and this is going to give us a very simple ui i think just one input box and a separate button so i can type in the number the fibonacci number and then submit the request to backend i will get this copied so while it is being provisioned let me quickly go to my diagram and show you what we are going to do so we are going to create this front-end s3 bucket now in this s3 bucket we are going to deploy all the compiled javascript html and css files so its basically our front-end app and then we are going to set up another origin s3 origin from cloud front to that particular s3 bucket and guys we are also creating an origin access identity so that means only the origin access identity can access this h3 bucket so this way i can prevent direct use access to s3 and apart from that i'm going to create this behavior slash star so this is the default behavior so if none of these urls that's coming from the users do not mesh slash generate then everything will be directed to the front end app or front in s3 bucket thereby the users will receive the html css javascript images that our front end up holds okay so let's see okay it is completed and now i will go to the source folder i will go to app.js and here i'm going to replace one that i just copied now we will do couple of changes guys because currently the blog post has the domain that i previously registered so that is endlaid academy.tk but this will not work but let's see how it all looks like in the browser so it's basically we have a due and the heading fibonacci generator and i have a form so in this form i'm expecting a number into an input box and then there's another button called generate so let's see i will do yarn start oh i need to go into my front end folder and let's do yarn start well there seems to be a problem with the just dependency that cdk installed and the react app install so let's see what it asked me to do well i'm not going to go through all this setup what i will do is i will you know skip this because this is just a demo so i will go there and i'll create a dmv file and then i will add this keep preflight check true okay and then let's do yarn start again yeah this time it works so let's maximize the window here we go oh that's too big so i have this fibonacci generator let me increase the size just a little bit and i can type the number and then click generate and when i click generate then it's going to call upon the handler so this is the handler function so in the handler function we are using fetch api to fetch the the result from our backend so right now this is not going to work because we haven't set up our custom domain yet so instead what i will do is i will quickly get the lb url or the endpoint copy that and then paste it here instead let's see if this works and now i will go to react app let's take a terminal just to see if i get any errors network okay i will type number 10 generate request goes out oh i get the cross error so right now we are calling our api from localhost domain and the application load balancer domain is a different one you see it's a different one right because these domains do not match we get these cross errors and to prevent that we will use a cloudfront distribution so i'm not going to test it right now but let's go ahead and start provisioning our infrastructure so that is step number let's see what is that step step number six now in step number six i will create another uh file called cloudfront ts now this is our cloudfront stack so in our lib folder so right now i have this forget ts and i will create another file called cloudfront.ts okay and then i will go ahead and copy this and paste save so i am requiring several cdk construct aws s3 and also s3 deployment and then i'm requiring cloud front origin because we need to create cloud front and also aw certificate manager now first let's stop the front end server and go one directory up and then and then i will install these dependencies npmi i don't think we install this one but i think i already have it in my system that's why it's not showing that's quickly but let me install it anyways and also aws certificate manager hit enter so while it is getting installed let's go through the code oops we forgot to install uh cloudfront let me see if i already have it yes i think i already have it but you guys might need to install this one as well so if you look at our stack so it's called cloudfront demo stack and this basically you know provision in this resource this set of resources basically these two really cloud font and the front-end app so in cloudfront first we need to create a origin for the application load balancer and also we need to create origin for the s3 so if you really look at it we are importing that load balancer url that we exported in the fargate stack let me go to the forget stack you see we export uh it as a load balancer url so this export name so i import it with cdk.tefn so these are some static methods i can use to import or cross reference different stacks so a load balancer url so here i get the string and then i'll get to this one and this one just a bit what i'm going to do is i'm going to create this s3 bucket because we need to create a straight bucket right we don't have a street bucket we are going to put that front end build code into the s3 bucket i am leaving up a bucket so bucket is from aws h3 cdk construct and then i call it website bucket i don't enable versioning and removal policy i said to destroy that means when you are removing this ocd destroy it's going to like remove that bucket tester we can also use other values like you know we have retain and destroy so i'll set destroy because this is again a demo okay so this will create that s3 bucket now that sd button is going to be empty so we need to put that built files now this is a very good example that we are using both the infrastructure code as well as our application code together now here i'm creating a new deployment so deployment is again from aws three deployment construct and there i call it website deployment and as for the source we need to define where can i find the build code now my build code is available in the front-end directory and once we do react build then it's going to create a build folder so let me in fact do that just to make sure i will take a new terminal and go to see the front end and then run what is the build code sorry package json npm run build or yarn build i think npm run build so this should create a build folder let's see there you go here's the build folder so it is still creating the files let's wait if it is going to create any sub folders yep it has created a subfolder called static so i need to reference the static folder inside this build folder so i will go to cloudfront so my bucket source is a source dot asset now this source is coming from awst deployment source dot asset and i will go one one level up and from my previous exam i expect from my previous experience i need to refer cdk youtube demo you know this top folder and then i will go back to front end and then build and slash static so with that we create the restore bucket and we deploy the build.html css javascript into the test debugger then we are going to create that origin access identity because as i previously said cloudfront create our oai to access this front-end bucket so here i'm going to create an origin access identity from cloud front and then i use this origin access identity in my cloud front distribution so this is the cloud front distribution so i'm creating a new distribution so the distribution again is coming from my wh cdk cloud front construct and i have to provide couple of attributes now as for the default root attributes i want to load that index html of my stringbucket so i define index.html because you see inside static folder i have index.html this one right and then the domain name so at this point i can attach a custom domain to my cloudfront and guys i have actually obtained a new domain uh if we go to aws account and go to route 53 and here we go so this is the new domain i created endlyacademy.tk now i'm not going to include this step in this demo because i already have created video on this uh i think the very first video i released in this channel hosting a web application so i'll refer a link here so you guys can go ahead and see how to create a custom domain and set up this name servers with that custom domain uh so another thing i just want to show you is this there's a certificate that is attached to this domain so i also white listed an ssl domain if i go to acm or certificate manager amazon certificate manager open it in a new tab so once you all have a custom domain you can go to acm aws certificate manager and make sure to go to north virginia region because cloudfront accepts certificates from north virginia region because cloudfront is a global service you can click request a certificate request public certificate and request certificate and here you just have to give the domain name whatever the domain that you want to attach to your application so i went ahead and already got a ssl certificate and that is this one and you should see the status as issued and then you can just copy this arna let's copy this arm now go to my code and here in our cdk project at the root directory you should see there's a file called cdk.json now in the cdk json file we have this context object now in this object we can pass in any external values and we can refer it in our cd case type now here in this cloudfront cdk stack i skip this two step on purpose as you can see uh i am you know using this dot not try get context and i have this context variable called stages so let's go ahead and create that so inside this context let's create that object stages and that's another object so inside these stages so i'm referring to the current stage and that i got from my props so i can pass in any stage value when i am executing this cloudfront demo stack you see i have attached a custom interface called custom stack props and there i am particularly looking for a value called stage so that's what we are referencing it so let's call that value and we'll call it prod and also you can now let's say if you have other stages like devo and test you know you can associate any uh stages for your application and there i will have attribute called certificate arn so this is that config.certificate arn that we refer so i will add certificate arm for this certificate arn i will just paste in that arn value i think i lost it copy this arn for my ssl certificate and i'll paste it here great now this is a neat way of importing different constraints value into your cdk stacks so you can always use context object right and the context of the object you can refer it stage wise as well so here i am referencing a cmo amazon certificate manager certificate from a certificate arn and the certificate arn is coming from my config file so i get this certificate and i will get that certificate arn and i will attach it to my cloudfront distribution see for my certificate attribute i'll set the certificate arn and the domain name i will say the same domain name because uh the domain name for this certificate is endlear academy.tk so it's the same domain name here and then i'm sitting on the default behavior now as i have already shown you our default behavior you see this one is our s3 bucket so i am referencing my s3 origin so for my origin attribute i will new up a new origin s3 origin and set my s3 bucket which i created previously and also i will associate the origin access identity that i created as well and i will set some of the other attributes as well you know compressed to true that means all the content will be compressed g shift and i will set the allow methods to allow get request so the cloud front can issue get request to mys3 and also so i've said the weaver policy protocol we were a policy protocol.allow all so that means uh our cloud found distribution can access the origin using https as well as http now if i just remove this and click type dot you see i have the option to select https only or redirect to https but i will set allow all here so with this it should create a cloudfront distribution so this cloudfront distribution and create the s3 bucket and set up this connectivity now i need to create another origin and this is a custom origin so that is what we are going to do next and here i am creating a custom origin for the application load balancer so i will again never origin and this time it's a http origin and as for http origin i'll pass the load balancer domain now you can remember right i imported that load balancer dns name up here and then i'll set the protocol policy to http only because my load balancer as you guys have already seen let me see if i can show it again so this http endpoint so it's not secure so when cloudfront trying to access that we need to particularly say it's http only now don't get confused guys we attached our ssl certificate to the cloud front for the communication from the internet users to our cloud front will happen through https protocol and then here it will happen this ssl termination of tls termination and and after that you know connecting to those application load balancer will happen through http now if you also want to uh secure this connectivity you can attach ssl certificate to a to your alb but that is out of the scope for this demo okay so we create that http origin and then i'm creating the slash generate behavior there we go so i add slash generate slash star and i'm allowing all the get post requests to my alb origin all right finally i output the cloudfront domain url and now let's go back to our bin and cdk demo stack and let's add this stack to our cdk app so here i will just copy and paste it this time i'm importing cloud front and this stack i believe it's called cloud front demo stack cloudfront demonstrate and let me take another copy here paste so this stack is our far gate stack and this is our cloud from stack copy and i will replace the same name here and also i set the env to the same count id and also use twist one but now i get a you know squiggly line because we need to add another variable and that is called stage now do you guys remember we have a custom interface for that and i will add the stage plot here now if you missed that let me quickly show you again in cloud front we are using this new interface or the custom interface and i am setting my props to reference that interface really so it is expecting a stage okay i believe this should do so let me go ahead and deploy this stack so i'll go to my root directory so i'm really i'm here to directory and i can now do cdk deploy but now that we have two stack i can particularly define which stack do i want to deploy for example i can say cloud front stack if i don't do that it's going to deploy both the stack since i already deploy this one let's call its cloudfront demo stack but before doing that i needed i need to do two things really first one is i need to change the api endpoint in my front-end application so here in my front-end nap okay not this one front end folder source fjs now i need to like revert this back to http dot daily academy dot tk and slash generate slash number so that's the first thing because we associate this only academic domain uh to the cloudfront distribution and the next thing is let's synthesize our stack and see if we have any errors sy ndh hit enter now this should return the entire cloudformation template yeah i need to supply the stack id uh for this command ss so let's do cdk synth this time cloud front demo stack because previously we already tested fargate demo stack let's see if we have an errors no errors and this is our cloud formation template see again it's a long template okay all in all looks good so now i can deploy cdk deploy and i will deploy the cloudfront stack cloudfront demo stack i will agree to create all these im related uh resources so this will also take some time so i will continue once it is completed okay guys so it is completed and you can see this is our cloudfront domain name now let me copy that and take a new window and add https in front of it and then paste it and hit enter well i get this access denied error now i can get rid of it if i go to aws and in aws console i will go to cloudfront cloudfront now in cloudfront you can see this is our cloudfront distribution see the cname attached to it's called anglia academy.tk so let me go into that and then i'll go to origins so in origin i see both my s3 origin as well as the custom origin for the load balancer see this is our load balance origin the dns name of the load balancer and the s3 bucket now here let me go to our s3 origin which is this one and click edit and here you can see our oi is also attached is the oai but i haven't granted the permission such that my oai in the cloud front can talk to my s3 bucket so in order to do that i will click yes update the bucket policy of that h3 bucket and then click yes edit with this i should be able to refresh this page and view my application let's see still not probably my cloudfront distribution is still in progress there we go still in progress let's wait until it is completed but that step is not added in my cdk code probably i will edit later let me do another refresh here just to see still not now in the meantime i will go into that h3 bucket and see if my files are already there so that i can confirm i will just copy the first part of it so this is the bucket name copy that and i'll go to services ns3 search for the bucket and this is it go into that and let's see if i have my index html and other files well i don't see my index html file now this is another problem so let's fix that first so i think i know the issue well i don't really have to go into that static folder right is that the issue build and the build folder is just enough let me just uh take out the static right and i will just leave the build folder yeah sorry i think it's my mistake guys because in static it has only css and javascript oh that's a blunder okay let me do another deployment cdk deploy cloud front demo stack so the website deployment is now happening as soon as it is completed i should see my index.html files there okay it is completed let's do a refresh hopefully i should see the index.html yes okay this time it quickly got it deployed because a lot of my resources are already created right it just needed to update the diff so this time i will come to my cloudfront dns and then do a refresh and there we go i see my front-end app very nice how about i will take another terminal and i will use the custom domain so the custom domain is only academy.tk hit enter well i don't see that why is it well that's one reason because we need to do one other thing in route 53 i have this enely academy dot tk but right now it is not reference to the correct cloud front distribution probably in your case you wouldn't see this record at all so in that case what you should do here is just create a record and create this apex record and then select its a record and select this alias and then select the cloud front distribution and then you should see the correct cloud from distribution here so i'm not going to create a new one but i will do is i will edit this one click edit record and remove this one and attach the correct one so it is d1 p1 right so if i go to here so that is d1p1 you see okay and then i click save now dns resolution will take little bit of time but let's try our luck still not so we should wait a few minutes and after that uh we should be able to access our application through endley academy.ttk all right guys so now the dns is resolved you can see only academy.tk has loaded my application very nice now let's use this application and see if everything works fine so i'll take a inspect element go to the network tab and then let's request for some fibonacci number so i'll add 10 and then hit generate well i got another crosshair but we fixed it right let's see i think i know the issue really guys although we fixed it here we could not really build this application because as you remember the content of this bucket is being referred from the build folder so i need to build it so let's quickly build that go to front end and do npm run build okay it's build let me show you one of the cdk command before we deploy this so that is cdk diff and i will check the diff of the cloudfront demo stack now what this command will does is it will show us all the changes that we have done to our stack but let's go ahead and change this bucket version to true so right now the bucket version is false i will set it to true and then we'll do cdk diff again okay now if i scroll down slowly i should see the versioning configuration well for some reason for this particular theme it's not properly showing but this is the resources section and you know this is the versioning configuration the status is now enabled so i will disable it again because i don't want to enable it let's do cdk diff again i scroll a little bit up this is the resources section now i don't see that change okay uh just to show you guys just this particular command it is useful to see what has been changed in your cloud formation template all right so now i'm ready to do cdk deploy once again for our cloud front stack alright so it is completed so let me go back here and do a refresh and let's try one more time it still says there's a cross issue now this because guys we need to run a invalidation now we can trigger invalidation at the end of this cloudformation stack but i'm not going to edit right now instead so uh let's go ahead and run that so i'm at aws console i'll go to cloudfront and for my only academy cloudfront distribution go to the invalidation tab and create a invalidation hashtag now we can run this invalidation in the code itself for example here towards the end of this cloud front stack i can run a invalidation but i'm not going to add it here you guys can probably look at cdk documentation and figure this out i will add 10 and generate okay so this time i got the result as 55 so let's add 15 okay so this is that result and i will try another one okay so this is the 25th fibonacci number now i want to quickly show you the backend resources that it had configured so here we go now this is our cloudfront distribution so this is the only academic cloud from distribution and then we have two cloudflare origins s3 bucket and also the fargate backend now we already saw the s3 bucket but let's look at the far gate backend now this is the dns name of the application load balancer so i can go to services and i will go to ec2 service so that's where i can find the application load balancer i will go to the correct region so my region is us twist one and there i should see one load balancer running so i'll go into that so this is our application load balancer dns and then if we go to the listeners so all http requests to this particular cloud application load balancer is forwarded to this target group so let me go into this target group and i'll open up this target group as well and i should see there are two healthy targets there we go now these healthy targets are nothing but our two containers and you can see the ip addresses of those two containers now let's go to ecs and see those containers in the ecs console so this is our stack and two tasks running and then i'll go to the task section i see these two tasks and you can also see this particular ecs service set the desired count as two and i can even change that if i change the design count number here in the forget stack so currently i have set the desired count to 2. all right guys so this is what i want to show you and one bonus point before i end up and that is about cdk pipeline now in this demo we only did cdk deploy manually to deploy our stack but when you're actually working in a project team lot of people will start contributing to your project so that's where you would need a proper ci cd pipeline or continuous delivery pipeline and you can easily create a continuous delivery pipeline together with your infrastructure code using cdk pipeline so here it is and i will just show you one of the blog posts that they have released so this is the cdk pipeline blog post and i'll put the link in the description as well you can go over it and if you guys also want a video in cdk pipeline let me know in the comment section i will create one okay guys so all right so one very important thing before we wrap up we need to destroy this stack because the load balancers and the forget cluster so those things are going to cost you so in order to do that i will go to the code and let's use cdk itself let me clear the screen and make sure you're on the root directory and then let's do ctk destroy before hitting enter make sure both of your stacks are available right here and then hit enter okay so it asks me to add this all flag because we are removing multiple stacks so let's add that yes i want to delete it yes so now it is destroying okay now it says there's a dependency for the cloud front so what i will do is i will just do a cdk destroy and first i will select a cloud front demo stack and after that once this complete i'll again do cdk destroy for our second stack the fargate demo stack yes so now it is being destroyed you can see deleting progress okay guys i'm not going to keep you waiting but make sure you destroy the cloudfront demo stack first and then again issue a cdk destroy command for the fargate demo stack all right so this is what i want to show you in this video guys i hope you guys enjoyed it and i'll see you in a new video

Channel: Enlear Academy

Views: 7,296

Keywords: Amazon Web Services, amazon cdk, aws, aws architect, aws cdk, aws cdk examples, aws cdk for beginners, aws cdk typescript, aws fargate, aws lambda python, aws tutorial, cdk, cdk aws, cdk example, cloudformation, crash course, enlear academy, how to automate infrastructure in aws, how to use aws cdk, iaac in aws, infastructure automation, tutorial, typescript, what is aws cdk, what is cloudformation

Id: LU5VgGWO9zw

Length: 74min 55sec (4495 seconds)

Published: Mon Jun 14 2021