Host A Static Website Using Custom Domain Name With S3 And CloudFront

In my previous blog , I have explained in detail , How you can manage S3 bucket and objects using AWS CLI , Check out here.

In this blog we will learn how to setup a static website with custom domain names using S3 bucket and Cloudfront.

Here S3 bucket will hold all the website contents , And Cloudfront will be used to cache the website at edge locations which will help us to access the website without any latency.

Steps Involved

Here is the lists of steps involved.

• Register a custom domain
• Create 2 S3 bucket
• One Bucket will be used to store the website content
• Another Bucket will be used for redirection
• Uploading website contents to the bucket
• Configure access policy for the buckets
• Test the domain endpoint
• configure DNS records
• Testing website
• Improving performance of the website using Cloudfront

Important Note

• Using S3 we cannot host an website with HTTPS , So we need to use Cloudfront to serve the website hosted in S3 with HTTPS.

• Also we need to host the domain using Route 53 , Only then the domain works with the cloudfront.

Services Used

To setup the static website , We will be using the following AWS services.

• Route 53
• S3 Buckets
• Cloudfront
• AWS Certificate manager

Registering Domain In Route 53

First we need to setup the domain name using Route 53.

Route 53 is a globally used service.Hence the domain registration can be done at any AWS region.

Login to Route 53 , In the left Navigation pane , Choose Hosted Zones

and then click Create Hosted Zone

You will get the following page , Provide the domain name and then click Create

Once it is done , The Name server and the SOA (Start of Authority) records will be created for the domain.

For now Domain setup is done , We will come here later once we have completed S3 bucket configurations.

Creating S3 Buckets

Here we need to create 2 S3 buckets.

We need to make sure that the domain name and the bucket name are the same.

I am creating 2 S3 buckets as follows.

Bucket 1 : www.fitdevops.in

Bucket 2 : fitdevops.in

Login to S3 Console , and start to creating S3 buckets.

Once you are in the S3 console. Click Create bucket

provide the name of the domain as the bucket name.

Make sure that you have provided your domain name.

and then click Create.

I should create for www.fitdevops.in also.

Now that we have created 2 s3 buckets as per the requirement.

Uploading Static Contents To S3 Bucket

We need to upload all the website contents to the main S3 bucket.

I am using www.fitdevops.in as the main bucket. So If any one enters fitdevops.in it will be automatically redirected to www.fitdevops.in

For example , I am just uploading index.html file to the main bucket (www.fitdevops.in)

To upload the content , Click www.fitdevops.in and then choose Upload

and then click Add files and then select Upload.

The file is uploaded to the bucket.

Configuring S3 Hosting

Now its time to configure the S3 bucket to serve the static contents.

select the main bucket and then click Properties

You will see Static website hosting , click that

and then select use this bucket to host a website

and then provide index.html as the index document , which we have used for testing in this guide.

and then click Save.

Now the Bucket hosting is configured,

Making S3 Bucket Public

The contents hosted in the S3 bucket is not Public , Hence no one will be used to access the content of the website.

So we need to make the bucket Public.

We can make the S3 bucket public by adding the S3 bucket policies.

But before that we need to let the s3 bucket accept the bucket policies .

To do that , Click the main S3 bucket ,click Permissions tab

And you can see all the public access to the bucket is blocked.

Also permission to add bucket policies is also blocked.We need to disable it.

Click Edit , and Uncheck only the permission to add bucket policies and then click Save.

Now lets go ahead and add the bucket policy to make the bucket public.

Again click the main bucket and then choose permissions and then select Bucket policy

We are going to add the bucket policy provided below.

make sure the domain name is replaced with your domain name.

{
       "Version": "2012-10-17",
       "Statement": [
          {
             "Sid": "AddPerm",
             "Effect": "Allow",
             "Principal": "", 
             "Action": "s3:GetObject", 
             "Resource": "arn:aws:s3:::www.fitdevops.in/*"
          }
      ]
}

The above policy will grant read only access for all the users from the world to access the contents of the website.

