Serverless Web Application frontend using CloudFront and S3 in AWS | Dynamic website hosting Part 1

thank you hello everyone welcome to my channel starting from today we will be entering into serverless cities this will be a small series of three to four videos tutorial where we will be exploring serverless application hosting we will be hosting our application in S3 with cloudfront backend will be API Gateway with Lambda and Dynamo TV first of all why server disk I remember when I started my career sometimes I observed our app is going down it may be for multiple reasons like memory issues scaling issues server maintenance or maybe upstream or Downstream issues we don't like to get a call from our boss on Saturday while watching watching a movie the problem was not our boss that calling problem was the servers wherever there is servers you have to manage them so why don't we host our apps in serverless architecture that is less costly less maintenance less over it in this series we will host serverless application with minimum service requirement from cloud provider I have divided this series into multiple parts so that it can be exciting for you if you are new to this channel kindly subscribe and let me know your thoughts in the comment section otherwise like and share and enjoy this video so let's go and build the serverless application so welcome to the first part of deployment serverless web application so what is uh serverless you all must be acquainted with serverless Computing since it is part of the market friend and availability the deployment of serverless architecture reduce man engagement by going serverless the developers can fully pay attention to their core product instead of managing and operating servers or runtimes either in cloud or on-premise this reduces the burden and lets developer regain the time and energy spent of developing projects and products improving the scalability and quality and assurance the overall productivity of serverless architecture is also immensely contributing in the number of adoptions in rise in the market do you know according to the research the serverless architecture Market size exceeds like USD 7 billion in 2020 and it's uh poised to register gains over 20 percent Siege here from 2021 to 2027 pretty exciting right so now the next part is why why serverless why should we go server this so there are couple of benefits that we gain from going into serverless and couple of them are scalability serverless architecture helps in scaling the architecture as and when required uh suppose the idea is to expand the application from a small kill to a big scale or starting from an initial level and you are looking forward to providing more resources in later stage in such cases serverless architecture can better help with scalability uh it has high availability so serverless architecture usually have access on global scale so it helps to curve low latency issues Suppose there is hosting of application on West Coast and there is a request coming from the East Coast so since the deployment is not there on the East Coast it would be very difficult for the user to get the result or there will be latency or lag in between another part is the idle capacity so servantage architecture works on basic paper request even though these servers are not being utilized in traditional architecture there would be cost attached to it in serverless architecture you get charged only for the servers that have been used or the time frame for which it has been used this also helps provisioning infra based the requirement as and when it comes to the end user serverless application also have some other features like it has the serverless architecture is very easy to deploy it has very low cost as I already mentioned so these are a couple of benefits to understand or to consider why should we go serverless now I should put one disclaimer here like is serverless a really serverless so serverless architecture does not project the idea of operating without servers but hassle-free management of servers by the cloud provider here the applications and workloads still run on servers but cloud provider does all the server handling going serverless averts you from provisioning scanning maintaining uh servers to run your application database or storage system it minimizes user occupancy by Shifting the load to Cloud that means your application are still running on servers but you don't manage them your cloud provider manages them that's why it's called serverless but still serverless Services still running on might be an ec2 servers but that means serverless is not actually a serverless your application is not actually hosted in serverless but you don't have to manage those that's why it's called serverless so coming to the part what we will be doing in this series of tutorial of the serverless web application deployment is that we will be spinning up one web application which will be hosted in a S3 bucket and it is a dynamic website so it can communicate with database by what by intermediate API Gateway so API Gateway will hold or will trigger two Lambda based on the request if it is a post request it will trigger a one Lambda if it is a get request it will trigger another Lambda and based on the Lambda if it is a post request that Lambda will insert some data into dynamodb and if it is a get request other Lambda will get the employee details from dynamodb and show it in our browser an important part is that we will not directly access the S3 bucket content rather we will use a cloudfront distribution on front of it and we will use that or we will trigger the cloudfront distribution and that will eventually trigger all our application so pretty exciting and if we see here the main concept is that the total project or the total application web application that is hosted in serverless cloudfront is serverless S3 our main server hosting provided is serverless API Gateway Lambda dynamodb all are serverless and they can scale whenever they required suppose one uses suppose you have only one or two user currently accessing this website and at the end of the year the user base is currently going higher day by day so API Gateway can scale automatically and the Lambda can scale automatically dynamodb is auto scaling service so there is nothing to worry about that you have to manage your servers or you have to uh you have to load balance your server you have to increase the memory or damn to your server you don't have to bother anything about it you just have to manage your website your featured request and you upload the files into S3 bucket and that's it you are done so this is the main idea of going into serverless architecture and this we will be doing from scratch next is the part one so this is in today's video in today's video what we will be doing we will be spinning up one S3 bucket and we will upload our website there and from uh we will also spin up one Cloud front Distribution on front of S3 and then we will access our website through cloudfront distribution so this is the part one so if it has so as the series have uh like three or four videos then uh after and and in the on the next video we will be spinning a couple of Lambda and dynamodb for our backend and on the last video maybe we will spin up API Gateway and test our overall application so this is how I have parted the series uh so that you can follow through easily so let's go and host our website into S3 bucket and access it uh through cloudfront distribution so I am in my AWS Management console and let's create a bucket let's give the bucket a name and I am creating the bucket in EU Central One regime right now I don't I will not do anything and uh everything will be default and then only one thing that I will be giving or the tag so the tag I will be giving here is that owner maybe the channel and then create bucket let's see so I will create the bucket first and you see that the bucket is created and then I can see the access is that the bucket and objects are not public what does it mean what does it mean is that this bucket cannot be accessed publicly over internet so what I will do I will do I will go ahead and upload some content uh to this bucket so for that for this Dynamic web hosting or the web application I have prepared uh two uh file that is the profile.html what it does it has it is a simple HTML file which is uh which has kind of uh four Fields employee ID first name last name and employee H then it has a button called save profile or the submit button when it will be clicked it will trigger the script this script and it will insert the data into our dynamodb and there is another function or feature there is a table now in this HTML and there is a button called view all M5 profile when this will be clicked another script will be called and it will get all the data from dynamically right now the script will not work because our backend is not prepared so what we will check we will go ahead and upload these two file profile.html and script.js and script.js is called here so I might delete this one we don't need it and then we will upload these two file and just see the raw website from our S3 bucket so let's upload these two file so I'll go inside my bucket and I click on upload and add files and from the desktop I will select these two file and then upload and then I will click on upload so this will be uploading these two file to my bucket and let's go to the my bucket and I can see this this two file is uploaded but I cannot access this two file right now because my bucket is now not public what I will do first is that I will give I will first edit the permission and I will edit this one and I will uncheck block all public access and maybe save changes and then I will come down here to the properties and say that I want to host it dynamically Dynamic website hosting and for that we need one index document and my our index document will be profile dot HTML I don't want any error.html right now so it's okay for me so save changes so what I have done is I have created my S3 bucket as a static website hosting now just to show you uh what I have uploaded and how it works and then we will delete this one this settings anyway so this one what we have done is um we have we just give the permission to access this bucket publicly and we have made this bucket as a static website hosting server so when we do the static website hosting as enable then AWS will give me one URL to access this bucket or the bucket website if we copy this one and open it in a browser we will be able to see access denied why because we have made the bucket public that is fine and we have also asked the bucket to host this as a static website but we did not give the bucket policy so the bucket policy need to be given otherwise it will show as access denied so right now we will give the bucket policy so this is my bucket policy uh if you see uh so what is what it says is that S3 gate object is allowed on this particular bucket for all principle so this is my bucket policy and it says and this this particular is needed otherwise we will not be able to access the static website we will save changes and right now I can see the permission the bucket policy is active now we go ahead and refresh this one and check if it is gone now and we see our website this is our first website is hosted in S3 it has fourth field employee ID first name last name employee Edge safe profile it will go to dynamodb view all employee it will fetch from dynamodium but this one it will write right now it will not work so if we go ahead and click on Save profile it will give me an error because it cannot find the backend we don't have the backend and also similarly for this one it don't have the backend anyway this is fine so right now if we go back to our uh if we go back to our PPT we see that our website is currently hosted in S3 and we can access it but we don't want that because the bucket is public and anyone can access the file or anyone can access the website so we don't want that so what we will give we will give a cloud front in front of our bucket and we will use the cloudfront URL to access the bucket so let's go ahead and spin Up This Cloud front and access this one from S3 so I'm in my cloud front uh cloudfront service and we have to create a distribution so those of you who doesn't know what cloudfront is it is allows to distribute to your website across the globe by caching or duplicating the data from AWS S3 host and then deploy it for viewers using the nearest Network server so one of the major difference between uh of pure S3 hosting is utilizing only HTTP protocol if we see here secure that means it's not secure connection it's only HTTP protocol it actually might hurt your website Security in a way objects are delivered through unencrypted connection although you still can restrict certain user or regions from accessing objects by editing the bucket policies that that's what I've shown you and access control list but the workaround is still to use cloudfront because it fully supports SSL certificates and https access that can be configured by changing cache Behavior right so we create the distribution so to create cloudfront distribution we have to click on Create and we have to choose a domain so if if you just click on this to origin domain it will show you the S3 bucket uh that is hosted there uh and it will we have to select the S3 bucket there and this one shows that uh this S3 bucket has a static website hosting if you plan to use the distribution as a website we recommend using the S3 website endpoint rather than this bucket website endpoint what we are going to do we are going what we are going to the S3 bucket and then delete all the static website hosting and our bucket policy there so let's go back to our history and then on the bucket policy we delete the bucket policy first yes delete and then on the Block Public Access we edit this one we block right now all public access this is more secure and then on properties we go back and edit this one and static website hosting is currently disabled so we don't want that because we are going to connect it from cloud cloud so our S3 bucket is on the previous version when we created that easy it has two objects and that's it right now if you just refresh this one it will not work because we have changed that and right now let's go back to distribution so let's again create the distribution and at this time if we select the S3 hosting or origin domain we don't see that uh the warning that means it is okay so the name I will not change this one this is fine and here is the very important part is the origin access the origin access I will not do as public I so that means if we do public that means bucket must allow Public Access but our bucket is not publicly available what should we do we should do origin Access Control list what does it mean so essentially what we don't want user to be able to browse our S3 bucket this one using the S3 URL this one so if anyone can do we want to force them to use the cloudfront URL With An Origin access identity Cloud front sends the authenticated request to your S3 bucket that means you can block public access to your S3 while still allowing cloudfront to get objects from the bucket instead of going directly to your origin furthermore data are more secure and it's simpler to monitor who has access to the data access to your files should generally faster and when only cloudfront URL is used to deliver the objects instead of S3 because the objects are copied to the edge location in order to store closer to the user it also can help to reduce the overall cost of data transfer because solving the data directly from S3 the cost is more than serving it from cloudfront distribution each location so this is why the origin access control is very much important it is much more secure and in the origin Access Control right now we don't have anything so what we can do is we can create control setting and for the create control setting we don't give any description and only the sign request this is one so cloudfront only send sign request to our S3 bucket so this is fine and we will create it and right now if you see that after creating this one it it picked up the correct Dynamic website hosting uh S3 and this is the origin Access Control list it has selected so here one very important part is that after creating this cloudfront distribution it will give me one bucket policy uh we have to update the bucket policy there why because if you remember we have deleted the bucket policy entirely right now we don't have any bucket policy and my bucket and my bucket is not publicly exposed so even if we give Cloud front origin access identity to access the bucket to say that hey cloudfront go ahead and access this bucket it still cannot because we did not give the bucket policy to access this cloud from distribution so after creating This Cloud front distribution it will give me one policy that we have did that we have to update here in the bucket policy then it will work that's fine so right now I am not changing anything default behavior is fine uh please remember to check this one HTTP and https and caching is something this is uh fine this is the default setting and I am not changing anything else I will change the settings later to show you one one of the major thing root control but right now I don't want anything to change and then I will select create distribution while it is creating you see here that the S3 bucket policy need to be updated and it has given me one policy already to copy so I will copy this policy and you see policy statement copied and then I will go to S3 and I will edit this one and I will paste it so this is my policy what it says it says that any request that is coming from cloudfront dot Amazon aws.com on resource this bucket or inside of this bucket and it is only allowed gate object and the condition is that the request should only come from this distribution so this is very much secure so only Cloud front this particular distribution is able to access the bucket objects so right now I will save this one and my bucket policy is saved what I have to do we have to do right now we have to check this distribution and on the distribution setting if we see here right now the status is enabled but still the status is deploying that means it is not deployed yet so we have to wait for some time still it's deploy and we come back after it is deployed properly so after waiting for four or five minutes I see that the deployment is done now we go to inside the distribution and we check that it has a distribution domain name so if we see here now to access the website we have developed cloudfront in front of S3 and now to access this website we have to give this distribution domain name to access it now we go to the browser and this this one and try to access it okay now still it says access denied why because we have tried to access this with our root URL this will not work what we have to give we have to give profile dot HTML and we see that our website is live now and it is serving from cloudfront from cloudfront it is going to S3 and from S3 our website is serving this is fine so we have hosted our as of now static website to our S3 bucket in front of cloudfront distribution this is fine but still one thing is bothering me because might be users are not so smart and they only uh select this distribution domain name and paste it in the browser and whenever they paste it and try to enter they will give access denied which is not true our application is up and running but still they will get access denied so how to fix that so to fix that we go to cloudfront there is a concept clock called the cloudfront root access that means whenever user will click this one instead of getting the access denied error it will be redirected to profile.html so how to do that to do that we go to cloudfront and settings under edit we have one option called default root object so the default root object currently we see that it is optional but we can give something to it so if you see here it's it it says that the object or file name to return When a viewer request the root URL that means this URL and we have to give this one as profile dot HTML so whenever any user will hit this one they will be redirected to slash profile.html we will save this one and still it is deployed and we will try to refresh it but it will not work let's wait for some time and then we will check so again after four or five minutes we see the more deployment is done and we if we go back now and if we depress we see our website awesome so right now we are accessing our website with rooty wordel and this root URL is configured in cloudfront distribution here profile.html so user can just now go to their browser and just select this root URL without giving this profile.html which will be much more easier for them to access the website so remember this is a very cool feature yeah of cloudfront distribution so this is how so this is the first part within this video where we have hosted a website in our S3 and we are accessing it with cloudfront distribution root URL and user you can we can give this particular user to your uh users and they can access this uh with cloudfront distribution so this is very nice in the second part of the video in the second part of the video I will be coming back or and we will be spinning up the lambdas here uh like this one uh we will be spinning up the Lambda and then we will create dynamodb for our backend to hold the data and then on the next part of the video we will be spinning up API Gateway and we will integrate the whole web application so till then please enjoy this particular video and let me know in the comment section how do you like this video if you are new to this Channel please like share and subscribe and if you are already here then please uh comment me uh comment in this video how do you like it and what uh you need more uh in this video uh so in the part two as I mentioned we will be seeing more interesting topic about Lambda and dynamodb spinning up uh so till then good bye take care and see you thank you [Music]

Channel: Beyond The Cloud

Views: 4,834

Keywords: aws, amazonwebservice, software, softwaredeveloper, developers, cloud, cloudengineer, cloudcomputing, systemdesign, database, programming, fullstack, cloudsecurity, security, itindustry, engineering, beyondthecloud, awsautomation, systemsmanagerautomation, s3, s3security, awsdocuments, ssmdocuments, systemsmanagerdocuments, python, pythoncoding, yamlcoding, awsiam, json, awssam, serverless, sam, java, awssamwithjava, docker, container, awscodepipeline, CodePipeline, CodeBuild, s3lifecycle, transition, lifecyclerule, inspector, cloudfront

Id: 2ppy5QKAOxc

Length: 26min 12sec (1572 seconds)

Published: Wed Mar 22 2023