{"id":2764,"date":"2018-07-29T08:28:27","date_gmt":"2018-07-29T08:28:27","guid":{"rendered":"http:\/\/blog.paranoidprofessor.com\/?p=2764"},"modified":"2018-07-29T08:28:27","modified_gmt":"2018-07-29T08:28:27","slug":"aws-fun-with-s3-buckets","status":"publish","type":"post","link":"https:\/\/blog.paranoidprofessor.com\/index.php\/2018\/07\/29\/aws-fun-with-s3-buckets\/","title":{"rendered":"AWS &#8211; Fun with S3 Buckets"},"content":{"rendered":"<p>My last post was discussing the S3 bucket which can be used as more than a simple dumb disk for storing family photos or videos.<\/p>\n<p>One of the more interesting things that can be done with an S3 bucket is to use it as a web server.<\/p>\n<h2>Web Server<\/h2>\n<p>Don&#8217;t get overly excited.\u00a0 Indeed S3 can be configured to perform as a web server but it is not a full fledged server that you might be used to.\u00a0 That is to say that it will serve up static content but not run server side scripts.<\/p>\n<p>Once you have a S3 bucket setup it is trivial to create the static web site. Simply go into the properties for the bucket and enable &#8220;static website hosting&#8221; and provide the actual html script or scripts to be used.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2776\" src=\"http:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-01-s3fun-web-setup.png\" alt=\"\" width=\"551\" height=\"624\" srcset=\"https:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-01-s3fun-web-setup.png 551w, https:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-01-s3fun-web-setup-265x300.png 265w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/p>\n<p>However, just like in my previous article AWS &#8211; S3 buckets permissions are the tiny bug-a-boo that could cause some behavior problems in your website.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2777\" src=\"http:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-02-s3fun-web-site.png\" alt=\"\" width=\"650\" height=\"664\" srcset=\"https:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-02-s3fun-web-site.png 650w, https:\/\/blog.paranoidprofessor.com\/wp-content\/uploads\/2018\/01\/aws-02-s3fun-web-site-294x300.png 294w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>This simple example uses exactly one html page and two graphic files but because the permissions for one of the graphic files was not set to public the contents are not displayed when someone visits the web page.\u00a0 This is a common permission problem that needs to be kept in mind when creating static web pages on S3.<\/p>\n<p>I am not a html programmer but I would suppose that the code (below) is virtually identical to what you might see in your normal website.<\/p>\n<blockquote><p>I would have loved to put the actual code here but was having formatting problems.\u00a0 The code is actually fairly simple html, if you are really curious you can download it here.<\/p><\/blockquote>\n<div class=\"\"><a href=\"http:\/\/blog.paranoidprofessor.com\/wp-content\/downloads\/aws-s3-website.zip\" target=\"_self\" class=\"emd_dl_blue\">Download files<\/a><\/div>        <style type=\"text\/css\">\r\n    .emd_dl_blue {\r\n        -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;\r\n        -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;\r\n        box-shadow:inset 0px 1px 0px 0px #bbdaf7;\r\n        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );\r\n        background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );\r\n        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');\r\n        background-color:#79bbff;\r\n        -webkit-border-top-left-radius:0px;\r\n        -moz-border-radius-topleft:0px;\r\n        border-top-left-radius:0px;\r\n        -webkit-border-top-right-radius:0px;\r\n        -moz-border-radius-topright:0px;\r\n        border-top-right-radius:0px;\r\n        -webkit-border-bottom-right-radius:0px;\r\n        -moz-border-radius-bottomright:0px;\r\n        border-bottom-right-radius:0px;\r\n        -webkit-border-bottom-left-radius:0px;\r\n        -moz-border-radius-bottomleft:0px;\r\n        border-bottom-left-radius:0px;\r\n        text-indent:0;\r\n        border:1px solid #84bbf3;\r\n        display:inline-block;\r\n        color:#ffffff !important;\r\n        font-family:Georgia;\r\n        font-size:15px;\r\n        font-weight:bold;\r\n        font-style:normal;\r\n        height:41px;\r\n        line-height:41px;\r\n        width:153px;\r\n        text-decoration:none;\r\n        text-align:center;\r\n        text-shadow:1px 1px 0px #528ecc;\r\n    }\r\n    .emd_dl_blue:hover {\r\n        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );\r\n        background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );\r\n        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');\r\n        background-color:#378de5;\r\n    }.emd_dl_blue:active {\r\n        position:relative;\r\n        top:1px;\r\n    }\r\n    <\/style>\n<p>I am not expecting any problems with the Amazon S3 bucket but this web site does have one little flaw.\u00a0 If for some reason this S3 service was not available, it might be difficult to move it to another bucket to run.\u00a0 The reason for this is that the references to the various resources are using the actual path to the regional bucket (s3.us-east-2.amazonaws.com) and not something more generic like supercoolwebsite.com.\u00a0 However, this could probably be corrected by using route 53 and your own domain &#8211; it would still leave you to design a highly tolerant solution.\u00a0 You might want to replicate your files to another bucket in another region just in case.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>My last post was discussing the S3 bucket which can be used as more than a simple dumb disk for storing family photos or videos. One of the more interesting things that can be done with an S3 bucket is &hellip; <a href=\"https:\/\/blog.paranoidprofessor.com\/index.php\/2018\/07\/29\/aws-fun-with-s3-buckets\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[95,90,85],"_links":{"self":[{"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/posts\/2764"}],"collection":[{"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/comments?post=2764"}],"version-history":[{"count":9,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/posts\/2764\/revisions"}],"predecessor-version":[{"id":2837,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/posts\/2764\/revisions\/2837"}],"wp:attachment":[{"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/media?parent=2764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/categories?post=2764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.paranoidprofessor.com\/index.php\/wp-json\/wp\/v2\/tags?post=2764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}