构建CloudFront图片优化器遇问题：对象不存在时S3未遵循重定向规则

I’ve run into similar headaches setting up serverless image optimizers with CloudFront and S3—let’s break down the most likely causes and fixes for that frustrating Access Denied error instead of the expected redirect to hellowrld.html.

1. Enable S3 Static Website Hosting (Critical First Step!) #

S3’s redirect rules and custom error paths only work when static website hosting is turned on. If you’re using the S3 REST API endpoint (e.g., your-bucket.s3.amazonaws.com) as your CloudFront origin, those redirect rules won’t trigger at all.

Here’s how to fix it:

• Go to your S3 bucket → Properties → Scroll to Static website hosting
• Toggle "Enable" and set the hosting type to "Host a static website"
• Note the website endpoint (looks like your-bucket.s3-website-us-east-1.amazonaws.com) and update your CloudFront origin to use this URL instead of the REST endpoint.

2. Fix Your Bucket Policy for CloudFront Access #

If you’re using an Origin Access Control (OAC) or Origin Access Identity (OAI) to keep your bucket private, your policy needs to explicitly allow CloudFront to retrieve all objects in the bucket—including hellowrld.html.

Example bucket policy for OAC:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/your-cloudfront-dist-id"
        }
      }
    }
  ]
}

Make sure the Resource uses /* to cover every object in the bucket, not just specific paths.

3. Configure S3 Redirect/Error Rules Properly #

You have two solid options to get S3 to send missing requests to hellowrld.html:

Option A: Set a Custom Error Document #

In the static website hosting settings, set the "Error document" field to hellowrld.html. This will automatically serve that file whenever any object returns a 404.

Option B: Create a Targeted Redirect Rule #

If you need more control, add a routing rule in the static website hosting settings:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyWith>hellowrld.html</ReplaceKeyWith>
      <HttpRedirectCode>302</HttpRedirectCode>
    </Redirect>
  </RoutingRule>
</RoutingRules>

Use 302 (temporary redirect) so CloudFront doesn’t cache the redirect permanently.

4. Adjust CloudFront Error Response Settings #

CloudFront might be intercepting the 404 from S3 before the redirect can fire. Check your distribution’s Error Pages settings:

• Look for a custom error response for 404. If it’s enabled, make sure it’s set to forward the request to S3 instead of returning a fixed error page.
• Set the "HTTP Response Code" to "404 (Not Found)" so S3 can handle the redirect, or ensure it passes through the 302 response from S3.

5. Validate Permissions for hellowrld.html #

Double-check that the hellowrld.html object itself doesn’t have individual permissions blocking the OAC/OAI. Go to the object’s Permissions → Access control list and confirm the CloudFront identity has read access, or that your bucket policy overrides any restrictive object-level settings.

Final Testing Tip #

After making changes, invalidate your CloudFront cache (to avoid serving old cached responses) and test with a non-existent image URL. Use browser dev tools to trace the network requests—you should see a 302 redirect to hellowrld.html, followed by the Lambda-generated optimized image.

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