如何在CloudFront中实现URL重写/映射，使内容对应两个URL？

Got it, let's tackle this problem—you want to set up an internal URL rewrite in CloudFront, just like Apache's mod_rewrite for transparent content mapping, right? Here's exactly how to make /foo.html serve the content of /bar.html without changing the user's address bar:

CloudFront Functions are ideal for this lightweight edge-side URL manipulation. They’re low-cost, fast, and designed specifically for tasks like transparent rewrites where you don’t want the user’s address bar to update.

Step 1: Create a CloudFront Function #

1. Head to the CloudFront console, go to Functions → Create function.
2. Name your function (e.g., InternalRewrite-FooToBar) and select the Viewer Request event type—this ensures we modify the request before it reaches your origin.
3. Replace the default code with this JavaScript snippet:

function handler(event) {
    const request = event.request;
    const uri = request.uri;

    // Check if the request targets the old URL
    if (uri === '/foo.html') {
        // Rewrite the request URI to point to the new page
        request.uri = '/bar.html';
    }

    return request;
}

4. Save your work, then publish the function to the Live stage (test deployments only work in the CloudFront test environment).

Step 2: Link the Function to Your CloudFront Distribution #

Now you need to attach the function to your distribution so it runs on incoming requests:

1. Open your CloudFront distribution and go to the Behaviors tab.
2. Select the behavior that applies to your HTML pages (or create a new one targeting paths like *.html if needed).
3. Click Edit, then scroll down to the Function associations section.
4. For the Viewer request event, choose CloudFront Function from the dropdown, then select the function you just created.
5. Save the changes—CloudFront will take a few minutes to deploy the update globally.

Step 3: Test the Setup #

Once deployment is complete, verify everything works:

• Open a browser and navigate to https://your-domain/foo.html—you should see the content of bar.html, and the address bar will still show /foo.html.
• Use curl to confirm no redirects are sent (look for a 200 OK status code, not 301/302):

curl -v https://your-domain/foo.html

Bonus: Handle Multiple Old URLs #

If you have more than one URL to map, expand the function with a rewrite map for cleaner, scalable code:

function handler(event) {
    const request = event.request;
    const uri = request.uri;

    // Map old URLs to their new counterparts
    const rewriteMap = {
        '/foo.html': '/bar.html',
        '/old-about.html': '/about.html',
        '/legacy-contact.html': '/contact-us.html'
    };

    // Apply rewrite if the URI exists in our map
    if (rewriteMap.hasOwnProperty(uri)) {
        request.uri = rewriteMap[uri];
    }

    return request;
}

Key Notes #

• Viewer Request vs. Origin Request: We use Viewer Request here because it runs at the edge, reducing origin traffic and improving latency. For origin-specific logic (like dynamic rewrites based on origin data), you could use Lambda@Edge, but CloudFront Functions are better for simple, static rewrites.
• Cache Behavior Matching: Ensure your CloudFront behavior is configured to match the paths you’re rewriting (e.g., *.html or specific individual paths).
• Origin Permissions: Make sure your origin (S3, EC2, etc.) allows CloudFront to access the new URLs—since the rewrite changes what CloudFront requests from your origin, permissions need to cover the new path.

内容的提问来源于stack exchange，提问作者rcrews