Part 2: SSL on New AWS Host

In my last post, Moving to AWS, I explained how I went about moving this site from Gitlab to utilizing AWS. The only thing that I hadn’t finished was making sure it is served over SSL. Now on the heels of Chrome build version 68, which will now mark all sites as “Not Secure” if not served over SSL, I figured it was time to fix it correctly.

Putting back on the DevOps hat

Luckily, again, AWS makes it super simple to setup SSL; just a matter of figuring out the correct paths on how to make things work. Most of my investigation on how to handle this came from a very straight forward post when I got bogged down in some of the settings.

The SSL certificate

I had bought a certificate through Namecheap.com which I have registered all my domains through. This was prior to knowing that AWS actually provides a free certificate through their CloudFront/Certificate Manager service. I actually suggest doing this route, not only because it is free, but also you do not have to go through the steps of generating the PEM-encoded items needed.

  1. Request a public certificate. The private certificate is handled through your organization if you have one.
  2. Add all the domain names that need to be handled by the certificate. This includes example.com and www.example.com and any sub-domains.
  3. Select your validation method. If already using AWS Route 53, select the DNS validation, as this allows you to just add the A and CNAMEs for validation. You can choose the email validation, but you will need certain email addresses setup already for your domain.
  4. In Route 53, add the CNAMEs provided by the certificate validator for each of the domains you added. This will finalize the validation process.

Once the certificate is validated for the domains you added, you can move on to hooking the certificate up to your actual website.

Routing through CloudFront

CloudFront is AWS cache distribution network. It is a great service that boils down to fast delivery of your website. Of course, you could continue to serve it through the S3 bucket setup, but you do not get the cache mechanism, nor is it easy to hook an SSL certificate to. Setting up your own distribution is pretty straight forward, but do pay attention to the correct settings needed.

  1. Create a new distribution through CloudFront and choose the web option
  2. Add the correct options for the distribution replacing example.com with your own domain
    • Origin domain name: example.com.s3-website-us-REGION-1.amazonaws.com do not select the bucket name here, instead use the url to the bucket you intend to point to. This will allow it to cache interior pages correctly and not block do to REST.
    • Origin ID: S3-example.com
    • Viewer Protocol Policy: Redirect HTTP to HTTPS select this option to make sure that all visitors end up in HTTPS
    • SSL Certificate: If you have an installed/approved certificate from steps above, choose Custom SSL Certificate and in the text box provide, that certificate should show up to select.
  3. Click Create Distribution to start the caching of your bucket on CloudFront

This will now kick off the distribution process. Depending on how big your bucket is and how many regions it needs to go to, it could take a couple of minutes. The listing page of your distributions will show the progress state that it is in.

Pointing to your distribution

With the CloudFront distribution created, it is now time to point your domain to it and no longer your S3 bucket. Since your CloudFront distribution is set to use the certificate that was created, all that needs to be done is change your CNAMEs.

  1. Copy the domain name provided to you in CloudFront for your distribution. It looks something like: df425ad35a.cloudfront.net
  2. In Route 53, adjust the A and the CNAME records for your domain with the CloudFront domain in the alias target text input.
  3. Save these settings and wait for the DNS to propagate.

Now everything is secure

If all these steps are followed, your site is now secure! No longer do you have to worry about Chrome or any other browser telling you otherwise.

Filed under: Code
bubbles Created with Sketch. CS Icon Created with Sketch.