{"id":465107,"date":"2022-06-18T13:40:25","date_gmt":"2022-06-18T10:40:25","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/"},"modified":"2022-06-18T13:40:25","modified_gmt":"2022-06-18T10:40:25","slug":"how-to-host-a-serverless-website-with-aws-cloudfront-and-s3","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/","title":{"rendered":"#How To Host a Serverless Website with AWS CloudFront and S3"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a38c1443fdd9\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a38c1443fdd9\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/#%E2%80%9CHow_To_Host_a_Serverless_Website_with_AWS_CloudFront_and_S3%E2%80%9D\" >&#8220;How To Host a Serverless Website with AWS CloudFront and S3&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/#How_Does_Serverless_Hosting_Work\" >How Does Serverless Hosting Work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/#How_Much_Does_This_Cost\" >How Much Does This Cost?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/#Setting_Up_an_S3_Bucket_Static_Website\" >Setting Up an S3 Bucket Static Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/#Hooking_Up_a_CloudFront_CDN\" >Hooking Up a CloudFront CDN<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CHow_To_Host_a_Serverless_Website_with_AWS_CloudFront_and_S3%E2%80%9D\"><\/span>&#8220;How To Host a Serverless Website with AWS CloudFront and S3&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div>\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-5269\" data-pagespeed-no-defer=\"\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2020\/06\/e601b806.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"AWS Logo\" width=\"700\" height=\"300\"\/><\/p>\n<p>If you want to run a website on AWS, you may not even need a server! AWS\u2019s CloudFront CDN can serve static web content directly from an S3 bucket, leaving you paying only for requests and data transferred (which might even be free).<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_Does_Serverless_Hosting_Work\"><\/span>How Does Serverless Hosting Work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u201cServerless\u201d is the concept of running <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lications without managing dedicated Linux servers yourself, usually with a Platform-as-a-Service solution like AWS\u2019s 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.<\/p>\n<p>This particular serverless solution uses AWS\u2019s Simple Storage Service (S3) to host the static content for a website, rather than having to serve it from an NGINX server yourself.\u00a0\u201cStatic\u201d just means that you\u2019re serving files and not generating pages, which includes both simple HTML + CSS websites, as well as full client-side JavaScript web applications. Notably, this excludes server-side hosting frameworks like WordPress (PHP), Ruby on Rails, and ASP.NET, but many websites will be only static content.<\/p>\n<p>The benefit to this solution is zero reliance on your own servers\u2014S3 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\u2019s Content Delivery Network (CDN) solution. CloudFront runs hundreds of edge caches, which all cache requests to S3 for you, increasing latency &amp; throughput, and lowering cost.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15791\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/22786f80.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"851\" height=\"465\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>In this network setup, everything handling user requests is fully serverless. CloudFront servers are run by AWS and will automatically cache content and route users to the endpoint, which is simply an S3 bucket.<\/p>\n<p>If you need to run some kind of backend or API for your web app to connect to, you can likely use other serverless tools like Lambda Functions to achieve that. This setup is even better, because requests to S3 and the API will scale separately.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15793\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/3b62386f.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1062\" height=\"451\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you\u2019d like to learn more about using API Gateway as a frontend for Lambda Functions, you can read our guide on setting it up.<\/p>\n<p>Despite how simple it is, this is actually a good enterprise-grade setup for hosting static content on AWS. It will be reliable, scale perfectly, and can even be used with a CodePipeline automatic deployment\u00a0to update your site from its source files.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Use AWS&#8217;s API Gateway as a Frontend for Lambda Functions<\/em><\/strong><\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Set Up an Automated Deployment Pipeline for an S3 Website<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_Much_Does_This_Cost\"><\/span>How Much Does This Cost?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Because serverless hosting scales exactly with usage, you only pay for what you use. This can save you a lot of money on servers that would otherwise be mostly idle. <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">General<\/a>ly, you\u2019re going to pay a little more per CPU hour than compared to doing it yourself, but this is usually balanced by the fact that you\u2019re charged fairly for exact usage.<\/p>\n<p>However, there\u2019s a good possibility this will just be\u00a0<em>free<\/em>. AWS\u2019s \u201calways free tier\u201d includes 100 GB of bandwidth, and an entire terabyte of CloudFront bandwidth. For comparison, most other free tiers from static site hosting services (like Github Pages and Firebase) will give you around 10 GB.<\/p>\n<p>1 TB of bandwidth for free is certainly very nice, as it means most websites that aren\u2019t serving tons of content will have a large buffer before being charged significant amounts.<\/p>\n<p>You will still be charged for S3 requests though, which will add up, and if your site stores hundreds of GBs of content, you may also see high charges for that. Making effective use of CloudFront\u2019s caching where possible can reduce the number of required requests to the origin (S3) however, and most sites will be fairly small.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Setting_Up_an_S3_Bucket_Static_Website\"><\/span>Setting Up an S3 Bucket Static Website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started, head over to the<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/s3.console.aws.amazon.com\/s3\/bucket\/create?region=us-east-1&amp;tag=hotoge-20\"> S3 Management Console and create a new bucket.<\/a>\u00a0You must disable \u201cBlock Public Access\u201d for it to be visible. AWS warns that this is a bad idea except for use cases like static website hosting. Because that\u2019s exactly what we\u2019re doing, you can ignore this, but you definitely won\u2019t want to be uploading secrets to the bucket\u2014it\u2019s all going to be readable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15795\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/d42ea227.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"852\" height=\"703\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This just removes the block on it; you\u2019ll also have to explicitly allow public reads with a bucket policy, under \u201cPermissions.\u201d Make sure to replace the resource name here with the correct bucket.<\/p>\n<pre>{&#13;\n  \"Version\":\"2012-10-17\",&#13;\n  \"Statement\":[&#13;\n    {&#13;\n        \"Sid\":\"PublicReadGetObject\",&#13;\n        \"Effect\":\"Allow\",&#13;\n        \"Principal\": \"*\",&#13;\n        \"Action\":[\"s3:GetObject\"],&#13;\n        \"Resource\":[\"arn:aws:s3:::example-bucket\/*\"]&#13;\n    }&#13;\n  ]&#13;\n}<\/pre>\n<p>Next, you\u2019ll need to upload your content. You can drag and drop, but if you\u2019d like to transfer a whole folder manually, you can use the AWS CLI to sync an S3 bucket with a local directory. You can also set this bucket up as the output for a CodePipeline deployment, which can build your artifacts from the source repository.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Install and Configure the AWS CLI<\/em><\/strong><\/p>\n<p>We\u2019ll use the S3 API and upload a basic <code>create-react-app<\/code>\u00a0template. Once synced, you\u2019ll see the <code>index.html<\/code>\u00a0in the S3 bucket.<\/p>\n<pre>aws s3 sync . s3:\/\/bucket-name<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15796\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/f24e0511.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1250\" height=\"696\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Before it\u2019s ready, you will need to go to the bucket Properties, scroll to the bottom to find \u201cStatic Web Hosting,\u201d and turn it on. You\u2019ll need to configure the index and error document, and you can also write redirection rules here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15798\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/a8f42d7c.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"844\" height=\"372\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Once done, you\u2019ll see the endpoint for the website under the properties.<\/p>\n<pre\/>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Hooking_Up_a_CloudFront_CDN\"><\/span>Hooking Up a CloudFront CDN<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CloudFront has a lot of options, but the default settings will work well for a simple S3 website, so configuration of it is fairly easy. Head over to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/console.aws.amazon.com\/cloudfront\/v3\/home?#&amp;tag=hotoge-20\">CloudFront console<\/a>\u00a0and create a new distribution.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15800\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/51dcaf22.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1030\" height=\"647\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can configure the settings for the cache, but the default behavior should be fine for most people.<\/p>\n<p>You\u2019ll need to hook up your custom domain, and this involves creating an SSL certificate which is managed through AWS Certificate Manager (ACM). You can click this button to request a certificate, which may take a while to verify DNS if you\u2019re not using AWS\u2019s Route 53 DNS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15801\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/02\/b9b019e3.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"655\" height=\"234\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You will of course also need to configure your DNS with a CNAME record pointing towards the\u00a0CloudFront endpoint.<\/p>\n<p>Once your cert and DNS is configured, create the distribution, and wait about 15 minutes for CloudFront to deploy it. Once it\u2019s done, you\u2019ll be able to visit either the CloudFront endpoint or your custom domain, and see your site served from the S3 bucket.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3683\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2020\/01\/6349b553.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"s3 website test\" width=\"700\" height=\"312\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/devops\/how-to-host-a-serverless-website-with-aws-cloudfront-and-s3\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;How To Host a Serverless Website with AWS CloudFront and S3&#8221; If you want to run a website on AWS, you may not even need a server! AWS\u2019s CloudFront CDN can serve static web content directly from an S3 bucket, leaving you paying only for requests and data transferred (which might even be free). How&#8230;<\/p>\n","protected":false},"author":1,"featured_media":465108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2020\/06\/e601b806.png?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-465107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/465107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=465107"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/465107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/465108"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=465107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=465107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=465107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}