S3与Route 53静态网站子文件夹访问问题求助

Hey there, let's tackle that directory listing issue you're facing with your S3 static site. The "NoSuchKey" error happens because S3's static website hosting doesn't automatically generate directory listings by default—when you hit mypage.com/music, it's looking for a file named music (not a directory), and when it can't find it, it throws that error. Here are two solid solutions to get your music directory showing a nice file list:

Solution 1: Manual Index Files (Great for Static Content) #

If your music directory doesn't change often, this is the simplest approach:

• Create an index.html file specifically for the /music directory. This file will act as the directory listing page. Here's a basic example you can use:

<!DOCTYPE html>
<html>
<head>
    <title>My Music Collection</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 2rem; }
        ul { list-style-type: none; padding-left: 0; }
        li { margin: 0.5rem 0; }
        a { color: #2385bb; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>Music Files</h1>
    <ul>
        <li><a href="song1.mp3">song1.mp3</a></li>
        <li><a href="album1.zip">album1.zip</a></li>
        <!-- Add links to all your music files here -->
    </ul>
</body>
</html>

• Upload this index.html file directly into the music/ folder of your S3 bucket (so the full path is mypage.com/music/index.html).
• Now when you visit mypage.com/music or mypage.com/music/, S3 will load this index file and show your file list.

Solution 2: Auto-Generated Listings with Lambda@Edge (Perfect for Dynamic Content) #

If your music directory gets updated frequently, manually editing the index file is a hassle. Use Lambda@Edge with CloudFront to auto-generate HTML listings on the fly:

1. Create a Lambda Function: Head to the Lambda console in the us-east-1 region (required for Lambda@Edge). Write a function that:
   • Detects when a request is made to a directory without an index.html file.
   • Calls S3's ListObjectsV2 API to fetch all files in that directory.
   • Generates an HTML page with links to those files and returns it as the response.
     Pro tip: You can find pre-written Lambda code snippets for this online—just adapt them to your bucket name and styling preferences.
2. Set Up CloudFront: Create a CloudFront distribution that points to your S3 static website endpoint. Attach your Lambda function to the Viewer Request or Origin Request event type.
3. Update Route53: Change your Route53 record to point to the CloudFront distribution's domain instead of the S3 endpoint.
4. Permissions: Make sure your Lambda function has permission to call s3:ListObjectsV2 on your bucket, and that CloudFront has access to fetch content from S3.

Quick Notes to Avoid Headaches #

• Trailing Slash: Encourage users to visit mypage.com/music/ (with the trailing slash) or set up a CloudFront redirect rule to automatically add it—this prevents S3 from looking for a file named music instead of the directory.
• Bucket Permissions: For the manual method, ensure your bucket policy allows s3:GetObject for public access. For the Lambda@Edge method, add s3:ListBucket permissions to your Lambda's execution role.

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