How to Point a Domain from Route 53 to a GCS Bucket with CloudFront

Learn to connect an AWS Route 53 domain to a Google Cloud Storage (GCS) bucket for static website hosting via AWS CloudFront.

Prerequisites

  • An AWS account with a domain registered on Route 53.
  • A Google Cloud Platform (GCP) account with billing enabled.
  • Basic understanding of DNS records, cloud storage, and CDN.

Step 1: Set Up Your GCS Bucket

  1. Go to the Google Cloud Storage Console.
  2. Create a new bucket and name it with your domain name (e.g., example.com), as GCS requires this for website hosting.
  3. Select a storage location and storage class (Standard works well).
  4. In "Access control," choose "Uniform."
  5. Click "Create."

Make the Bucket Public

To make your site accessible, set the bucket permissions:

  • In your bucket, go to "Permissions."
  • Click "Add" and enter allUsers as the "New principal."
  • Select "Storage Object Viewer" for the role, then save.

Step 2: Configure GCS Bucket for Website Hosting

  1. Go to "Edit website configuration" in your bucket settings.
  2. Set your index page (e.g., index.html) and error page (optional, e.g., 404.html).
  3. Save your settings.

Step 3: Get Your GCS Bucket’s Website URL

To point your Route 53 domain to the GCS bucket, you’ll need its URL:

  • For a bucket named example.com, use: http://example.com.storage.googleapis.com/.

Step 4: Request a Free SSL Certificate in AWS Certificate Manager (ACM)

To secure your site with HTTPS, you'll need an SSL certificate. AWS Certificate Manager (ACM) provides free certificates for use with CloudFront.

  1. Go to the AWS Certificate Manager Console.
  2. Click on "Request a certificate" and select Request a public certificate.
  3. In the "Domain names" section, enter your domain name (e.g., example.com) and any subdomains (e.g., www.example.com) you plan to use.
  4. Choose DNS validation (recommended) for a simpler and automated setup.
  5. Click "Review" and then "Confirm and request" to create the certificate request.
  6. To validate the certificate, ACM will provide a CNAME record that needs to be added to your Route 53 hosted zone:
    • In Route 53, go to your domain's hosted zone and create a new CNAME record.
    • Copy the CNAME details from ACM into this record, then save.
    • ACM will automatically detect the validation and issue your certificate within a few minutes.
  7. Once validated, your certificate status will change to "Issued." You can now use this certificate with CloudFront.

Now that you have an SSL certificate, proceed with setting up your CloudFront distribution.

Step 5: Set Up CloudFront Distribution to Serve Content from GCS

  1. Go to the CloudFront Console on AWS.
  2. Create a new distribution and choose Web as the delivery method.
  3. In the Origin Domain Name, enter your GCS bucket's website URL (e.g., example.com.storage.googleapis.com).
  4. Set Origin Protocol Policy to HTTP Only since GCS bucket websites don’t support HTTPS directly.
  5. Under Default Cache Behavior Settings, set Viewer Protocol Policy to Redirect HTTP to HTTPS.
  6. For a custom domain, add your domain (e.g., example.com) as an Alternate Domain Name (CNAME).
  7. If using SSL, select the certificate you requested from AWS Certificate Manager (ACM) for your domain.

Step 6: Update Route 53 DNS to Point to CloudFront

To direct your domain to the CloudFront distribution, create a DNS record in Route 53 using an alias. Route 53’s alias feature allows you to link your domain directly to the CloudFront distribution without needing to know its IP address.

  1. Go to the AWS Route 53 Console and open the hosted zone for your domain.
  2. Click on "Create record" to add a new DNS record.
  3. In the Record name field, enter your domain name (e.g., example.com) or leave it blank if you’re setting this as the root domain.
  4. Under Record type, select A - IPv4 address.
  5. Enable the Alias option. Route 53 will display a dropdown for alias targets.
  6. From the dropdown options, choose Alias to CloudFront distribution. This automatically links your domain to the CloudFront distribution without needing an IP address.
  7. In the next dropdown that appears, select your CloudFront distribution by its domain name (it should look like xxxxxxx.cloudfront.net). If you don't see it listed:
    • Go to the CloudFront Console to locate the distribution domain name, which is listed in the Domain Name column.
    • Return to Route 53 and try the dropdown again or manually enter the CloudFront domain name.
  8. If you’d like Route 53 to automatically route traffic to an alternative endpoint if CloudFront experiences issues, select Yes for "Evaluate target health" (optional).
  9. Click "Create records" to save the new DNS record. Note that DNS propagation may take up to 48 hours to complete.

After DNS propagation, visiting your domain (e.g., https://example.com) should load the content from your GCS bucket served through CloudFront.

Step 7: Verify the Setup

After DNS propagation, visit your domain (e.g., https://example.com) to confirm the setup. You should see the content hosted on your GCS bucket, delivered via CloudFront.

Conclusion

And that’s it! You’ve successfully set up CloudFront as a CDN for your GCS-hosted content, linked through your AWS Route 53 domain. Visitors will access your content faster with this configuration.

Additional Resources

© 2024 - Tùng Râu