How to host a static website on AWS S3

hey everybody welcome back to another web dev junkie video i hope you guys are having a great day so i want to show you how to host a static website on an s3 bucket so this tutorial is going to include how to set up the policies the routing if you want to upload like a react application a single page react application i'm also going to show you how to upload files from the bucket and also how to point a custom domain to your bucket just note that if you want to actually host your own ui i recommend you use aws amplify they have a nice cli tool that you can kind of just point to a directory and host a ui from that additionally i'm not going to be covering cloudfront in this tutorial which is another important service you need to learn if you want to host your own service using an s3 bucket all right with all that being said let me just show you how to host a static site on an s3 bucket so unlike my other tutorial videos i'm not going to go through every step of creating the bucket hopefully you've watched some of my other tutorials and you already know how to do this what i'm going to do instead is just show you how i've configured some of these things and hopefully you can learn from that starting off i went to the s3 dashboard and i created a bucket the main important step to this is that the bucket needs to be named the same domain that you plan to point to that bucket so for example i have a domain called test.thewebdavjunky.com which is hosting a little react application here you need to make sure your bucket has the exact same name that of the domain that you plan to use okay that is kind of the key takeaway of this tutorial it's a little caveat you need to know but once you create the bucket um you need to make sure that is configured properly for hosting static sites so the first thing you do is you go to this properties tag and you can go down to the very bottom and there is a static website hosting option okay so you need to probably enable that so click edit and then go ahead and make sure that's enabled and there are a couple of things you need to type in right the the default page would be your index page if you're hosting like a react app or a single page application typically there's an index file and that needs to be your like your point of entry okay and then also for your error document you typically want to put your index as well so this is like if an error happens you can redirect the user to an error page i just typically just put the index.html because you can have your react single page application handle that error logic if you want to and then secondly there's a very important routing rule that you need to set up by default if you try to access a route such as like my domain hello you're just going to get an error because s3 doesn't know what to do with that because there's no file called hello in the bucket okay so you need to set up a routing rule that says like hey if someone tries to hit a endpoint that doesn't exist aka it gets a 404 error you need to redirect that user to a domain and then also you can tell it to replace like the the suffix of that url to the end so let me show you here if i were to go to this url slash hello you'll see that the url gets redirected to hello or to the webdevjunky.com pound slash hello basically if i were to go to whatever suffix url path here you'll see that the url up here gets redirected to hash tag pound slash whatever so you can set up your react obligation to rewrite that url if you don't want that hashtag impound but just keep that in mind that you need to set up the routing rules if you want people to be able to go to sub routes inside of your react application so again we just set up a static hosting option and set up some redirect rules and then set up the index and error document so the second thing that you need to do with setting up the bucket is you need to make sure you have the policy set up so if you go to this permissions tab you can scroll down and you can paste into some policies here so click the edit button you can paste in this policy but basically this is saying allow anyone to access any file in this bucket um these actions s3 git objects can get object versions or actions that you need to fetch a fetch a file or download a file and then more specifically we're saying allow that action to happen on any file you this is what the star means inside of this folder so the third thing is make sure that your block public access settings are off so go in here hit click edit make sure these are all set to off this will allow people to go into your bucket and download your files as well it's basically another layer of security that amazon allows you to set up just in case you don't want anything to access your bucket so now that you have the policies and that configuration set and you have the static website hosting set you want to go through here and you want to upload your static site so what i do is click upload and you can just go ahead and click add files and i have a a react application already built so if i go to my workspace i go to my youtube folder and i think i have like a react was it called um react pitfalls i have a build folder so i went to my react application and i ran npm bill okay when you do that it's going to make a build folder that has a bunch of files all you need to do is copy and paste these files into that bucket which you can do with the upload function here so i can just copy all these or i should say select all these you select those files you basically can click upload that will upload those files to the bucket or refresh or overwrite those files if they already exist in the bucket so at this point you can actually access the bucket if you go down the properties and scroll down to the static website hosting you'll get a url that you can access these files with okay so you see here we have the same application loaded but notice that the url or the domain is kind of long it's a verbose and it's not exactly what we want so if you have a domain already bought which i happen to have one you need to go into your settings of that domain let me zoom in make sure you can see some of the stuff and hopefully my head is not blocking this but you need to go to your domain and you need to set up a cname record to point a sub domain or you can do www here if you want to point the full domain to your bucket but i just want to do a subdomain so i set up a cname with test and i'm pointing it to that buckets url so that's the same url that is located here without the extra like http slash in front of it and once you have that set up you know it might take a little bit of time to propagate but you can go to your url and that will redirect you to your bucket and load your react application so that is basically how you can set up a static website using s3 i hope um i hope that was a good overview i hope you learned a couple of things about how to set up static website hosting and like i said the proper way i would recommend doing this if you're beginner is just use aws amplify they have like a one click button that you can deploy react applications and it'll create all this stuff behind the scenes um but if you wanted to do this the way i showed you the more manual way it's a good learning experience the next step is you want to look in the cloud front and basically put cloud front in front of your bucket you can kind of select this bucket as an origin and then that's going to distribute your application across the globe and make it run and allow it to load really fast for users okay there's a lot of other stuff you can configure in cloud front so that's why i didn't want to do that in this tutorial right now because i think that's a lot of information at once but be sure to stay tuned if you want to see more about how to point a cloudfront distribution to a bucket and have your application hosted over https because that's one thing that you'll notice here you have this over a non-secure connection so you definitely want https and an ssl certificate kind of attached to your site to make it more secure alright thanks for watching hope you enjoyed be sure to leave a comment and subscribe if you're new to this channel

Channel: Web Dev Cody

Views: 6,254

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, s3, s3 static site, hosting react on s3, hosting on aws

Id: Oj_cFNMQaSE

Length: 7min 35sec (455 seconds)

Published: Fri Oct 08 2021