Create CloudFront Distribution

In this step, we will create a CloudFront distribution to serve our website globally with HTTPS, then attach our custom domain and SSL certificate.

Create a CloudFront Distribution

1. Open Amazon CloudFront console. On the Distributions page, click Create distribution.

   

2. At Step 1 — Choose a plan, select the Free plan ($0/month). This is sufficient for learning and development purposes.

   

3. Scroll down to view other plan options (Pro, Business, Premium). Keep Free selected and click Next.

   

4. At Step 2 — Get started:

   • Enter a Distribution name (e.g., FCAJ Book Shop Distribution).
   • Keep Distribution type as Single website or app.
   • Skip the Domain section for now (we will add it later).
   • Click Next.

   

5. At Step 3 — Specify origin:

   • Select Amazon S3 as the Origin type.
   • Click Browse S3 to find your S3 bucket.

   

6. In the Select S3 location popup:

   • Search and select your S3 bucket (e.g., fcaj-book-shop-by-tranvix).
   • Click Choose.

   

7. After selecting the bucket, a warning will appear: “This S3 bucket has static web hosting enabled.” Click Use website endpoint to use the S3 website endpoint instead of the bucket endpoint.

   

8. The S3 origin field is now updated with the S3 website endpoint URL (e.g., fcaj-book-shop-by-tranvix.s3-website-ap-southeast-1.amazonaws.com).

   

9. Scroll down to the Settings section:

   • Keep Use recommended origin settings selected.
   • Keep Use recommended cache settings tailored to serving S3 content selected.
   • Click Next.

   

10. At Step 4 — Enable security:

    • The Web Application Firewall (WAF) security protections are included free with your plan.
    • Keep the default settings.
    • Click Next.

    

11. At Step 5 — Review and create, review all your settings:

    • General configuration: Distribution name, Free plan.
    • Origin: S3 website endpoint.
    • Cache settings: Default S3 settings.
    • Security: Enabled.
    • Click Create distribution.

    

12. The distribution is created successfully! A green banner confirms “Successfully created new distribution.” The status will show Deploying — wait for it to finish.

    

Add Custom Domain and SSL Certificate

13. Once the distribution is deployed, navigate to the General tab in the distribution details. In the Settings section, click Add domain under Alternate domain names.

    

14. At Step 1 — Configure domains:

    • Enter your root domain (e.g., tranvix.click).
    • Click Add another domain and enter the www subdomain (e.g., www.tranvix.click).
    • Click Next.

    

15. At Step 2 — Get TLS certificate:

    • Select the SSL certificate you created in Section 3 (e.g., *.tranvix.click).
    • The Certificate details section shows the ARN and covered domains.
    • Click Next.

    

16. At Step 3 — Review changes, verify:

    • Domains to serve: tranvix.click and www.tranvix.click.
    • TLS certificate: Your ACM certificate.
    • Click Add domains.

    

17. The distribution is updated successfully! A green banner confirms “Distribution updated successfully.” You can now see both alternate domain names and the Custom SSL certificate in the Settings section.

    

Set Up DNS Routing to CloudFront

18. In the Settings section of the distribution, click Route domains to CloudFront to automatically create Route 53 DNS records.

    

19. In the Set up DNS routing popup, you will see 4 DNS records to be created (A and AAAA for both tranvix.click and www.tranvix.click), all pointing to the CloudFront distribution domain. Click Set up routing automatically.

    

20. A green banner confirms “DNS records successfully updated.”

    

21. Verify in Route 53: Navigate to your hosted zone and confirm that 4 new A/AAAA alias records have been created, pointing tranvix.click and www.tranvix.click to the CloudFront distribution.

    

Verify the Website

22. Open a new browser tab and navigate to your domain (e.g., https://tranvix.click). The FCJ Book Store website should load successfully with HTTPS enabled.

    

Congratulations! Your website is now served globally through CloudFront with HTTPS enabled via your custom domain. In the next step, we will learn how to clean up all resources.