How to serve a static website hosted on AWS S3 bucket and AWS CloudFront with custom domain name

hi there in this video i'd like to show you how to serve a static website built in angular reactive.js or any other modern framework and which will be hosted on aws s3 bucket connected to a cloud from distribution and of course will be searched through a custom domain name one very important thing to pay attention to is the router issue for such websites where the router state is handled within the framework itself and you have to deal with hashbank characters in the url so i'll show you how to fix this problem as well by using redirect rules from s3 bucket configuration let's take it in an early manner and start with creating the extra bucket where our site is going to be hosted so once you're in your aws management console search for s3 service access it and let's create a new bucket let's call it md.md make sure you provide a public access to your bucket otherwise you your site won't be accessible from the internet and yes we acknowledge this thing and once the bucket is ready we have actually to update a few more things like bucket policy to allow our objects our assets from the bucket to be requested by the end user so instead of bucket name we have to specify our bucket which is md.md save it as you can see it became publicly accessible next thing in your properties tab at the bottom of the page we want to enable the static website hosting that's how our application will be searched so edit it enable it provide an index html for your root and save the changes and with this configuration i think we're ready to upload our application let me take you tell you a few things about the application itself so it's a small angular application which has a router with your components so you can switch between components and as you can see in the url please pay attention here it changes the path so it works i expect to see the same behavior in our stream bucket in our application so let me upload this assets into the bucket and once it's ready we can go back into our bucket properties static website hosting and here you can see the endpoint which you can access to see your application so as you can see it works even the routing works but what happens if you want to share this url with one of your friends when the router is changed and they will try to access this url directly so let's try to refresh the page and we see an error why this is happening because the browser when you try to access the changed path in the url it's trying to search for this folder within your bucket and of course you don't have such folder because this router should be handled by the front-end framework itself so how how we can fix this thing the first approach is to use is to go into our static website hosting configuration edit it and provide for the error handler the same index.html document save it and this should be enough to deal with this problem so at the moment if the when there is an issue the bucket cannot find this path requested by the browser it redirects to our index.html document and provides this url and from this point the front-end framework picks up all the events and it's displaying the proper component so first component works second component if i refresh page works as well but this solution might not work for everyone some people might have a proper error handler or display proper message so they might not want to have this index.html under their your document so what to do in this case to fix this issue in this case we should use redirect rules and they should look like that so what happens here when there's any 403 error the browser cannot find the path that folder in the bucket it will redirect to the same url but with hashbank characters in the front of the prefix and the same happens for euro 404 let's have the changes but to deal with this situation we have to update also our application and in my case the entire logic sits in here so i'm pulling the current state from the browser history which is the navigation one at which url i'm located in a moment i'm taking the current page title and i'm checking if i have a hashbank character in front of my your path in the url and if there is such thing i will pull all the other characters the rest of the path into my variable in here if there is no such thing it will be undefined and nothing will happen but if there is this path after following the hashbang characters i'll replace the current state which is this one with a new path this thing will trigger the front-end application events to handle the properly there or routing subscriptions and the application itself will redirect already to the proper component or will handle the logic within the framework itself and to enable this thing i have to add it also in my index html file let me build the application once again and when applications already we can actually upload our new objects into the bucket so let's go into our objects list drag them here and upload new new versions it's done and now if i'm trying to refresh the page as you as you can see here it it's a painting that has been character quickly but after that the application itself is replacing it with a proper path so it works without having the index.html specified as an error handler just using the redirecting rules from the strip bucket itself so it works the next thing to do in this case is to enable the https so without https our site is not so trustworthy in nowadays and we have to enable this thing so if you go into the bucket under your bucket properties at the bottom of the page you can see this one is served only via http protocol in in order to enable https we have to attach a cloud from distribution to our bucket let's copy first of all this url and go search for cloud front cloud front service and here let's create a new distribution so for origin name you have to provide the endpoint of your bucket the one which we just copied but without the protocol so no http in front of it next we want to redirect all the http requests to https and if you want to use the domain name provided by aws you can keep this certification here the aws in this case will generate a random domain name with their own certificate if you have your own your custom domain name with your own certificate you can specify the certification here i have already one upload it into the aws and the domain name should be listed in here if you have multiple domain names you have to specify them in the next line in my case it's just only one single domain name it's awsmd.md so with this configuration should be enough we can create the distribution and it will take some time to update its status so when the distribution is ready it's deployed we have to go inside of this distribution and copy the domain name we need this domain name to create an ls in our route 53 so search for route 53 access our hosted zone and for our domain name we have to create a new record so record name leave it blank record type should be a and make sure you tick this ls radio button in here we should search for our cloud front distribution and specify our url here and create the record this way we will redirect our domain name to that cloudform distribution right now if we try to access our domain name we should see our application so it's here and if you're trying to refresh the page to see the hashbank character quickly replaced by the application itself you see we're being redirected to the bucket in point served over http so in order to fix this issue we have to go back into our s3 bucket search for s3 service let's find our bucketing here which is this one properties at the bottom of the page so we're being redirected to this url in order to fix this issue we have to update this policy rules and specify also the domain name within so it should be like that every time we should be redirected to our domain name over https and the same for the 404 year save it and after you you're doing some changes within your s3 bucket uploading new assets or changing its configuration we have also to clear the cache for our cloudfront distribution so let's go now cloud form distribution go inside it and here in validations we have to create a new validation and clear all the assets we have cached before so invalidate let's wait until it's done and when it's completed we can go ahead and check our aws domain name again so it works if i'm trying to access one of the components and refresh the page it stays on my domain name so it looks like that if you have any comments please feel free to share them maybe you have some feedback or maybe suggestions how to improve this journey see you next time

Channel: Tomsa

Views: 1,321

Keywords: aws, s3, s3 bucket, cloudfront, route53, frontend, static hosting, cdn, angular, react, vuejs, ssl, https, domain, website, site, static, domain name, custom domain, web, application, front-end, front end, hosting, service, javascript, java script, testing, name, alias, distribution, zone, redirect, redirection, rules, hash bang, router, route, cloud front, bucket, app, js, html, public, development, cloud, deploy, deployment, automation, subdomain, sub-domain, server, serverless, server-less

Id: yHfcARlEemA

Length: 12min 26sec (746 seconds)

Published: Sun Apr 18 2021