34
loading...
How to Host a Website on AWS with a Custom Domain and HTTPS?
Hi there, this is a guide where I will tell you how you can host a website on AWS with a custom domain and how to configure an SSL Certificate for it so that the request to the website is going to be in https.
You can find the video guide here.
Agenda
Concepts
Overview
Hands-On, in 11 simple steps!
You can find the video guide here.
Agenda
Concepts
Overview
Hands-On, in 11 simple steps!
Architecture
Concepts
What is Route53?
Route53 is a DNS service. (Domain Name System), with this service, you can manage your domains and you can route all of the traffic to wherever you want to.
Next, we have CloudFront, what is CloudFront?
CloudFront is a content delivery network, or a CDN, that will deliver the data or the content to users with very low latency.
What is an SSL Certificate?
An SSL certificate is going to make sure that the request is in https. And what it means to be https is that the data is encrypted when a request is made to the server. And this is of course to prevent hacking. If you request a domain that doesn’t have https your browser will warn you that it’s not safe and ask you if you want to go back or visit anyways, finally the CloudFront is going to make a request to the s3 bucket, where we actually have our application.
What is S3?
Simple Storage Service, S3 Provides object (file) storage through a web interface. It’s built to store, protect and retrieve data from “buckets” at any time from anywhere on any device.
Concepts
What is Route53?
Route53 is a DNS service. (Domain Name System), with this service, you can manage your domains and you can route all of the traffic to wherever you want to.
Next, we have CloudFront, what is CloudFront?
CloudFront is a content delivery network, or a CDN, that will deliver the data or the content to users with very low latency.
What is an SSL Certificate?
An SSL certificate is going to make sure that the request is in https. And what it means to be https is that the data is encrypted when a request is made to the server. And this is of course to prevent hacking. If you request a domain that doesn’t have https your browser will warn you that it’s not safe and ask you if you want to go back or visit anyways, finally the CloudFront is going to make a request to the s3 bucket, where we actually have our application.
What is S3?
Simple Storage Service, S3 Provides object (file) storage through a web interface. It’s built to store, protect and retrieve data from “buckets” at any time from anywhere on any device.
Architecture
The request in this example is to fullstackexp.com. The request is going to hit route 53.
CloudFront is going to serve the s3 bucket back to the user so the user can see the content. CloudFront has a very good caching feature, called edge location, which can be useful when visits a page of your s3 bucket for the first time CloudFront gets the page from s3, but if the user has already visited for example 2hours ago, that page will be fetched from the cache on the CloudFront and it’s going to be much faster to serve the page.
At the same as the last point, the Certificate Manager is providing the domain and the SSL to CloudFront.
That’s it! Simple right?
The request in this example is to fullstackexp.com. The request is going to hit route 53.
CloudFront is going to serve the s3 bucket back to the user so the user can see the content. CloudFront has a very good caching feature, called edge location, which can be useful when visits a page of your s3 bucket for the first time CloudFront gets the page from s3, but if the user has already visited for example 2hours ago, that page will be fetched from the cache on the CloudFront and it’s going to be much faster to serve the page.
At the same as the last point, the Certificate Manager is providing the domain and the SSL to CloudFront.
That’s it! Simple right?
Hands-On in 11 simple steps
So let’s start the hands on part:
Let’s go to AWS, make sure you login, and access the AWS Management Console, where you can see the all the products or type for a specific product in AWS.
Let’s go and search for route53 and access it!
Look at the side menu on the left, and go to domains, and under this title there should be a registered domains, now if you don’t have a domain yet then nothing will appear, so we need to create one!
If you have the domain you can skip this step, if not, click on register domain.
Write your target domain name and click next, pick an available one, and press next and very and purchase, complete the order. Check your email.
Let’s go back to Route 53 and create a hosted zone.
In the form to create a hosted zone, write the name of your domain like .com
Hit the Create Hosted Zone button.
Now you should see two A records, one of type NS and one of type SOA.
Take the values from NS and past these values into a notepad or equivalent.
Associate your domain the route 53. On Route 53, go back to that side menu on the left, where it says Domains, and go to the sub link called Registered domains. Click on your domain. Click on add or edit name servers. And paste the ones you have on the notepad, you have to past 1 by one. Save that. Wait a few minutes and look at your email, you will get a notification update email. Check after a few minutes and after the email if the values have been updated.
add or edit name servers
Creating the s3 bucket: Search for the s3 service on aws. Go to S3. Create a Bucket. Give it a globally unique name. Remove the checkbox for block all public access. Enable server side encryption. Choose Amazon S3 key (SSE-S3) Save your new bucket.
Upload your app code into your s3 bucket. As always if you are using a react or angular app, make sure to build to production and then upload the inside of the resulting folder to your s3 bucket, here you will make the bucket public if you didn’t before and you also need to add a bucket policy.
Use the AWS generator for this here: https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html
Copy the policy! Make sure to replace your bucket name on example.com! From the auto generated from aws. Save the bucket policy.
Enable Static Website Hosting: Keep scrolling down and in static website hosting, choose enable, in index document add “index.html”, if you have an error page add it on error document, if you don’t have one just type “index.html” as well on it. And save. You will now have a generated endpoint, click on it to see if everything is fine with your app/index.html page.
Click on your endpoint to see the webapp you just uploaded!
Add Https
Type Certificate Manager in aws services search bar. Open it. Click on request a certificate, add your target domain name. The one you bought earlier. You can either choose Email or DNS validation. If you choose DNS, click on validation, and you will see a record of type CNAME and a button to create a record in route 53. Click on that. If you choose email you will get the same value for CNAME by email and then you can create it manually on route 53.
Go back to route 53 and double check your CNAME. You should have the certificate value.
Last Step: Use CloudFront
Search for CloudFront. Go to CloudFront.
Create a distribution, in the name paste the s3 bucket endpoint, without the http://
Only what comes after that.
In Default Cache Behaviour Settings: choose Redirect Http to Https.
In alternate CNAME, type your domain.
In SSL Certificate, click on the radio button that says Custom SSL Certificate. Your certificate will be suggested to you in the autocomplete, pick it. Save your distribution.
With this you connected your CloudFront with your s3 and the certificate but now you need to connect it to route53 as well.
Let’s go.
Go to Route 53, go to your hosted zone, click on create a record, choose an endpoint of type alias to CloudFront that should appear in autocomplete, pick it. Create the record.
Only what comes after that.
In Default Cache Behaviour Settings: choose Redirect Http to Https.
In alternate CNAME, type your domain.
In SSL Certificate, click on the radio button that says Custom SSL Certificate. Your certificate will be suggested to you in the autocomplete, pick it. Save your distribution.
With this you connected your CloudFront with your s3 and the certificate but now you need to connect it to route53 as well.
Let’s go.
Go to Route 53, go to your hosted zone, click on create a record, choose an endpoint of type alias to CloudFront that should appear in autocomplete, pick it. Create the record.
You should have now in route 53 , records with the following types:
A
NS
SOA
CNAME
A, if you repeat this last route 53 step for example www..com
A
NS
SOA
CNAME
A, if you repeat this last route 53 step for example www..com
Was this helpful or it can possibly be in the future for you? If yes, save it to your favourites.
Any questions, let me know!
Any questions, let me know!
34