{"id":267898,"date":"2021-06-04T15:00:00","date_gmt":"2021-06-04T12:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-host-a-static-website-on-amazon-s3-cloudsavvy-it\/"},"modified":"2021-06-04T15:00:00","modified_gmt":"2021-06-04T12:00:00","slug":"how-to-host-a-static-website-on-amazon-s3-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-static-website-on-amazon-s3-cloudsavvy-it\/","title":{"rendered":"#How to Host a Static Website on Amazon S3 \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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-6a2a6d6bbd5ad\" 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-6a2a6d6bbd5ad\" 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-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-static-website-on-amazon-s3-cloudsavvy-it\/#Wait_I_Dont_Need_a_Server\" >Wait, I Don\u2019t Need a Server?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-host-a-static-website-on-amazon-s3-cloudsavvy-it\/#Setting_This_Up\" >Setting This Up<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Host a Static Website on Amazon S3 \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage  alignnone wp-image-596 size-full\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/06\/55634f08.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"aws s3 logo\" width=\"700\" height=\"300\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Chances are, you probably don\u2019t need a full web server like NGINX running on EC2 to get your website up and running. If you\u2019re just looking to host a static website, you can store all the content in S3, and host it from there.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Wait_I_Dont_Need_a_Server\"><\/span>Wait, I Don\u2019t Need a Server?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If your site doesn\u2019t use any server side processing (like PHP), simply storing the files on S3, configuring the bucket to host the site, and pointing your DNS to the bucket will replace the use of NGINX or Apache.<\/p>\n<p>\u201cServer side processing\u201d is a lot less broad than it sounds. Just because your website is \u201cstatic\u201d does not mean it looks like a 1990s GeoCities page, with no Java<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\">Script<\/a>. All that \u201cstatic\u201d means is that all of your assets (HTML pages, JS code, CSS stylesheets) do not change in response to requests. With languages like PHP, all the processing is done on the server side; if two users request their profile page, the server will send them different pages. This can\u2019t be done on S3, so if you\u2019re using PHP, you\u2019ll have to set up a real web server. This most notably applies to WordPress, which uses PHP to serve content.<\/p>\n<p>However, it\u2019s becoming increasingly common for websites to be large JavaScript applications. With a framework like React, all that needs to be delivered is one <code>bundle.js<\/code>\u00a0file. It\u2019s the job of the client, not the server, to run this file and launch the application. Apps like this can be hosted on S3 with no issues.\u00a0This doesn\u2019t get rid of your backend either\u2014you can still have your app communicate with an API server and talk to a database, you\u2019ll just have to authenticate requests coming from the client. Combined with AWS\u2019s API Gateway and Lambda, you might not have to run a single EC2 server.<\/p>\n<p>Don\u2019t be fooled by the simple setup\u2014for small sites, S3 can cut your costs down to pennies on the dollar, and because there are no servers to worry about, it scales perfectly all the way up to millions of users. You simply pay a flat fee for bandwidth in and out, as well as any associated costs for Lambda, RDS, or any other services you use with your app. Even for larger businesses deploying production applications, hosting from S3 is a very viable and cost-saving option if your app can support it.<\/p>\n<p>S3 doesn\u2019t support HTTPS for static websites, which would be a dealbreaker, but you can put it behind CloudFront (AWS\u2019s CDN) which, in addition to improved caching and performance, can use a custom domain with HTTPS. It even has a more generous free tier for data transfer\u201450 GB rather than S3\u2019s 1 GB.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>Getting Started With AWS&#8217;s CloudFront CDN<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Setting_This_Up\"><\/span>Setting This Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For this tutorial, rather than deploying simple HTML page, we\u2019ll deploy the starter project from <code>create-react-app<\/code>, as it better shows off S3\u2019s true potential.<\/p>\n<p>After running <code>yarn build<\/code>, we\u2019re left with the following assets in the <code>\/build<\/code>\u00a0folder:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3674 size-full\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/1f3b7ab3.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"react app contents\" width=\"700\" height=\"410\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This entire folder will be copied over to S3. Head over to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/console.aws.amazon.com\/s3\/buckets\/?tag=reviewgeek-20\">S3 Management Console<\/a>, and click \u201cCreate Bucket.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3675\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/89734f82.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"create bucket\" width=\"700\" height=\"252\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Give it a name (it must be unique among all AWS accounts), and click \u201cNext.\u201d You can turn on versioning in the options here, but there isn\u2019t much else to consider. Click \u201cNext\u201d again.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Install and Configure the AWS CLI<\/em><\/strong><\/p>\n<p>On the next screen, you\u2019ll want to uncheck \u201cBlock All Public Access.\u201d This is on by default to prevent objects in buckets from being visible to the open internet, which would make your bucket unreachable. AWS will pop up with a warning that says to turn it back on unless you\u2019re using \u201cspecific and verified use cases,\u201d such as static website hosting. Because that\u2019s exactly what we\u2019re doing, you can ignore this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3676\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/46284a6c.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"turn on public access\" width=\"700\" height=\"286\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Click \u201cCreate\u201d on the bucket, and open it up.<\/p>\n<p>You can manually drag the contents of your HTML folder into the bucket, but a better method is to use the AWS CLI\u00a0to sync the entire folder up to your bucket. The command is pretty simple:<\/p>\n<pre>aws s3 sync . s3:\/\/bucket-name<\/pre>\n<p>Now, you should see your folder contents in the bucket:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" alignnone wp-image-3677 size-full\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/025314eb.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"bucket contents\" width=\"700\" height=\"364\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Once everything is synced, you can configure the bucket to allow website hosting. From the properties tab, enable the \u201cStatic Website Hosting\u201d option, and select your index file.\u00a0 You can also select an error file to show users a more personalized 404.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3678\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/89734f82-1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"enable static website hosting\" width=\"700\" height=\"642\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This turns on static website hosting, but doesn\u2019t explicitly grant read access. To do that, you\u2019ll need to add the following bucket policy under Permissions &gt; Bucket Policy:<\/p>\n<pre>{&#13;\n  \"Version\":\"2012-10-17\",&#13;\n  \"Statement\":[{&#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  ]&#13;\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3679 size-full\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/46284a6c-1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"attach bucket policy\" width=\"700\" height=\"284\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This will pop up another warning telling you that public access is on. You can again ignore this.<\/p>\n<p>Your bucket will now be viewable from the following endpoint:<\/p>\n<pre>http:\/\/BUCKET-NAME.s3-website.REGION.amazonaws.com\/<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3683\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/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<p>Great! Everything works correctly. The client requests the bucket, which serves the <code>index.html<\/code> file, which downloads all required JS and CSS assets, and renders the spinning React logo.<\/p>\n<p>However, this endpoint obviously isn\u2019t user friendly, so you\u2019ll probably want to configure a custom domain\u00a0for your S3 site. The easiest method is to use CloudFront to serve requests, which is the only way to support HTTPS anyway. If you don\u2019t want to use CloudFront, you can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/dev\/website-hosting-custom-domain-walkthrough.html?tag=reviewgeek-20\">set up a custom domain using Route 53<\/a> to alias to your bucket\u2019s default endpoint.<\/p>\n<p>Head over to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/console.aws.amazon.com\/cloudfront\/?tag=reviewgeek-20\">CloudFront Console<\/a>. Select \u201cCreate Distribution,\u201d and choose \u201cWeb\u201d as the type. On the next screen, under \u201cOrigin Domain Name,\u201d select your S3 bucket from the dropdown. Make sure to also check \u201cRedirect HTTP to HTTPS.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3680\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/46219c7c.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"enter name and redirect HTTP\" width=\"700\" height=\"392\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Further down, you\u2019ll want to configure your domain. Enter in your alternate domain name, and select \u201cCustom SSL.\u201d Request one from ACM; it may take up to half an hour to verify depending on your DNS provider, though if you\u2019re using Route 53, you can create and verify the record automatically within a few minutes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3681\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/01\/f0f852f3.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"setup alternate domain\" width=\"700\" height=\"382\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>After that, click \u201cCreate Distribution\u201d at the bottom, and wait about 15 minutes for CloudFront to get everything settled. Once it\u2019s done, you\u2019ll be able to visit your custom domain name, and see your app served directly from S3.<\/p>\n<p>If you want to make version management easier, you can set up an automated deployment pipeline with AWS CodePipeline. Simply choose deployment to S3, and AWS will deploy source code updates automatically, including build artifacts.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Set Up an Automated Deployment Pipeline for an S3 Website<\/em><\/strong>\n<\/div>\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.cloudsavvyit.com\/3673\/how-to-host-a-website-from-s3\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Host a Static Website on Amazon S3 \u2013 CloudSavvy IT&#8221; Chances are, you probably don\u2019t need a full web server like NGINX running on EC2 to get your website up and running. If you\u2019re just looking to host a static website, you can store all the content in S3, and host it from&#8230;<\/p>\n","protected":false},"author":1,"featured_media":267899,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/06\/55634f08.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-267898","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\/267898","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=267898"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/267898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/267899"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=267898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=267898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=267898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}