AWS Practices# Serve A Static Website on S3 with HTTPS

Nowadays, I have been working on systems on AWS. I have found the chance to apply some theoretical practices that I learned from the certification exam. Hereby, I will try to write some practices as a blog to remember, to understand better, and maybe to help the ones who read these blogs.

In this blog, I will try to explain how to serve a static website on S3.

Table of Contents:

1. Configuring S3 Bucket
2. Configuring ACM (HTTPS Certificate)
3. Configuring CloudFront Distribution
4. Configuring Route53

Overview:

Basically, we create a bucket then we will configure it as a website. Then we will create a public SSL certificate on AWS. Then we will create a distribution with CloudFront and use S3 bucket and certification. Finally, we will create records on Route53 for this distribution and certificate.

Let’s start to configure:

1. Configuring S3 Bucket:

Firstly, you need to create a bucket with your site name. It is “wecare.charity” in my case, So I created a bucket named “wecare.charity”

After this, you should enable the “ Static Website Hosting” option from the properties.

After this, you should make your bucket public.

After this, you need to define bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::wecare.charity/*"
        }
    ]
}

Now you should be able to access your static website url on S3 > Your Bucket > Properties > Static Website Hosting.

2. Configuring A Public HTTPS Certificate:

Now we need a certificate to provide our website in a secure way. To do this; we will use the “Certificate Manager” service.

But first; please sure that you do that on the “us-east-1” (North Virginia) region. Because you can only use certificates whiches in “us-east” for CloudFront. If you create this certificate in another region, you can’t use this for CloudFront distribution (at least for now ;) ).

Create a certificate and validate it. You can use also validate it with e-mail but I prefer to validate it via DNS record. You can easily create a CNAME record on Route53 with only one click.

3. Configuring CloudFront Distribution:

Now, we need to create a distribution on CloudFront. Basically, this distribution will serve the s3 bucket as a website with created certificate.

The “Origin Domain Name” should be your s3 website URL. I entered this manually because it didn’t work when I choose it from the list.

Configure the viewer protocol policy as “Redirect HTTP to HTTPS”

Finally, enter your “CNAME ” and configure the “SSL Certificate”. You can choose your certificate which is created via the “Certificate Manager”.

When your distribution is deployed, you can get a distribution domain name for it.

When you visit this ur, you will see the connection is secured and your site is available.

4. Configuring Route53:

And, this is the final step. You just need to create an A record with an alias and choose your distribution as a target.

That’s all. You can use your static website :)

Bonus: If you need to update some files or contents, you need you invalidate the cache from CloudFront after upload a new version.