spa Home Products Services Blog Contact menu

Setting up a secure, static Website using Amazon S3 and CloudFront

Posted on November 13, 2018

Creating a secure Website is essential for any business. If you happen to be a software business or are tech savvy, you are probably looking for a cost-effective way of creating a static Website and maintaining it yourself. This blog post shows you how to achieve this using three Amazon services: S3 (Cloud storage), CloudFront (CDN), and AWS Certificate Manager (ACM).

Prerequisites

This article assumes that you have already created an account on Amazon AWS. If not, please visit https://aws.amazon.com and create an account for yourself.

Setting up Website Files on S3

Log into your account on AWS and go to S3 service. Click on the "Create Bucket" button to start creation of a bucket for your Website files. Enter the domain of your website as the bucket name on the first screen. For example, the name of the bucket for Nabh's Website is www.nabh.com. Enter next and accept defaults on the next screen. Choose to make your bucket public on the Set Permissions screen as shown in the figure below.

When you finish creating the bucket, S3 home page will list the newly created bucket. Click on the bucket link and create a folder hierarchy that represents the structure of your Website using click "Create Folder" button. Upload your site html, css, Javascript, images, and other files in appropriate folders. Make sure that every folder and file is viewable by public, otherwise CloudFront will not be able to serve those files to the public.

After creating folders and uploading files, come back to the S3 home screen and click on the bucket. On the bucket page, click on Properties tab and click on Static website hosting card. Choose the Use this bucket to host a website> option. Enter index.html in the Index document field, optionally enter the HTML file name for showing page not found errors in Error document field.

You can now test your Website by typing the Endpoint URL shown on the top of the dialog box. Note that the URL in the picture below is for Nabh's Website, the URL will be something different in your case.

Creating SSL Certificate

You will need a SSL certificate for your domain in order to serve the Website securely, i.e. over https protocol. You can create one using Amazon Certificate Manager. Go the Certificate Manager service from the AWS console. Make sure to choose US East (N. Virginia) region. You can select the region using the region dropdown on the top right. Don't ask us why but you must select this region in order for you to use the certificate for your Website.

Click on Request a certificate button to start the certificate generation process. Choose Request a public certificate option. Enter your domain name on the next screen. If you want to use the same certificate on multiple subdomains on your Website, click on Add another name to this certificate button and provide additional domains (e.g. yourdomain.com, dev.yourdomain.com, etc.)

Choose DNS validation option on the Select validation method. We prefer this option since the certificate does not require manual renewal. Choosing this option will require you to create a CNAME record for your domain as shown on the screen below. As long as the CNAME records exist, your certificate will be automatically renewed.

Method of creating a CNAME record will vary depending on your domain registrar. Please check their documentation for the relevant details. Also you may have to be a little patient to see your certificate in action. It will take some time to see the process completed status on the Certificate Manager page. We also had to wait a couple of hours to be able to select the certificate when we set up the CloudFront distribution.

Creating a CloudFront Distribution

In this step you will be creating a CDN distribution that points to the files uploaded on S3. You can start creating a distribution by clicking on the "Create Distribution" button. You want to create a Web distribution, so click on the Get Started button in that section. You will see a form that has a lot of input fields but you can accept the defaults except the following fields:

  • Origin domain name - Do NOT select the S3 origin value from the drop down. Type in the S3 Web URL in this field.
  • Origin ID Provide a unique ID, e.g. s3-yourdomain.com
  • Price class - You can take the default ro choose regions where the most traffic is expected
  • Alternate domain name - Enter your Website domain name here, e.g. www.yourdomain.com
  • Default root object - This would be index.html for almost everyone
  • SSL certificate - Choose Custom SSL certificate. This field will show a dropdown and that should list the certificate you created in earlier step.

The reason for selecting a custom origin, as opposed to S3 origin from the dropdown, is that it will return index.html file in a sub-folder when the user requests a folder. For example, you may have an index.html file that lists your products in products folder. When a user types in https://www.yourdomain.com/products, the user will see an error message if you point your distribution to S3 origin. If you use the Web origin, it will return the index.html file as expected.

At this point you are done with all your setup on AWS. You should see your distribution listed on CloudFront home screen as shown in the snapshot below. If the status is Completed, you can type the URL shown in the Domain name column in your browser and should be able to see your Website.

Pointing Your Custom Domain to CloudFront

In the last step you could access your Website via CloudFront URL but off course that is not the final result you want. You want to view your Website on your custom domain. This requires creating a CNAME record that points the custom domain to the CloudFront domain. This step will vary depending on your domain registrar. The snapshot below shows how we set it up for our Website. It requires providing the CloudFront domain name as the value of the CNAME field. Note that your registrant may require you to append a . to the domain name.

Wrapping It Up

By now you should be all set to serve your secure Website on your custom domain. We want to bring a few points in this final section. The first one is making your Website accessible via the root domain, e.g. yourdomain.com, as well as www.yourdomain.com. There are a few different ways of doing this. Our preference is to set up a redirection with your DNS provider from the root domain to www subdomain. You can also do this using CloudFront and S3, we will leave that as an exercise for the reader.

When you create a certificate, you can optionally include other subdomains. This will allow you to use the same certificate on a different Website that corresponds to those subdomains.

When you update files on S3, you will have to invalidate those paths on CloudFront if you want to immediately see the new pages in your browser. Here we are assuming the caching period in CloudFront is reasonably long. CloudFront allows you invalidate selected paths using the console. It is also important to make sure you keep all files and folders publicly accessible when you update the content.