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

Hello Dear All, my name is Amit. I am here to give some tips and tricks about cloud learning and some day to day problem solving methods. I'm an professional cloud engineer, working in this fields for 12+ years.
If you have any queries regarding AWS issues... feel free to reach out to me.
In this video, I have discussed AWS S3 website hosting with CloudFront.
“Serverless” is the concept of running applications without managing dedicated Linux servers yourself, usually with a Platform-as-a-Service solution like AWS’s App Runner or Lambda Functions. While you may run a normal application like NGINX on an EC2 virtual machine, you can usually serve the same kind of app without running servers.
The benefit to this solution is zero reliance on your own servers-S3 will always respond to requests, so you can have as many people as you want accessing your site. In front of S3, you can use CloudFront, AWS’s Content Delivery Network (CDN) solution. CloudFront runs hundreds of edge caches, which all cache requests to S3 for you, increasing latency & throughput, and lowering cost.
My email Id : [e-mail]
facebook: / beyondthecloud2022
Linkedin: / beyondthecloud2023
#aws #amazonwebservices #software #softwareengineer #developers #clouds #cloudengineer #cloudcomputing #systemdesign #database #programming #fullstack #cloudsecurity #security #fullstacksoftwareengineering #itindustry #engineering #engineer #beyondthecloud #AWSSystemsmanager #AWSdocuments #AWSautomation #s3 #S3sucurity #yamlfile #jsontemplate #python #pythonprogramming #awsec2 #awsec2security #ec2security #instancemetadata #ec2 #awslambda #awsconfig #cloudwatch #dynamodb #awsiam #boto3 #cdk #infrastructure #insfrastructureascode #python #sqs #serverless #sam #awssam #docker #dockercontainer #java #cloudfront #contentdeliverynetwork #awscloudfront
@BeABetterDev @AWSTutorialsOnline @cluut @TinyTechnicalTutorials @BlockExplorerMedia @nickchapsas @itversity @TechwithLucy @Intellipaat @knowledgeindia @SimplilearnOfficial @TechnicalGuftgu @MachineLearningHub @edurekaIN @in28minutes @CodeWithHarry @QuickSupport @byluckysir

[@beyondthecloud]

Please provide your valuable feedback in the comment section. Please like share and subscribe for more upcoming content.

[@pupun813]

very nice feature this cloudfront root object. Waiting for the next part

[@tusharverma3472]

One of the best video out so far with clear demo of concepts.Thanks!

[@beyondthecloud]

Glad it was helpful!

[@user-bx3ue8tx1i]

Awesome content!! Extremely well explained I really appreciated, I have been struggling with some of these concepts but ypu made it very easy to follow and understand

[@beyondthecloud]

Glad it was helpful!

[@bepositive6525]

Informative video… thank you…

[@KrishnaReddy-yt9nt]

Sir, you are my savior thank you for making these videos. Please keep uploading more such content.
🤟

[@beyondthecloud]

So nice of you

[@rajeshct507]

It's a very useful video Sir , please upload this kind of real world use case projects , it helps a lot for all of us.
One suggestion from my end , if you can include WAF before CDN , it adds an extra layer of security to the application .
Thank you sir for creating content like this . Hopefully we will see more videos in the future like this ❤.

[@beyondthecloud]

Thanks a lot for your comment.. Yes you are absolutely correct. We can definitely use waf before cdn... best of luck

[@ajyee6400]

Great content, keep up the hard work!

[@beyondthecloud]

Appreciate it!

[@Blomvi]

New to cloud and hope your tutorial will make me expert. Nice content

[@beyondthecloud]

Sure you will succeed. Let me know any specific topic you want to learn.

[@anyammbuya6349]

Great Video. I Learnt a lot. Thanks. As a suggestion adding an alternate user-friendly domain name and an SSL certificate will further spice things up.

[@beyondthecloud]

Thanks for the tip!

[@ThabeloRamabulana]

I love the content💯

[@beyondthecloud]

Thanks a lot

[@sampath853]

very good explanation sir

[@beyondthecloud]

Glad you liked it!!

[@mohanthosare5876]

now i need that files

[@moaru98]

What will happen if I replace the S3 bucket with Apprunner ?

[@beyondthecloud]

App Runner is a wholesome service offered by AWS. you have to configure lots of things to replace the backend you are referring to. In case you want to do it, you may then reach out to app runner endpoint from cloudfront directly

[@57_onkarsuryavanshi_comps36]

Hello I am getting an error of No 'Access-Control-Allow-Origin' header is present on the requested resource. Do you have a solution ?

[@beyondthecloud]

Well, I have explained in the video to enable CORS for API Gateway. I think you are facing issue because didn't enable it. Please enable it and how to do that you will find it in the video itself

[@57_onkarsuryavanshi_comps36]

@@beyondthecloud I AM ALSO FACING ISSUE OF favicon.ico file 403 Error.

[@naaa_anveshana]

Hlo could you please explain lamda function

[@beyondthecloud]

Which Lambda function?

[@sitanshumishra7854]

Please make in-depth video for each service of aws

[@beyondthecloud]

will definitely try

[@Ankur_Singh_AWS]

Hi, Thanks for creating and explaining the step by step approach, I tried to follow along but application is through error while I tried to save or return the result from Dynamo DB table, Could you please guide?

[@beyondthecloud]

what is the error? Did you give lambda correct permission?

[@Ankur_Singh_AWS]

​@@beyondthecloudyes, I have provided full dynamodb access to lambda function and I am able to test it from API gateway as well
Actual error is around CORS when I try to access Cloudfront distribution

[@Ankur_Singh_AWS]

​@@beyondthecloud I able to figure out the error , I changed API from regional to Edge Optimized and CORS error disappeared, Kudos to you on uploading such great and valuable content

[@maximusflynny777]

great video. Do you have a github link for the profle.html and script.js code?

[@beyondthecloud]

In the description

[@noobxtrader]

please drop the s3 policy used here.. its showing error to me

[@beyondthecloud]

{
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontServicePrincipalReadOnly",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront:::distribution/"
}
}
}
}

[@mohanthosare5876]

how will get this profile.html file and script.js file

[@beyondthecloud]

Please check the part 2 of the video and its description box.
th-cam.com/video/oPYMsf78YAc/w-d-xo.html

[@debroy771]

where can I get the source code

[@beyondthecloud]

check the description

[@joydeepchakraborty1966]

greate video.can u share the files which are used in the video

[@beyondthecloud]

Check description
github.com/nspacer/serverless-website-hosting

[@mohanthosare5876]

please help me

[@user-fs7zd8wf5l]

Sir can i get the code ?

[@beyondthecloud]

Check the description box

[@sampath853]

sir what is your LinkedIn id, I will mention you in my post. for now, i mentioned your GitHub code link.

[@beyondthecloud]

You can find my LinkedIn id in the description of every video.
Here is the link as well.
www.linkedin.com/in/amit-nag-852b6337