Hosting a Static Website on AWS S3 and CloudFront with Free SSL

Advantages of S3 & CloudFront

The Cost of a Slow Website

We’ve all come across websites that load so painfully slow that our patience wears thin and we end up hitting the back button. It’s bad for us because we couldn’t get to the content we were expecting; it’s bad for the business owner because they just lost traffic and a potential conversion.

Speed It Up With Amazon’s S3 & CloudFront

1. Unlimited storage & fast server response. Since you’ll be running your website on a content delivery network (CDN) with edges all over the world, server response time should be top notch.  This includes both your assets (images, style sheets, etc) as well as your page’s html code.
2. No server overhead or maintenance. YES!!!  Nothing puts a damper on my day like having to deal with unexpected server admin issues that gobble up hours of time.  Since S3 is not a web server per se, you can forget about this issue.  (There is a caveat, but we’ll cover that in a bit.)
3. AWS’ S3/CloudFront comes with free SSL and virtually no security issues.  Not much else to say about that, other than, because it’s not a traditional web server, the only security issue is access to S3 buckets.  And these are easily locked down.

What About WordPress?

So, there is one caveat. This works only for static websites because S3 does not provide the capability to run any server side code, such as PHP, .net or Java. Therefore, if you are running a WordPress website, a web store or any other website that requires significant processing, you will not be able to take advantage of this without creating an external service or utilizing some sort of microservice. You will need to convert your site to a static one and  convert any user interaction components that require server processing – such as contact forms – to a different system. See the dynamic website functionality section for some ideas.

What We’re Doing Today

Today we will go over the process of setting up and hosting a website on Amazon’s S3. We will also utilize Amazon’s CloudFront CDN so that we can distribute html files and assets to multiple geographically diverse edge locations, which will result in much faster overall download times. To accomplish this, we will also employ Route 53 for DNS management and AWS Certificate Manager for SSL certificates.

For Your Convenience…

S3 buckets

www bucket

1. Create bucket to hold website files (www version of domain)
2. Configure bucket properties
3. Configure bucket permissions
4. Upload files

non-www (naked domain) bucket

5. Create bucket for 301 redirection (non-www version of the domain)
6. Configure 2nd bucket properties
7. Configure 2nd bucket permissions

SSL

8. Set up Route 53 DNS
9. Install SSL for naked domain
10. Install SSL for www domain

CloudFront

11. Create distribution for naked domain
12. Create distribution for www domain

Route 53

13. Set up “A” record for naked domain
14. Set up “A” record for www domain

Step 1: Setting Up S3 for Static Website Hosting

Create an Amazon S3 Bucket for the www domain

Create Bucket

1. In your AWS admin panel, go to “Services” -> “S3” -> “Create bucket”. 
2. Enter your bucket name, region and click “Next”. 
   NOTE: It’s important that you name your bucket exactly as your domain. So if in my case, I created a bucket named www.stage-threads.com.

   

3. Leave all options as they are for the next step, Properties and click “Next”.
4. In Step 2, Configure Options, uncheck the “Block all public access” option, check the box above to acknowledge that you will be allowing public access to the bucket, then click “Next”.  Since it’s a website, we definitely need the public to be able to access it.

   

5. Hit “Create Bucket”.

Properties Configuration

1. Navigate to your new S3 bucket, and click on the “Properties” tab.
2. Click on the “Static website hosting” card.
3. Select the “Use this bucket to host a website” option.
4. Enter index.html in the index document field and error.html into the error document field. Index.html Is the default page, just like a standard server setting. Error.html will be the 404 page.  Pretty easy, right?
5. Hit save.

Permissions Configuration

1. Click on the “Permissions” tab.
2. Click the “Access control list” button.
3. Select “everyone” under the “public access” section.
4. In the slide-out options, check the “read bucket permissions” under the “Access to this bucket’s ACL” section.
5. Hit save.
   