Setup Non-Www To Www Redirection

As said earlier , We need to redirect all the fitdevops.in requets to www.fitdevops.in.

We are going to use the 2nd bucket , which is fidevops.in.

Open the 2nd S3 bucket and then click Properties and then click Static web hosting

Select Redirect requests and the target bucket name should be www.fitdevops.in and the Protocol should be https

and then click Save.

This bucket will be used for redirection.

Generating SSL Certificate

As discussed earlier , We are going to serve the website using https.

Hence we need to use the SSL certificate for the domain. We can generate the free SSL certificate using AWS Certificate Manager , To generate SSL certicate , Check here for detailed explanation.

Once the certifcate is generated , Lets move on to the next step.

Setup Cloudfront

We need to setup the cloudfront distributions , Login to Cloudfront console.

We need to create 2 cloudfront distributions. One for each S3 buckets.

Click Create Distribution

And then choose Web as the delivery method for the contents.

Under Origin Settings , provide the origin domain name of the main S3 bucket i.e www.fitdevops.in.

To get the origin domain name of Main S3 bucket , Go to S3 console , Click the bucket and then select Properties

and then click Static website hosting , You will find the endpoint there, Copy the endpoint without http.

Now go to cloudfront and paste the origin domain name which you have copied.

And origin ID will be generated automatically.

And for the Viewer protocol policy , Redirect HTTP to HTTPS

And for Alternate Domain name (CNAMEs) , Enter the domain name i.e., www.fitdevops.in.

For SSL Certificate , We need to choose Custom SSL certificate ,

If you havn’t created certificate in N.Virginia using AWS certificate Manager , Then you wont be able to apply SSL certificate for the distribution.

Following the above Generating SSL Certificate procedure , create the certificate in the N.Virginia region.

Once the certificate is generated and applied here, Click Create distribution.

It will take some time for the distribution to be created.

Now Its time to create distribution for fitdevops.in.

Follow the same procedure as shown above and get the static website endpoint , Copy the endpoint without http.

The origin domain name should be fitdevops.in.s3-website.ap-south-1.amazonaws.com (without www)

It will generate the Origin ID.

And for the Viewer protocol policy , Redirect HTTP to HTTPS

And for Alternate Domain name (CNAMEs) , Enter the domain name i.e., fitdevops.in (without www).

Select the certificate which you have generated and apply it here.

Once the above settings are configured , Click Create distribution

Now that we have hosted the static website using S3 , ACM and cloudfront.

Adding DNS Records

Now Its time to add the DNS records for the domain names with their respective cloudfront distributions.

Login to Route53 console , Here we are going to create A records for the domain names pointing to cloudfront distributions.

The following records should be created as follows.

• We should create A record for www.fitdevops.in pointing to the cloudfront distribution of www.fitdevops.in

• We should create A record for fitdevops.in pointing to the cloudfront distribution of fitdevops.in

Alternate Method:

The above setup can also implemented with only once S3 bucket and Cloudfront Distribution.

1. Create S3 bucket with the website contents and the bucket will be private which is by default
2. Generate the SSL certificate using the same procedure
3. Create cloudfront distribution and the Origin domain name should be the S3 bucket
4. Restrict bucket access should be Yes
5. Grant Read Permissions on Bucket : Yes, Update Bucket Policy
6. Viewer Protocol Policy- Redirect HTTP to HTTPS
7. Alternate domain names (CNAMES) – fitdevops.in www.fitdevops.in
8. Apply the SSL certificate which was generated for the domain using ACM
9. The Default Root object should be index.html
10. Once the cloudfront distribution is successfully deployed.
11. Add the DNS A records pointing to cloudfront distribution alias to fitdevops.in and
12. Add CNAME record from www.fitdevops.in to fitdevops.in

Conclusion

We have successfully hosted a Static website (www.fitdevops.in) using S3 buckets , ACM and the Cloudfront.

The website is secured with https and we have implemeted a direction for non-www to www domain endpoint.

Hope you find it helpful.Please do check out my other articles.