Host a Website with AWS S3 & AWS Route 53 | AWS Serverless

hey guys what's going on in this tutorial I'm gonna walk you through the steps of hosting a static website using Amazon s3 once everything is all set up I'll show you how to associate a custom domain name with your website using Amazon route 53 if that sounds good please continue watching this video and if you find these tutorials helpful in general please consider subscribing to this channel alright let's do this [Music] Amazon s3 is a general-purpose object storage service and it just happens to be perfect for hosting websites now short disclaimer s3 is really good for hosting static websites that is websites that just use front-end code such as HTML CSS or JavaScript it does not support server-side scripting languages such as PHP ASP or asp.net however you can set up a static client-side website an s3 and then integrate that with a server list back-end using services such as API gateway AWS lambda dynamo DB or one of the other Amazon relational database services alright now I've set up a sample website that I'd like to show you and notice it's running at localhost 3000 so this is just on my local desktop and it's a hex all energy company this is just a dummy website that I've set up for another tutorial that I'm currently working on on AWS Cognito alright so this is what I want to host today and let's walk through the steps on how to do that all right so let's go ahead and sign in to the AWS console and let's head over to s3 ok so our strategy here is gonna be to set up two s3 buckets our first bucket is going to have the name of our domain domain.com without the WW then we'll set up a second bucket with wwo main comm and the reason for that is because technically WW is a sub domain so we need to have a separate bucket for that and then what we'll do is redirect traffic from the www bucket to our domain comm bucket all right and if that doesn't make sense then I'm sure it'll be clear once we get it set up and once you see it so go ahead and click on create bucket all right now enter in the domain name that you want to use for your website and if you don't really plan on purchasing a domain name but you just want to go through the motions here and see how this is set up feel free to make anything up so I'm going to use hex all energy.com okay make sure your spelling is correct and go ahead and click on create Oh also make sure that the region is set to the region you want to use which is probably the one that's closest geographically to your location all right and then go ahead and click create alright now we'll do the same thing except we'll add ww2 the name okay and go ahead and click on create for that one alright so far so good so step two is going to be to upload our website content so go ahead and click into your first folder without the sub domain alright go ahead and click on upload alright now you have two options here either to add files via this dialog that will pop up or drag and drop now a tip that I've learned through experience here is that if you use the dialog if you have any folders under your website content it won't actually add them so it's only going to add individual files so I've got a static folder here so I'm gonna actually drag and drop my files just so that it captures everything that I want alright now this website is just a simple react.js site and I've used the NPM run build script to generate a build folder of static assets so I'm just going to up load these files right here alright so I'm going to drag and drop these over and click upload alright that looks good so all of my website files have been added now the next thing we need to do is to add a policy to our bucket to allow public access to the website files so go ahead and click on permissions click on bucket policy and I'm going to copy and paste a sample policy that I got from the AWS documentation now I will include this in the description of the video so you guys can just copy and paste it so just go ahead and copy and paste it into your policy and change the example comm to match your actual website domain so Xcel Energy comm and click on save access denied ok so if you get this message and you probably will the reason is that s3 by default dis allows the addition of any kind of policy that would allow public access to your bucket it's just a safety mechanism so we have to override that so let's go ahead and click on believe its properties oh I'm sorry it's public access settings underneath your permissions tab all right ok so go ahead and click on edit and we will what we want to do is deselect the two options under manage public bucket policies for this bucket that's a tongue twister alright so go ahead and deselect those two and click Save go ahead and type in confirm click on confirm all right so we should be able to update our bucket policy now so let's try that again let's go back to bucket policy all right copy and paste that in here one more time change our domain and save alright that looks good so you can just obviously disregard this message it's just telling you that you've enabled public access to your bucket that's okay because we're hosting a website so we need people to have public access if they want to see it all right so the next step is going to be to enable website hosting on our primary bucket that is the hex all energy comm one without the W W so make sure you're still on that bucket head on over to the properties tab and go ahead and click on static website hosting all right so all we have to do here is select the first option which is use this bucket to host a website okay so under index document just enter in the filename of the entries the entry point of your website which may be index.html may be index.htm just make sure that corresponds with your initial file now another thing that I've learned through trial and error here is that you want to specify the same file as your error document unless you have a specific error HTML or something like that but if you don't just go ahead and enter the same index.html and the reason for that is if you don't do that and the first time I did this I left this I left this field blank and the issue I ran into is that I could only see the first page of the website I couldn't click to any of the other pages and it took me a while to figure out the reason why so just make sure that you have something under error document all right okay now that's all we have to do go ahead and click Save okay now let's go back to our s3 landing page this time we need to do some configuration in our WW version okay so go ahead and click into your www bucket now we're looking for the same thing so go to properties static website hosting and here's where we'll configure our redirects so go ahead and select select the second option this time redirect requests and under target bucket or domain we want to enter the domain of our first bucket all right so Xcel Energy com the one without the www and go ahead and click on save now note that this redirect is not going to work until we actually get the domain set up because it's pointing at our literal domain so go ahead and click Save and at this point we should be able to use our Amazon provided temporary domain name for our first bucket to view our website so let's go ahead go back to your first bucket which in my case it's hex all energy and we need to find the temporary domain which I believe if we go into back into sorry the properties tab and static web website hosting we should find that yep here we go so go ahead and put this URL this temporary endpoint into the browser and there we go so our site is already up and running the only thing left to do is to put in our custom domain name but for now we can access it right here through this Amazon provided temporary domain alright so the heart parts are done so in the next part of the video we will we'll go through how to set up a custom domain with Amazon route 53 alright guys so the next step is going to be to head on over to route 53 okay so go back up to services if you don't see it in your history or right here you can just always search for it in the search bar that should pop right up okay so step number one is to actually register a domain and now if you already have a domain name ready you can disregard this part obviously now I've registered my domain name this morning but it's just a very simple process go ahead and search for available domain first so something like you know just to show you a quick example here so just go ahead and check and confirm availability and then once you've done that go ahead and add it to your cart and scroll down click continue and then it'll prompt you to add in your credit card and your personal information all that kind of stuff so once you do that you'll get a message saying that it could take up to three days for Amazon to register and configure your domain name in my experience it never takes longer than an hour or two I think I got my confirmation email like an hour or two after I registered this domain this morning so feel free to pause the video or come back once you receive that confirmation email from Amazon and we'll go to the next steps from there alright so once you've received that confirmation email from Amazon go ahead and navigate back to route 53 and you should see one or more items under DNS management so go ahead and click on hosted zones alright and go ahead and click on your domain that you've just registered alright so what we need to do here is create two record sets one for domain comm and one for your WWE main comm and a record set is just a simple document that describes the flow of traffic from your web from your domain in other words what is your domain pointing to ok so go ahead and click on record set so for the first one just leave this leave name as the default okay and make sure that your domain is specified over over to the right here ok you can leave the type as default for alias change it to yes okay and if you click into this input here you should get some options and go ahead and select the domain comm version of your domain ok all right leave everything else as default and click on create alright perfect now we're gonna do the same thing only with a slight difference for your W W bucket so go ahead and click again on create record set this time under name add wwk and alias again switch that to yes this time you should have a different option if you click on the input and choose the www version of your domain ok and again leave everything else as default and go ahead and click on create alright and that is it so it may take up to 30 minutes for your new domain to propagate through the Internet's so we can check right away but it may take a couple of minutes at least so let me let me just give this a try here oops and I'm just trying to copy and paste that but I also have to do is modify what I have already here in my browser and it's already there oh my gosh that's super fast so awesome but if you don't see it right away don't worry first try to clear your cache in your browser and if that doesn't work then just wait a couple of minutes and it'll likely show up within minutes all right all right guys so that concludes this tutorial of hosting your website on s3 I hope you enjoyed it and I hope it was useful if you guys enjoy these videos you want to see more then please consider subscribing to my channel and hopefully I will see you in the next video alright guys take care bye [Music] [Music] you

Channel: Cloud Path

Views: 27,480

Keywords: aws s3 tutorial, aws s3, amazon s3, host a website on aws s3, hosing a website on aws s3, host a website on Amazon s3, hosting a website on amazon s3, host a static website on aws s3, hosting a static website on aws s3, static website, s3 hosting, amazon s3 tutorial, Route 53 tutorial, aws route 53 tutorial, domain name route 53, aws serverless, aws serverless tutorial, host website amazon, amazon host a website, host a website on amazon, amazon web hosting, route 53

Id: P_B79xXf-w8

Length: 13min 59sec (839 seconds)

Published: Wed Jan 23 2019