Hosting websites in Amazon - Setting up URLs and certificates

Developing an application is the part that takes all the interest from any developer; I mean, the name kind of implies that right?. However, a complete development process does not finish when the team write the last line of code, we still have to make the deployment.

During most of the process, we can use simpler configurations. For example, we can use the default links provided when we host in a S3 bucket, if we are using an EC2 instance we can use the direct IP, or even use a load balancer that points to a set of Docker instances. However, in all of these cases, the URLs are not friendly since they are autogenerated by Amazon.

This post will explain how to do a proper deployment of an application for a production-level environment. For this, we will use the following technologies:

  1. S3 bucket: where the application code will be hosted. We won’t run through this during this post, but you can check my Amplify posts to see how to do it.

  2. Cloudfront: Content delivery network service

  3. Route53: domain registration service

  4. Certificate Manager: SSL certificates provider

Requesting the certificate

As a prerequisite for this part, we will need to create a hosted zone in Route 53 where the certificate will be associated. For that, go to the Route 53 service, in the left menu select hosted zones, and create one if you don’t have already.

Route 53 - hosted zone

The first step that we will cover is requesting the SSL certificate. For this, we will go to the Certificate Manager service in Amazon and click on “Request a Certificate” and select a public certificate.

Certificate - Step 1

The next step will ask us to register all the domain names that we want the certificate to be used for.

Certificate - step 2

Important: we can use a wildcard to use multiple subdomains. For example, you can type *.mydomain.com, and it will cover cases like admin.mydomain.com.

After setting the domain names, it will ask us to select the verification method of the certificate. Since we are going to use only Amazon services, let’s select DNS validation.

Certificate - step 3

Finally, we will review all the selections and continue with the wizard. After the request has been created, we need to validate and create the domain for the certificate in Route 53, however, this is an automated step that the Certificate Manager can do.

Certificate - step 4

In the dashboard for the certificate manager, you will see the certificate that you just created, and inside of it, it will prompt you to create the DNS records in Route 53.

Certificate - step 5

Creating the Cloudfront distribution

Now that we have our certificate set up and ready to be used, we need to create the cloud front distribution that will point to our S3 bucket. For that, we will go to the Cloud front service dashboard and click on “Create distribution”.

For our use case, we will select “Web” as the delivery method (this is the first screen that will show). From there, we will be presented a big form with a lot of options, but for most of them we will leave the default values except in 3 specific areas.

First, we need to select the S3 bucket where the application is hosted as the “Origin Domain Name” (this field is a dropdown, even though it doesn’t look like it).

Cloudfront - step 1

The second change that we will make to the form is under the “Default Cache Behavior Settings” section. In there, we will select “Redirect HTTP to HTTPS” in the viewer protocol policy option. This will automatically redirect the user to the HTTPS site, even if they don’t specify it in the address bar.

Cloudfront - step 2

Finally, under the “Distribution Settings” section, we will select the certificate created previously.

Cloudfront - step 3

After all of that, click on “Create Distribution" button at the end of the screen and wait some time while Amazon provision all the resources for it.

Important: when you are using React or Angular applications, we need to set the default root object to be the index.html file. For that, in the same form, a couple of fields after selecting the certificate, it can be specified. If you didn’t set it up the first time, you can modify the distribution after its creation.

Create the actual URL

Previously, we used briefly Route53 to validate the certificate request, however this time we will create the real URL that our application will use. So, we go to the Route53 service in amazon and in the left bar menu click on Hosted zones.

From the hosted zone that you created before, we will add a new record set. If all the previous steps were executed successfully, there should already be one record set for the SSL certificate.

In the new record set, we will type the name of the URL that we want to use, for example: admin.mydomain.com, set the record set to be an alias and from the input that will appear, select the cloudfront distribution created earlier.

Route 53 - record set

After finishing creating it, we will need to wait some time while Amazon register the domain in the DNS servers and propagates the changes. Shortly after, you will be able to use your new URL to access your website.

Bonus track: what about APIs?

As a small tip, if you want to do this for an API that is being hosted in ECS or Beanstalk, instead of creating a Cloudfront distribution, you can create the record set in Route 53 directly and point to the load balancer that is associated to those instances. The first two steps are still required, :)

Summary

Now that all sections have been covered, I hope that your application has been deployed successfully, and your customers will be happy by having a pretty URL that is easy to remember (hopefully). If you have any comment, don't hesitate in contacting me or leaving a comment below. And remember to follow me on twitter to get updated on every new post.