Demo AWS S3 static website hosting and file upload

hi steve gale here in this video what we're going to do is we're going to create a an s3 bucket which we're going to use to host a static website so we'll create the sri bucket will enable public access and then what we'll do is we'll up slide some web content into the bucket and then we'll enable access to the um to the bucket and test and confirm that our website is being hosted in s3 so the first thing to do if we haven't already done so is to go to the s3 aws console so we go and select um s3 here and what we want to do is we want to create a bucket so we'll create a bucket and look for a name we'll just call it um website dash 123 7 9 2 and we'll leave the region as the same and you can see here that it's got um block all public access now if you were storing files then you probably want to block public access and only give access to certain users but if we're hosting a website obviously a website typically would have public access so what we're going to do is we're going to untick the block public access and and when we do that we need to acknowledge that um that these settings result in the bucket and objects becoming public so this is sort of like just a verification that you you really know what you're doing when you're doing this so you want to tick that i acknowledge and then we can go down we don't need versioning and we don't need tags and we don't need encryption so we can create the bucket and we need to get her out of our uppercase character so let's try this now and create the bucket so what we're going to do now is we're going to add some tags so we'll select the bucket and um here and we'll go to the properties tab and we're going to go down to tags and we're going to add a tag so we're going to go to edit and add tag and we'll put is our key department and a value is going to be marketing and we'll um save those changes so by putting a tag on a bucket then it helps us to keep track of what this bucket is about in this case it's a marketing it's a marketing bucket for a website so the other thing we want to do is we want to go down to um right down the bottom and we've got static website hosting so in the static website hosting we want to click the edit and we're going to enable static website hosting and um here for our index document we're going to use index.html so if we just hit the bucket directly or if we hit the website directly index.html will be the default page that gets displayed and with our error document we're going to use error.html and we want to host hosts a static website so that looks good and we don't need any redirection rules so we can [Music] save the changes so scrolling down to the bottom back down to static website hosting we've got our bucket website endpoint and you can see here it's http website 12392 which was our which was our bucket name dot s3 website usc 1 amazon aws.com so what we can do is we can copy that link and if we open up that link in here we paste the link we should get a forbidden so at this stage we're getting a forbidden error and that's what's to be expected at this point in time so what i'm going to do now is i'm going to return back to the bucket and we're going to upload some files so let's click out of here let's go back to buckets and let's go to our bucket and what we're going to do is we've got this link here upload so what i want to do is i want to upload some files so i'm going to choose upload and i've got add files here so or i can drag and drop but what i can do is i can say add files and then i can navigate to the files that i want to um upload or i can just use drag and drop so let's use drag and drop so i've got some files i should be able to find some files just bear with me for a minute so i have some files here so i've got an index.html which is the default page that will be hit when i browse to this website and i've also got a css file and a javascript file so these are all static files client-side javascript is static in the sense that there's no there's no back-end server-side code being executed so what i'm going to do is i'm just going to grab these files here and i'm going to drag them into to upload i'll try that again and you can see here here's my files that have been uploaded i've got my index.html my script.js and my style.css so what i'm going to do is i'm going to upload these files and we can see here that the upload has succeeded so if we go back to here and we do a refresh notice previously we we got 403 forbidden if we run this again we still get our 403 forbidden and the reason for that is that the um the the objects that we've uploaded are still private so what we need to do is we need to make them publicly accessible as well so we'll return to the s3 management console so we're going to close here and what we're going to do is we're going to select all of these three objects you can see we're here this is our website and these are our objects so we're selecting the all three objects and what we're going to do is we're going to go to actions and we're going to make them public i'm going to choose make public and and then make public and you can see here that we've successfully edited public access and we've got three objects which are publicly accessible so now if we go back to our link here and we re we do a refresh with a bit of like and we get our website so we've successfully um uploaded our website content we've made our s3 bucket publicly accessible and the three objects that we've uploaded we've not enabled them for public access and we can now we've got a static website being hosted in um in s3 so now what we're going to do is we're going to go back to our content here and we're going to modify we're just going to modify um the um the content a little bit sorry just this one and we want to open with uh what have we got here let's try visual studio code and we might make a change somewhere the html code let's have a look we can do looking for something to change there's plenty there we can change but let's go in here and um um what section have we got here contact section so um let's let's put here um some text we can be contacted and following address that'll do we'll delete this line and save that so we've made this change so what we're going to do is we're going to re-upload and now changed file and see what we need to do to um to maintain changes on the website so i'll minimize this just for the moment we'll close this and what we'll do now is we'll go back and we'll re-upload so what we'll do is we'll come back and we'll re-upload the file that we've changed which is this one here index.html and we'll re-upload that and we've succeeded so we've we've changed that index.html file so what we need to do is we need to close this then we need to go back here and we need to select this one and actions we need to make this public again because the new object and make public and you can see we've got one object that we successfully made public so now if we go back and we refresh our website and we go back to contact we can see that the changes that we've made we can be contacted at the following risk blah have been successfully updated on our on our website that concludes this demonstration thanks for watching

Channel: BizEcommerce

Views: 811

Keywords: AWS S3 bucket static website public access

Id: v1PUaTYmU1w

Length: 13min 5sec (785 seconds)

Published: Tue Jun 15 2021