Setting up a Domain and SSL Certificate for Static Website, Part 2 of 2

Setting up a Domain and SSL Certificate for Static Website, Part 2 of 2

Do you want your website to be easily accessible from across the world, with minimal cost and minimal latency on a CDN? Do you want to make your website “secure” without having to blow off many precious dollars on SSL certificates? Do you want to get your own personal domain and DNS for just a few bucks a year? Well then, this article is for you. If you haven’t developed and provisioned your website already, please read the previous article that explains how to design and host a static website using an S3 bucket. If you followed the previous article or already have an existing website architecture, keep on reading to find out how to use AWS services to make your website more accessible and more secure for the public by means of establishing a domain with a nameserver, reducing latency with a CDN network, and securing it with SSL certificates.

CDN, SSL, DNS, Wait What?

If you are glancing at the introduction and these words stand out to you like aliens from an outer galaxy, you might want to read this section. Let’s start with CDN. CDN stands for content delivery network. A CDN provider has many servers around the world that cache data from a specified instance/service. This allows users to access your website from the nearby CDN server rather than the faraway server that the website owner provisioned, which substantially decreases load time. For example, if you have a website hosted on a virtual server instance in Europe, but want to access the website from the U.S. with minimal latency, you would want to set up a CDN Network to allow fast access to the same website all across the world. Now, let’s tackle the acronym SSL. SSL stands for Secure Sockets Layer. It’s a protocol that securely sends information over the internet by means of cryptography during data transfer. An SSL certificate gives your website the ability to run on https(hypertext transfer protocol secure) instead of just http(hypertext transfer protocol). You may hear the terms SSL and TLS used interchangeably, and just know that TLS(Transport Layer Security) is the more secure version of SSL; TLS can be used to transfer highly confidential information such as credit card information securely through the jungle of the internet. Even if your website is completely static and doesn’t have anything that calls for data transfer over the internet, it is still recommended that an SSL certificate is present for the website, for search engines such as google only show websites that are “secure” in the top 3 results. If your website has login pages, forms, or even eCommerce, you definitely need an SSL certificate so that information is transferred safely. Lastly, DNS stands for Domain Name System. For starters, one should not confuse DNS hosting with a domain registrar. A domain registrar is the service that allows you to secure a domain name, but the registrar might not provide you with the tools to effectively route your domain to your server/service. DNS is the service that routes your domain to your website by means of using different types of record sets(we’ll get to this terminology in a little bit), and for this lecture, we will be using a DNS provider to configure our domains. To put it in an analogy, DNS records tell what IP address to route the domain to like tax records and other important documents show where your house address is. So now that we got this terminology clear, we can move on to discussing what services we will be using for this technical tutorial. 

AWS Services Used:

Unlike the last tutorial, where only one AWS service, S3, was used, this tutorial will have a few more services used to set up a DNS for your domain, a CDN to deliver your website all over the world with minimal latency, and a SSL certificate manager to make your website secure. So, without further ado, here are the additional AWS services used with S3:

Route 53- Route 53 is AWS’s DNS provider. It allows you not only to register your domain, but it also allows you to change the record sets of the domain’s hosted zone, which allows the domain to effectively route the end user to your website. Even though Route 53 domains usually never come for discounts, it is better to register, or if you already bought your domain, transfer it to Route 53 because it allows better compatibility with the other AWS services.

CloudFront- CloudFront is the CDN service we will be using for this tutorial. Even though it is not as powerful or as well-known as some CDN networks such as Akamai and Limelight, it is still very highly available. When using CloudFront, the website’s content is cached in AWS’s vast network of Edge Locations around the world. As an added bonus, CloudFront allows the user to easily add their SSL certificate with just a few clicks of a button. 

AWS Certificate Manager- Most people think that to secure an SSL certificate, they must blow a lot of money to gain the trust of their users. GoDaddy’s SSL certificate cost starts at 63 dollars a year, and goes as high as 300 dollars a year for a wildcard certificate(a SSL certificate that secures a domain and all the subdomains under it). On the contrary, AWS offers public, wildcard, easy-to-configure SSL certificates for free. These certificates are perfect for securing a static website such as the one we made in the previous tutorial.

Prerequisites:

So now that you know the services we are using for this tutorial, we can start provisioning these resources to make our static website fully secure and accessible. But before we start getting our hands dirty, be sure that you have these prerequisites and skills at hand:

  • An AWS Account with billing and credit cards set up (If you don’t have one yet, click here to learn how to make a free tier account and operate the AWS Console).
  • A functional, static website hosted on S3 (If you haven’t done this yet, click here to learn how to host a website on S3).

Part 1: Registering a Domain

As I’ve mentioned previously in this article, we will be using Route 53 as the domain registrar  and DNS in this tutorial. If you want to transfer your already existing domain to Route 53, please follow this article by AWS. The first step in this tutorial is to login to AWS and navigate to the Route 53 console. Here is an image on how your screen should look like:

Note: If you are new to Route 53, the hosted zones number under the DNS Management header should be 0.

Now, under the “Register Domain” search box, type in your website’s potential domain name without the domain ending. To change the ending, click on the dropdown next to the search box and find your domain. Click the “check” button to see if your domain name is available.While you are searching for your perfect domain name, keep in mind of these aspects:

  • If your website is meant for developing an online presence for your organization, it is best if your domain name is the same as your organization name. For commercial organizations, use the .com ending. For non-profits, use the .org ending.
  • If your website is meant for marketing a cause, app, etc., your domain name should be the same as your app/cause.
  • For personal online portfolios, your domain name should be something that could be related to your actual name. If your full name is long, DO NOT make your website domain your full name. Instead, make a part of your full name abbreviated, but do not just make your domain your initials.
  • For more help on finding the perfect domain name, click here for more tips. 

