Secure Delivery via Amazon CloudFront & ACM

To enable secure HTTPS delivery for the website and optimize page loading globally, configure AWS Certificate Manager (ACM) combined with CloudFront.

Step 1: Request SSL/TLS Certificate via ACM

  1. Search for Certificate Manager on the AWS Console.
  2. (Important) Switch region to us-east-1 (N. Virginia) (CloudFront requires SSL/TLS certificates to be provisioned in this region to be used). Change ACM Region to us-east-1
  3. Click Request certificate, select Request a public certificate, and click Next. Request Public SSL Certificate
  4. In the configuration:
    • Fully qualified domain name: Enter your domain name (e.g., rookwork.asia and add an additional wildcard domain *.rookwork.asia).
    • Validation method: Choose DNS validation.
  5. Click Request. Enter Domain Name and Choose DNS Validation
  6. The initial status will be Pending validation. Click the Certificate ID, and click Create records in Route 53 to automatically generate DNS validation records in Route 53. Create DNS validation records in Route 53
  7. Wait a few minutes for the status to change to Issued. ACM Certificate issued successfully

Step 2: Create a CloudFront Distribution

  1. Search for CloudFront on the AWS Console.
  2. Click Create distribution. Access CloudFront and click Create distribution
  3. In the configuration:
    • Origin domain: Select your S3 bucket. Select S3 Bucket as Origin
    • Origin access: Select Origin access control settings (OAC) (recommended). Click Create control setting, leave default settings, and save. Configure Origin Access Control (OAC)
    • Viewer protocol policy: Select Redirect HTTP to HTTPS. Choose Redirect HTTP to HTTPS
    • Alternate domain name (CNAME): Add your domain names (e.g., rookwork.asia and www.rookwork.asia).
    • Custom SSL certificate: Select the ACM certificate generated in Step 1. Add CNAME and ACM SSL Certificate
    • Default root object: Enter index.html. Set Default Root Object to index.html
  4. Click Create distribution. CloudFront Distribution created successfully
  5. Copy the suggested Bucket Policy JSON code from the CloudFront console, and paste it into the Permissions -> Bucket Policy tab of your S3 Bucket to grant CloudFront access to S3 files. Open Permissions tab in S3 Bucket to Edit Policy Click Edit S3 Bucket Policy Paste Policy JSON copied from CloudFront Click Save changes to save the policy Bucket Policy updated successfully

Step 3: Create DNS Record in Route 53 Pointing to CloudFront

  1. Return to the Route 53 service and open the Hosted Zone for your domain.
  2. Click Create record. Open Hosted Zone and click Create record
  3. Configure the record:
    • Record name: Leave blank (for the apex domain rookwork.asia).
    • Record type: Choose A - Routes traffic to an IPv4 address and some AWS resources.
    • Alias: Enable (toggle switch to the right).
    • Route traffic to: Choose Alias to CloudFront distribution -> Select the CloudFront distribution you created. Configure A Alias Record pointing to CloudFront
  4. Click Create records. A DNS record created successfully by Route 53

You can now access your website securely using HTTPS through your custom domain name!

Once the static website is live and secure via HTTPS, proceed to 5.7.4. Private File Storage with S3 to configure private storage for the Backend application.