Host a static website on Amazon S3 using CloudFront without turning Block public access off

This article will help you how to host a static website on Amazon S3 without turning Block public access off. We will be using four AWS services:

• Route 53 — to route end users to your site with DNS
• S3 — to store site data
• CloudFront — to securely deliver content
• Certificate Manager(ACM) — to SSL/TLS certificates for secure https

Step-1: Setup Hosted zone

In order to set up a hosted zone, you need to purchase your domain first which could be purchased from route 53 or if you purchase your domain anywhere else that’s fine too.

A hosted zone is a container for records, and records contain information about how you want to route traffic for a specific domain, such as example.com, and its subdomains (acme.example.com, zenith.example.com)

There are two types of hosted zones i.e Public hosted zone and Private hosted zone.

Here you need a zone that can specify how you want to route traffic on the internet which is Public hosted zone. You can get a public hosted zone in one of two ways:

• When you register a domain with Route 53, AWS creates a hosted zone for you automatically.
• When you transfer DNS service for an existing domain to Route 53, you start by creating a hosted zone for the domain. For more information, see Making Amazon Route 53 the DNS service for an existing domain.

Considering, you have added/registered a new domain with Route 53. Then, automatically created public hosted zone will have two records i.e name server (NS) and a start of authority (SOA).

You still need to create at least two more records for the domain to work which you will see in the next sections.

Step-2: Request Certificate

As you need to create more records in hosted zone for the domain to work, the first one will be created by the certificate manager(ACM). You will have to request a public certificate.

In order to do this,

• Choose Request a certificate and leave this certificate public
• Enter domain name. You can add one more with the wild card(*) to cover all your sub-domains — that’s optional. It does not hurt to have even if you not going to have sub-domain.
• Select the Validation method. Choose either DNS validation (recommended) or Email validation. DNS validation is the easiest way, is less hassle, and will automatically renew the certificate for you.
• Keep Key algorithm default or choose one of the three available algorithms.
• Tags help you manage your certificates. You can leave it blank.

This is how it will look like e.g

So, for this certificate to work with CloudFront and S3, make sure you request the certificate in the US East (N. Virginia) Region (us-east-1) — as mentioned in the above image. If you don’t pick this region, the certificate will not work.

After requesting a certificate, you have to create a CNAME record for the DNS configuration in Route 53 for each of the domains. There are two ways to create a record:

• You can use One-click option available to create the CNAME. When you select this option, the record is automatically added to the Route 53 hosted zone of the domain.
• Or manually add CNAME records (i.e Copy record details and create a CNAME record in Route 53 with the same)

Once it is created, you will have a record in Route 53 with the following format:

Step-3: Create Bucket

Now, you have to create a bucket to store files for your site. Go to the Amazon S3 console at https://console.aws.amazon.com/s3/ and start creating your bucket with the followings:

• In Bucket name, enter a DNS-compliant name for your bucket.
• AWS Region is not important as it was for the certificate manager. You can leave it default.
• Do not uncheck Block all public access.
• Leave rest of the options as they are, and then click Create bucket.

This is how it will look like:

You’ve created a bucket in Amazon S3.

If you go to Properties tab and see Static website hosting, it is disabled. Leave it that way because we are using CloudFront. Now go to the Permission tab and see Block all public access, check there is no public access to the bucket. Also, there wouldn’t be having Bucket policy. You will be needed a bucket policy to allow CloudFront to access the bucket. However, you will have an option in CloudFront to create that policy. You will see that later in CloudFront distribution.

Here you need to upload all your site content into the bucket as shown in the figure below:

Now if you try to open any object URL of any file. It will not work and say access denied because there is no public access. Which is what we want.

Step-3: Setup CloudFront Distribution

You have set up a domain, hosted zone, certificate, and bucket for site content. Now you have to set up CloudFront distribution.

To create CloudFront distribution, go to the link https://console.aws.amazon.com/cloudfront/v3/home and do the followings:

• Choose Create distribution.
• Select Amazon S3 bucket in Origin domain for the domain.
• In Origin access, select “Legacy access identities” and create OAI(let’s say “testyourdomain.com-OAI”, doesn’t really matter what you call it) if you don’t have one. Select it under Origin access identity. And then select “Yes, update the bucket policy” for Bucket policy.
• Select “Redirect HTTP to HTTPS” under Viewer protocol policy.
• Leave “Use all edge locations (best performance)” as default in Price class
• In Custom SSL certificate, select a certificate from AWS Certificate Manager.
• Add Alternate domain name i.e testyourdomain.com and one more www.testyourdomain.com (you can replace them with your domains)
• Enter “index.html” in Default root object.
• Leave rest of the options as they are(or you can change them as per your need).

This is how a few options will look like:

This is all set you can then click create distribution button. It will start deploying distribution.

CloudFront usually takes a lot less time to deploy. However, it can take up to 25 minutes.

When your distribution is deployed, you can access your content using your new CloudFront URL. But your actual custom domain(i.e testyourdomain.com or whatever domain you have) will not work yet because you need to create another record in Route 53.

Step-4: Create Alias Record

So far, you will have three records in the hosted zone under Route 53. Two records(i.e name server (NS) and start of authority (SOA)) were created when the hosted zone was created and the third one(CNAME record) was created to validate the certificate.

Now for the custom domain to work, create an alias record with routing traffic to “Alias to CloudFront Distribution” by selecting the distribution you created in CloudFront. Here is how you can do it, see the image below:

If you want to forward/redirect it in case anyone types WWW before the domain, to your domain(i.e testyourdomain.com). You can create one more record with CNAME — that’s optional.

After records are created, It may take a few minutes for your custom domain to work.

That’s all, you are done! you can now access your site(i.e testyourdomain.com or www.testyourdomain.com) without enabling public access to your content on S3.