Setup a Static Site with Custom SSL Certificate on AWS using CloudFront and S3

Overview

In this article, we’ll walk through how to setup a static site with a custom SSL certificate on AWS using CloudFront and S3. We will also restrict web access to the S3 bucket so that users can only access via CloudFront and not by going directly to the S3 URL.

Create SSL Certificate in Certificate Manager

The AWS Certificate Manager can be used to provision SSL certificates for custom domains provided we can verify that own the domain.

1. Go to https://console.aws.amazon.com/acm/
2. Click Request a certificate
3. Select Request a public certificate and click the Request a certificate button on the bottom right
4. Specify the domain names on the certificate (example.com, www.example.com)
5. Choose DNS or Email validation and click Review
6. Click Confirm and Request
7. Follow the on-screen prompts on how to verify the request

Once verified, the certificate should show the Status as Issued as shown below:

Create S3 Bucket

We will be creating an S3 bucket named example.com which will host our static files.

1. Go to https://s3.console.aws.amazon.com/s3/
2. Click Create bucket
3. Enter example.com for the bucket name and click Next
4. On the Options page, I recommend checking the following options: Versioning and Default Encryption
5. On the Permissions page, click Next to accept the default permissions which block all public access
6. On the Review page, click Create bucket

Upload HTML file into the S3 Bucket

1. On your local computer, create an HTML file with some test content and save it as index.html
2. Back in the S3 Console, click on the example.com bucket
3. Select the Upload button
4. Click on Add Files and upload the file

Create Origin Access Identity

An origin access identity is a special user that allows CloudFront access to our S3 bucket.

1. Go to https://console.aws.amazon.com/cloudfront/
2. Under the Security menu on the left, click on Origin access identity
3. Click Create Origin Access Identity
4. Enter a comment and click Create

Create CloudFront web distribution

1. Go to https://console.aws.amazon.com/cloudfront/
2. Click Create Distribution
3. Create a web distribution by clicking the Get Started button under Web
4. For Origin Domain Name, enter example.com.s3.amazonaws.com which is the REST endpoint for the example.com S3 bucket
5. For Restrict Bucket Access, choose Yes
6. Under Origin Access Identity, select Use an Existing Identity and choose the identity we created in the previous section
7. Under Grant Read Permissions on the Bucket, choose Yes, Update Bucket Policy
8. Under Viewer Protocol Policy, select Redirect HTTP to HTTPS
9. Under Alternate Domain Names (CNAMEs), enter example.com and www.example.com on separate lines
10. Under SSL Certificate, select the certificate we created in Certificate Manager
11. For Default Root Object, enter index.html
12. Click the Create Distribution button on the bottom right

It usually takes several minutes for the CloudFront distribution to transition from In Progress to Deployed so hang tight.

Each distribution gets its own *.cloudfront.net domain name. So we can go to this domain and should see the HTML page we uploaded earlier.

Verify S3 Bucket Policy

In the previous section, we instructed CloudFront to update the bucket policy for example.com so that the Origin Access Identity can access the bucket (step 7).

Let’s check the bucket policy:

1. Go to https://s3.console.aws.amazon.com/s3/
2. Click on the example.com bucket
3. Select the Permissions tab
4. Click the Bucket Policy button
5. Verify that the JSON shown is similar to below:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::example.com/*"
        }
    ]
}

Create DNS records in Route53

Note: This section assumes the nameservers for example.com are already pointed to AWS and a hosted zone has already been created in Route53.

The final steps involve creating DNS records in Route53 so that traffic is directed to CloudFront.

Create ALIAS Record

1. Go to https://console.aws.amazon.com/route53/
2. Click on the example.com hosted zone
3. Click the Create Record Set button at the top
4. The dialog will appear on the right pane
5. Leave the Name field blank
6. Select A - IPv4 Address as the type
7. For Alias, select Yes
8. For Alias Target, click in the field and you should see the CloudFront distribution as an available option. Select it.
9. Click the Create button

Create CNAME for www

1. Click the Create Record Set button at the top
2. The dialog will appear on the right pane
3. For Name, enter www
4. Select CNAME as the type
5. In the Value box, enter example.com
6. Click the Create button

Testing

We should now be able to go to https://www.example.com and https://example.com to see the contents of the HTML we upload to the bucket.

If we try to go directly to the S3 bucket containing the file, we should get a 403 Forbidden error.

https://example.com.s3-website-us-east-1.amazonaws.com/