6. Click the “Bucket Policy” tab.
7. Paste the following JSON code into the ARN editor and save.  Change the “Resource” domain to your domain and hit Save.

   {
       "Version": "2008-10-17",
       "Id": "PolicyForPublicWebsiteContent",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "*"
               },
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::www.stage-threads.com/*"
           }
       ]
   }

   .

Upload Files

1. Click on the “Overview” tab.
2. Drag and drop all your website files on the “Upload” button, then hit the “Upload”” button in the popup.

Check it

Create an Amazon S3 Bucket for the naked domain

Create Bucket

1. Go to “Services” -> “S3” -> “Create bucket”.
2. Enter your bucket name and region.  NOTE: It’s important that you name your bucket exactly as your domain. So if in our case, we are creating a bucket for stage-threads.com.
   
3. The next steps are identical to the first bucket we created. Uncheck the “Block all public access” option and check the box to acknowledge that you will be allowing public access to the bucket.  Since it’s a website, we definitely need the public to be able to access it.
4. Hit “Create Bucket”.

Properties Configuration

1. Navigate to your new S3 bucket, and click on the “Properties” tab.
2. Click on the “Static website hosting”.
3. Select the “Redirect Request” option. NOTE:  This is different from the previous bucket setup.
4. Enter your www domain name in the “Target bucket or domain” field.  In my case, it’s www.stage-threads.com.
5. In the “Protocol” field, enter “https”.
6. Hit save.

Permissions Configuration

1. Click on the “Permissions” tab.
2. Click the “Access control list” button.
3. Select “everyone” under the “public access” section.
4. In the slide-out options, check the “read bucket permissions” under the “Access to this bucket’s ACL” section.
5. Hit save.
6. Click the “Bucket Policy” tab.
7. Paste the following JSON code into the ARN editor and save.  Change the “Resource” domain to your domain.  Notice how the “Resource” domain is different.

{
    "Version": "2008-10-17",
    "Id": "PolicyForPublicWebsiteContent",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::stage-threads.com/*"
        }
    ]
}

Step 2: Setting Up SSL for CloudFront

Now that we have the site running on the default AWS domain, we need to change this so that we can run it on our own domain.  In my case, I will run the main site on www.stage-threads.com and set up a 301 redirect for stage-threads.com to redirect to www.

To accomplish this, we’re going to put CloudFront in front S3 for better performance.  However, we’re first going to install the free AWS SSL certificates.  This is a recent requirement by Amazon.  If you’d like, you can read more about how AWS has made it mandatory that custom domain CloudFront distributions use https .

1. one for the naked domain, in my case stage-threads.com,
2. and a wildcard cert for all other subdomains, including www.

Install an SSL certificate for the naked domain

1. Go to “Services” -> “Certificate Manager” , then click the “Request a certificate” button.
2. Ensure that “Request a public certificate” is selected, then click the “Request a certificate” button in the lower right corner.
3. In the “Domain Name” field, enter your naked domain. In my case, I entered “stage-threads.com”.
4. Select “DNS validation” then click “Next”, followed by “Review”, then “Confirm and request”.
5. At this point, you should be at the “Validation” screen of the process.  Since we’re using Route 53 for our DNS management, simply click “Create record in Route 53”, followed by “Create”, then “Continue”.
6. You should now see your “Certificates” screen with the status for your new cert most likely in the “pending validation” status.

Create a wildcard AWS SSL Certificate for the www subdomain

1. Click the “Request a certificate” button again to create a new cert.
2. Ensure that “Request a public certificate” is selected, then click the “Request a certificate” button in the lower right corner.
3. In the “Domain Name” field, enter your domain with an asterisk (*) as the subdomain. In my case, I entered *.stage-threads.com. <---This is different from the previous cert.
4. Select “DNS validation” then click “Next”, followed by “Review”, then “Confirm and request”.
5. At this point, you should be at the “Validation” screen of the process.  Again, because we’re using Route 53, simply click “Create record in Route 53”, followed by “Create”, then “Continue”.
6. You should now see your “Certificates” screen with the status for your new cert most likely in the “pending validation” status.

Step 3: Setting Up CloudFront Distributions

1. One for the naked domain
2. One for the www subdomain

Create a CloudFront Distribution for the naked domain

1. Go to “Services” -> “CloudFront” to open up your AWS CloudFront panel.
2. Click “Create Distribution” followed by “Get Started” under the Web delivery method section.
3. In the “Origin Domain” field, select your S3 bucket, BUT…  and this is important  … you’ll need to change the S3 part of the domain to include your bucket domain INCLUDING the region .  For my bucket, it’s www.stage-threads.com.s3-website-us-east-1.amazonaws.com.  Here is an explanation why this is so.
4. In the “Default Cache Behavior Settings” section, select “Redirect HTTP to HTTPS” for the “Viewer Protocol Policy” field.
5. In the “Distribution Settings” section, type in your naked domain name into the “Alternate Domain Names (CNAMEs)” field.  In my case, I typed in staged-threads.com.
6. In the “SSL Certificate” section, select “Custom SSL Certificate”.
7. Click on the text field below the selection and select the certificate for naked domain
8. Click “Create Distribution”.

Create a CloudFront Distribution for the www domain

1. Go to “Services” -> “CloudFront” to open up your AWS CloudFront panel.
2. Click “Create Distribution” followed by “Get Started” under the Web delivery method section.
3. In the “Origin Domain” field, select your S3 bucket for the www bucket.  Again make sure that you use the website endpoint, which includes the region, not the API endpoint. More about this here.
4. In the “Default Cache Behavior Settings” section, select “Redirect HTTP to HTTPS” for the “Viewer Protocol Policy” field.
5. In the “Distribution Settings” section, type in you naked domain name into the “Alternate Domain Names (CNAMEs)” field.  In my case, I typed in www.staged-threads.com.
6. In the “SSL Certificate” section, select “Custom SSL Certificate”.
7. Click on the text field below the selection and select the certificate for wildcard (*) version of the domain
8. Click “Create Distribution”.

Step 4: Setting Up the DNS “A” Records

For the final step of this whole process, we’ll point the DNS “A” records to the CloudFront distributions.  In our case, we will run the main site on www.stage-threads.com and set up a 301 redirect for stage-threads.com to www.

Set up A record for www

1. Go to your AWS Route 53 panel and click on “Hosted Zones”.
2. Select your hosted zone for your domain.
3. If you already have an “A” record for the naked domain and/or a www “A” or CNAME, delete them by selecting them and choosing Delete from the Actions menu.
4. Click the “Create Record Set” button.
5. In the “name” field, enter www.
6. In the “Type” field, select A-ipv4 Address.
7. Select “yes” for “Alias”.
8. Click on the “Alias Target” field and under the “– CloudFront Distributions –” section, select your www distribution, then hit “Create”.

Set up A record for naked domain (non-www)

1. In the AWS Route 53 control panel, select your hosted zone.
2. Click the “Create Record Set” button.
3. In the “name” field, do not enter anything.
4. In the “Type” field, select A-ipv4 Address.
5. Select “yes” for “Alias”.
6. Click on the “Alias Target” field and under the “– CloudFront Distributions –” section, select your naked domain distribution for the and hit “Create”.

https://stage-threads.com should redirect to https://www.stage-threads.com
http://stage-threads.com should redirect to https://www.stage-threads.com
http://www.stage-threads.com should redirect to https://www.stage-threads.com

Website File Updates & Deletions

CloudFront Invalidation

1. Go to the AWS CloudFront distributions panel and click on your www distribution id from the list.  We only need to invalidate the www version.
2. Click on the “Invalidations Tab” , then click the “Create Invalidation” button.
3. In the “Object Paths” field, enter the files you want to to invalidate/refresh – one file per line.  You can use the asterisk (*) as a wild card. 
4. For example,
   •  Index.html invalidates your home page only
   • images/* invalidates everything in the images directory
   • *  invalidates all the files – the whole website

Dynamic Website Functionality

Embeddable Forms

1. You can offload all maintenance of the form processing and storage to a 3rd party
2. The data never hits your server so you don’t have to worry about sensitive information storage.

Media

Conclusion