PhillipBlanton.com

"Save me, oh God, from people who have no sense of humor."
— Ludlow Porch

Deploying a website to AWS CloudFront with SSL/TLS and AutoRedirect to https.

Today I deployed a website I'm working on, to AWS CloudFront and enabled SSL/TLS using a free Amazon certificate with a correctly configured https redirect. To see it in action, hit these links...

You shouldn't be able to view anything on http. All insecure requests should automatically redirect to https. Examining the certificate will reveal that it is a valid Amazon SSL cert.

The site is running server-less using Amazon S3 and CloudFront. It should be a very cost-effective way to deploy a simple business website that may need to scale, without purchasing hardware and infrastructure and the associated costs.

If you want to use Node.js and Lambda, start with a simple HTML/Javascript site configured as follows, then add in the Lambda/Node.js functionality. I'm a big fan of accomplishing complex tasks in baby steps. For now the site is pure Javascript/HTML so there is no overly complex Lambda configuration involved. Let me show you how I did it. I presume you have a Javascript/HTML web application and a registered domain name to point to it. The domain name I used, "gort.co" is registered with GoDaddy, so I'll cover switching the DNS from GoDaddy over to AWS Route 53 while leaving the name registered with GoDaddy; but if you're getting a new domain, you can register it with AWS Route 53 to simplify things if you wish. I also like NameCheap.com

If I've made any mistakes or important omissions, please comment below and I'll fix it.

Configuring your AWS S3 Bucket:

Log in to your Amazon AWS Console. If you don't have an Amazon account (dude, really?), you can create one and then sign up for the AWS Free Tier. You'll get basic services for free for one year. Read about it here. The free tier gives you up to 5GB of S3 storage which should be plenty for your website.

In the AWS Console...

  • Select the [Services V] button in the top-left corner.

  • Under the Storage section, select "S3"

  • In the S3 console, select [Create Bucket]
  • Give the new bucket a name (no dots and no capitalized characters) and save.
  • Click on the new bucket, select the Options tab and click the [Upload] button.
  • Drag your website files onto the Upload dialog and click [Upload].
  • After the files have finished uploading, back in the bucket details window, select the Properties tab. Click "Static Web Hosting" and configure it as follows...
    • Select "Use this bucket to host a website"
    • Configure the Index Document and Error Document to point to the respective documents. Mine is configured like this...

  • At the top of the Static Website Hosting window is a link to the endpoint.

    Copy that into your paste buffer, then click Save.
  • You should have a website up and running at the endpoint mentioned above. Browse to it to make sure it works. If not, fix any issues with your web files so that the site runs.

Configuring CloudFront:

In order to support SSL/TLS and our custom domain, we need to use CloudFront. There are ways to configure a custom domain with just the S3 bucket, but CloudFront makes it easy to configure it all with Route53 and an Amazon-issued SSL/TLS cert, so we'll use that.

  • In the AWS Console, select "Services V" again, and this time click on CloudFront, under Networking & Content Delivery.

  • If you already have a distribution created for your new S3 bucket, then click on the distribution's ID. If you don't have one, then click on [Create Distribution] and [Get Started] under "Web".

  • Under Origin Domain Name, type in the S3 bucket's endpoint URL (minus the http:// part).

  • Under Default Cache Behavior Settings, leave everything set to default values.
  • Under Distribution Settings | Alternate Domain Names, enter your domain name(s). I wanted mine to work with the naked version as well as the "www" sub, so I set it like this.

  • Under Distribution Settings | SSL Certificate, choose "Custom SSL Certificate" and click the button [Request or Import a Certificate with ACM].
  • In the SSL Cert Request form, be sure to add the naked form of your domain name (without the "www") if you want users to be able to hit your site securely without any sub-domain. Here's how I configured mine...

  • Click [Review and Request] and follow the steps to get the cert approved and issued.
    • An email will be sent to the domain name owner of record. You (or that person) will need to approve the request in each email in order to get an SSL cert issued.
    • If you get multiple emails, then you will need to approve each one before the cert will be issued.
  • Back to the Create Distribution dialog, under Custom SSL Client Support, be sure NOT to select "All Clients" unless you absolutely need to serve clients using IE on Windows XP, or anyone on a very old version of Android on old hardware, and are willing to spend $600 per MONTH for the privilege.

  • Under Default Root Object, enter your default document. Mine is "index.html".
  • Enter a comment for the CloudFront entry under Comment.
  • Accept the rest of the defaults and click the [Create Distribution] button.

Configuring auto http to https redirect:

Now we'll configure the auto-redirect from http to https.

  • In your CloudFront distribution list, click on the new distribution for your website.
  • Click the "Behaviors" tab.
  • You should already have a behavior for the Default (*) pattern. Select it by clicking the check box on the left, and click the [Edit] button.
  • Under the Viewer Protocol Policy, select Redirect HTTP to HTTPS...

  • Leave the rest of the settings alone, scroll to the bottom and select [Yes, Edit].

Lets test it before we move on to configuring the domain name under Route 53...

On the General tab, under the CloudFront Distribution for your website, copy the value of "Domain Name" into your paste buffer.

Try navigating to it. You should be able to hit it at both http and https, but when you hit the http version, it will auto-redirect to https for you. If that all works, then you're ready to configure Route 53.

Configuring your domain name with Route 53.

My domain name (gort.co) is registered with GoDaddy so this tutorial will be configuring the Gort's DNS to use Amazon's Route 53 servers instead of GoDaddy's and configuring the Route 53 DNS for my CloudFront site.

  • Go to the AWS Console, and select "Services V" again. This time, under Networking & Content Delivery, select "Route 53".

  • In the Route 53 console (you might have to "Get Started") Go into Hosted Zones and click the [Create Hosted Zone] button. Fill out the "Create Hosted Zone" dialog as follows...

  • Create the following record sets...

    The A and AAAA records are aliases that point to the CloudFront domain you tested before setting up the DNS.
  • Make a note of your name servers, and go log into GoDaddy's client console.

I'm getting an error on GoDaddy's console right now. Apparently they're having issues and I can't use their DNS management system at this time. I'll come back and edit this to show the steps later, but for now suffice to say you need to edit your GoDaddy DNS to use custom name-servers, then add in each of the nameservers specified under NS above. Be sure to use yours, not the ones assigned to me in the image above.

Give it a few minutes for GoDaddy's DNS and the new Route 53 DNS settings to propagate before testing it. If it doesn't seem like it's propagating fast enough, you can flush the DNS cache on your machine in order to force the issue. These commands will flush your system's DNS cache, forcing it to query the DNS system for the latest information on the requested domain name. Depending on the DNS Servers your system is using, this may force DNS propagation to happen faster.

Windows:
At a windows command prompt, type
    ipconfig -flushdns
then restart your browser.

Linux:
There are a number of different ways to skin a penguin, depending on the version/distribution you're using. Try one of these...
    # sudo /etc/init.d/named restart
or
   # sudo rndc restart
or
   # sudo rndc exec

Apple:
At a command terminal, type
    sudo dscacheutil -flushcache
then restart your browser.