301 Redirects with Cloudfront

Option 1: Using CloudFront with S3 Static Website Hosting

This is a straightforward method if you're simply redirecting to different URLs, not requiring any logic-based conditions.

  1. Create an S3 Bucket for Each Redirect
    • Create an S3 bucket for each URL you wish to redirect from. Each bucket name should match the domain/subdomain you want to redirect (e.g., "old.example.com").
    • Enable Static Website Hosting in the bucket properties, and select the "Redirect requests" option.
    • Set the destination URL for the redirect and ensure the redirect type is 301 (Permanent Redirect).
  2. Point CloudFront to the S3 Buckets
    • Create a new CloudFront distribution for each S3 bucket (or a wildcard domain if all redirects are subdomains).
    • Set the Origin Domain Name to your S3 bucket (the one configured for redirects).
    • Set the destination URL for the redirect and ensure the redirect type is 301 (Permanent Redirect).Configure any caching settings as needed.
  3. Set Up DNS Records in Route 53 (or Your DNS Provider)
    • Add the appropriate DNS records (e.g., CNAME or A records) to point to the CloudFront distribution.
  4. Repeat for Each Redirect
    • Repeat the steps for each redirect as needed, setting up multiple CloudFront distributions if required.

Option 2: Using Lambda@Edge for Complex Redirects

This approach is better suited if you need to manage a large number of redirects with dynamic logic.

  1. Create a CloudFront Distribution
    • Set up a CloudFront distribution pointing to your current origin (like your main website or an S3 bucket).
  2. Write a Lambda@Edge Function
    • Create a Lambda function to handle your redirects. You will need to use the AWS SDK to deploy this function to the Edge.
    • The function will execute on CloudFront Viewer Request events. You can use this function to map paths from old URLs to new URLs and return a 301 status code with the Location header set to the new URL.
exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const oldUrl = request.uri;

    const redirects = {
        '/old-page1': '/new-page1',
        '/old-page2': '/new-page2',
        // Add your redirects here
    };

    if (redirects[oldUrl]) {
        return {
            status: '301',
            statusDescription: 'Moved Permanently',
            headers: {
                location: [{
                    key: 'Location',
                    value: redirects[oldUrl],
                }],
            },
        };
    }

    return request; // Forward the request if no match is found
};

	
  • Create a CloudFront Distribution
    • Attach your Lambda@Edge function to the CloudFront distribution on the Viewer Request trigger.
    • Deploy the function to the appropriate CloudFront distribution, which will then handle the redirects.
  • Update DNS Records as Needed
    • If you are redirecting entire subdomains, ensure your DNS records point to the correct CloudFront distribution.

Considerations

  • Caching in CloudFront: When setting up redirects, CloudFront caches the response. Make sure to configure your cache settings properly (e.g., set a short TTL) to allow for quick updates.
  • Invalidating Cache: If you update redirects, you may need to invalidate the CloudFront cache to propagate changes quickly.
  • Bulk Automation: If you're dealing with a massive number of redirects, consider using scripts or infrastructure-as-code tools like Terraform or AWS CloudFormation to automate the setup of S3 buckets, CloudFront distributions, and Route 53 records.

Publish better website content

© Copyright 2024. All rights reserved.