The Pro Upgrade for your static website with CloudFront and HTTPS 🔒

Part A: Prepare Our S3 Bucket

Before we even touch CloudFront, we need to change our S3 bucket's role from a public web server to a private storage locker.

1. First, let's head over to the S3 bucket we created in the last guide.
2. Go to the Properties tab, find the "Static website hosting" section, click Edit, and choose Disable. Why? CloudFront will now be our web server, so S3 no longer needs this public-facing feature.

Part B: Create the CloudFront Distribution

Now we'll create the distribution itself!

1. Let's go to the Amazon CloudFront console and click the orange Create a CloudFront distribution button.
2. Get Started: Give your distribution a descriptive name. For "Distribution type," select Single website or app. In the "Custom domain" field, enter your domain name. Since we've already set up Route 53, AWS will recognize it instantly.
3. Specify Origin: For "Origin type," choose S3. In the "Origin endpoint" field, select our S3 bucket from the dropdown list.
4. Enable Security: Select Do not enable security protections❌.
   Why? The Web Application Firewall (WAF) is a powerful (and paid) security service that protects against complex attacks like SQL injection. For our simple static portfolio, it's overkill. We can always enable it later if needed.
5. Select the certificate that we had created earlier.
6. Review and Create: Check your settings one last time and click Create distribution.

❮ ❯

Part C: Secure the Origin & Verify Redirect

After the distribution is created, we'll perform the most important security steps: locking down our S3 bucket and ensuring all traffic uses HTTPS.

1. Once the distribution is created (this can take a few minutes), open it from the CloudFront console.
2. Go to the Origins tab, select the S3 origin from the list, and click Edit.
3. Find the Origin access section and select Origin access control settings (recommended).
4. A new Origin access controlsection will appear. Click the blueCreate new OAC button, accept the default options, and click Create.
5. You'll now see a banner with a policy. Click the Copy policy button.
6. Click the Go to S3 bucket permissions button. This will take you directly to the Permissions tab in S3.
7. In the S3 bucket's Permissions tab:
   • First, under Block public access, click Edit and check ✅ the box for Block all public access. Save the changes.
   • Next, under Bucket policy, click Edit. Delete the old public policy and paste the new one we just copied from CloudFront. Save the changes.

                           Policy template
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yourBucketName/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "yourCloudfrontARN"
                }
            }
        }
    ]
}

yourBucketName and yourCloudfrontARN are placeholders that you need to replace.

Why? These two actions completely lock down our S3 bucket. It's now private, and the only entity in the world that has permission to read its files is our new CloudFront distribution. This is the best practice for security.

8. Finally, let's verify the HTTPS redirect. In CloudFront, go to the Behaviors tab, select the default behavior, and click Edit. Scroll down and ensure Viewer protocol policy is set to Redirect HTTP to HTTPS.

❮ ❯