Hosting a secure static website on AWS

While it is easy to host a static website using AWS, it is a little challenging to get the green secure icon that tells your visitor that your site is protected and secure

If you are thinking why secure a website?

1. Your Google Ranking Will Improve With an SSL Secure Website
2. An SSL Secure Website Protects Sensitive Information from Prying Eyes
3. Chrome now hits the user with a warning and won’t load your site if no valid SSL certificate is found on pages where sensitive information is requested. Firefox and other browsers are following suit, and Google has already sent out a proposal for all web browsers to implement this policy.

So, in this article, we are going to address the procedure for hosting a secure static website on Amazon Simple Storage Service (S3) using Amazon Web Services (AWS).

Before we jump into the procedure and technicalities of it, let’s first understand why we are doing this. More specifically, why AWS? It’s because of the following reasons:

• They offer storage for an unlimited amount of files with a ‘Pay-for-what-you-use’ utility.
• Their services offer high performance, scalability, elasticity, and security.
• It is one of the easiest to use services.

Now, with that out of the way, the prerequisites for following this procedure are

1. An AWS account,
2. A domain name hosted with AWS

Now let’s get started!

Step 1: Creating an S3 bucket and configuring it to host a static website

• Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
• Choose “Create bucket”.

• Enter a bucket name. It needs to be called the same as your domain without the ‘www’. For eg: bansalnagesh.com.
• For “Region”, choose the AWS Region where you want the bucket to reside. Choose a Region close to your target users to minimize latency and costs.
• Choose next till you reach the “Set Permissions” tab.
• On the “Set permissions” page, change manage public permissions to “Grant public read access to this bucket”.
• Choose next, “Review” your selections and then choose “Finish”.
• To host this bucket as a website, click into your new bucket.
• Upload your website files.
• Open the bucket “Properties” pane, choose “Static Website Hosting”.

• Choose “Use this bucket to host a website”.
• In the “Index Document” box, type the name of your index document.
• Choose “Save” to save the website configuration.
• Next, set a bucket policy to enable public access to all the objects in this bucket. Click the “Permissions” tab then select “Bucket Policy”. Paste the following policy document in the text area, replacing ‘{NAGESH}’ with the name of your bucket.

{

“Version”: “2012–10–17”,

“Statement”: [

  {

     “Sid”: “PublicReadGetObject”,

     “Effect”: “Allow”,

     “Principal”: “*”,

     “Action”: “s3:GetObject”,

     “Resource”: “arn:aws:s3:::{NAGESH}/*”

  }

 ]

}

You should now be able to access your website at the link provided on your screen. This is the Amazon S3-provided website endpoint for your bucket. It will look something like
http://yourbucketname.s3-website.eu-west-2.amazonaws.com.

Next, let us get a certificate for your website

Step 2: Requesting a Public Certificate Using AWS Certificate Manager (ACM)

• Sign in to the AWS Management Console and open the ACM console at https://console.aws.amazon.com/acm/home.
• Choose “Request a certificate”.

• On the “Request a certificate” page, choose “Request a public certificate and Request a certificate” to continue.
• On the “Add domain names” page, type your domain name. Enter both the www and non-www versions. For example, www.bansalnagesh.com and bansalnagesh.com. This ensures that whichever URL a user goes to, a valid certificate will be presented.
• On the “Select validation method” page, choose either “DNS validation” or “Email validation”, depending on your needs. Choose next.

• If the “Review” page contains correct information about your request, choose “Confirm and request”. A confirmation page shows that your request is being processed and certificate domains are being validated.
• Choose “Continue”.

Certificates awaiting validation will be in the “Pending” validation state and might take some time before they are issued. Once the certificate is issued, we are ready to create a distribution and secure our website.

Step 3: Create a CloudFront web distribution

• Sign in to the AWS Management Console and open the CloudFront console at https://console.aws.amazon.com/cloudfront/.
• Choose “Create Distribution”.
• On the first page of the “Create Distribution Wizard” in the “Web” section, choose “Get Started”.
• Choose the “Origin Domain Name” field and select your S3 website URL from the dropdown.

• Under the “Viewer Protocol Policy”, select “Redirect HTTP to HTTPS”.
• Go to “Price Class” and pick the option most appropriate to you. The more restrictive the price class, the cheaper the distribution. For example, if you select “Use only US, Canada, and Europe”, users will still be able to access your site from across the globe but it will be slower for users in Australia.
• In the “Alternate Domain Names (CNAMEs)” text area, enter the domains which you will be hosting on this distribution, for example, www.bansalnagesh.com and bansalnagesh.com.
• Select “Custom SSL Certificate” and in the dropdown select the certificate that you created in Step 2.
• In the “Default root object” field, enter the name of your homepage HTML file, i.e. index.html.
• Choose “Create Distribution”.

After CloudFront creates your distribution, the value of the Status column for your distribution will change from “InProgress” to “Deployed”.

Step 4: Updating the DNS records

• Update the DNS records for your domain to point your website’s CNAME to your CloudFront distribution’s domain name.
• You can find your distribution’s domain name in the “CloudFront console” in a format that’s similar to d1234abcd.cloudfront.net.
• Wait for your DNS changes to propagate and for the previous DNS entries to expire.

After a few minutes, you’ll be able to navigate to your new domain and see your website being served using HTTPS.

And just like that, your secure static website is ready for the world to see.