Now, once you have found an awesome domain to match your awesome site, click on the “Add to Cart” button, edit the number of years you want to register the domain for, and click on the “Continue” button on the bottom. Your screen should look like this before hitting the “Continue” button:

After you hit the continue button, enter or verify your contact information on the next page. Then, click “Continue”. The third page asks you to verify your information and also if you want to renew your domain automatically. After you complete the order, you will receive a verification email from Route 53 to confirm your contact info and the fact that you are the one who registered the domain. Now, it will take some time for the name servers for the domain to be set up, so for the time being, just sit back and relax.

Once the domain is fully set up, go to the “Hosted Zones” page. Right now, there should be two records set with the types NS and SOA. These records stand for name server and start of authority, respectively. DO NOT TAMPER WITH THESE RECORD SETS. If you do, your domain might break, and you have to go through the painful process of contacting AWS support and possibly buying a new domain. Note the location of these record sets, because you will need to come back to these later in the tutorial.

Part 2: Requesting an SSL Certificate

Next, you will use AWS Certificate Manager to register a free public wildcard SSL certificate for your domain. To start, navigate to the AWS Certificate Manager from the AWS Console. Here’s where you should be:

Note: I have registered a certificate prior to this tutorial, but again, if you are new to ACM(AWS Certificate Manager), you should currently have no certificates registered. To start, click the “Request a certificate” button. Then, the first page should by default select the “Request a public certificate” option. Click on the blue “Request a certificate” button on the bottom of your page. After you click on the button, you should land on the “Add domains” page. On this page, click on the text box and type your domain name and domain ending, omitting the “www.”. Then, click on “add another name to this certificate”, and type in an “*.”, then type in your domain name and ending. Here is an example:

Then, click “Next”. For the validation method, choose “Email Verification”. DNS verification requires setting up text records in your Route 53 Hosted Zone, which is a tricky task and could result in some failures. Email Verification is much easier; you just have to click on a link, and bam! Your SSL certificate is verified. Click next, and at your wish, create a few tags to help identify your certificate. Review your information and validate your SSL certificate on page 5. An email will have been sent to you, so click on the link in the email to finish provisioning your SSL certificate.

Part 3: Setting Up CloudFront Distribution

As I stated before, a CloudFront distribution allows you(as a developer) to cache your website data in the Edge Locations. To start off, navigate to the CloudFront console. Your screen should look like this (again, if you are new to CloudFront, you should have no distributions):

Note: Some information is blacked out because CloudFront distribution information is confidential.

Click on the “Create Distribution” button. For the origin domain name, click on the textbox and specify the s3 bucket domain hosting name (S3 buckets should come as a dropdown). This routes the CloudFront traffic to your S3 bucket. In the end, we are going to route the domain traffic to CloudFront, essentially making a functioning, secure, and domain-accessible website. Under the default cache behavior settings, for viewer protocol policy, select the option “Redirect HTTP to HTTPS”. This allows the users who access your website to automatically be redirected to the secure version without having to type the long “https://mywebsite.com”. Instead, all the user has to type is “mywebsite.com”. Then, scroll all the way down to the distribution settings category. For the “Alternate domain names,” type in your domain without the www. and your domain with the www. For SSL certificate, click on “Custom SSL Certificate” and type your domain name in the textbox. The SSL certificate should pop up. After installing the SSL certificate into the distribution, do not change anything else and create your CloudFront distribution. Here are some images for reference:

Part 4: Putting it All Together

Now that you have provisioned all your resources, it is time to attach all the blocks together. Right now, our CloudFront distribution, with an SSL Certificate installed, is routing the traffic to the S3 bucket. Now, the last step is to use Route 53 to direct the traffic to the CloudFront distribution, so your users can access your website by just typing in the domain name. To start, go to the Route 53 console home and navigate to your domain’s hosted zone page. When you click on your domain’s hosted zone page, you should see two record sets with types NS and SOA. As I mentioned previously, DO NOT EDIT THESE TWO RECORD SETS. To route our domain to the CloudFront distribution, click on “Create Record Set” and make the type “A-IPv4 address”. Then, for the Alias option, select “Yes” and enter your CloudFront distribution url (it should automatically pop up when you click on the textbox).  Then, do not change any other settings and create the record set. This record set tells Route 53 to direct any non-www traffic from your website to the CloudFront distribution. But now, we need to create a path for www traffic to be routed to your website. To do this, create a new record set and, except for the name, configure it the same way as you did for the previous record set. For the name, type a www before your domain name and click “Create”. Here are some sample record sets for your reference:

And that’s all! This blog covered how to set up a CDN distribution, secure an SSL certificate, register a domain, and how to route domain traffic to an endpoint. Try accessing your website from your domain name; it should work. I hope that you gained some valuable information during this technical tutorial. In this digital age, it is important for one to expand their online presence, and effectively creating, deploying, and hosting a website is a vital component for making room for yourself in the vast internet.

1

Footnotes

  1. Featured image credit to medium.com
Ravi Tej Guntuku

Ravi Tej Guntuku

Hello! My name is Ravi Tej Guntuku, and I am a student at Lake Travis High School. This blog showcases some of my views and interests in the fields of Math, Philosophy, Technology, Creative Writing, and more. By reading these articles, I hope that you can learn a bit more about me and the world around us! That's all for now!

Leave a Reply

Your email address will not be published.

%d bloggers like this: