Bist du es leid, die langweilige, einfache S3-Bucket-Verzeichnisauflistung zu sehen? Wunschtest du, es gabe eine Moglichkeit, sie benutzerfreundlicher und ansprechender zu gestalten? Nun, suche nicht weiter! Wir stellen S3-Directory-Listing vor, eine einfache und benutzerfreundliche JS-Skript- und HTML-Kombination, die deine S3-Bucket-Verzeichnisauflistung in eine schicke, modern aussehende Datei- und Ordnerauflistung mit einer schonen Benutzeroberflache und Suchfunktion verwandelt.

Zunachst lass uns uber die Verwendung sprechen. Um S3-Directory-Listing zu verwenden, musst du lediglich das Repository klonen oder den Inhalt von dark-mode.css, s3.js und index.html in deinen S3-Bucket kopieren. Dann aktualisiere die Variable bucketName in app.js mit dem Namen deines Buckets und konfiguriere deine S3-Bucket-Einstellungen. Rufe die Datei index.html in deinem Browser auf und voila! Du hast jetzt eine schicke S3-Verzeichnisauflistung. So einfach ist das!

Aber was ist mit den S3-Bucket-Einstellungen? Damit diese Magie funktioniert, musst du deine S3-Bucket-Einstellungen ordnungsgemass konfigurieren. Stelle zuerst sicher, dass dein S3-Bucket offentlich zuganglich ist oder zumindest fur die Benutzer zuganglich ist, mit denen du die Verzeichnisauflistung teilen mochtest. Setze dann die Bucket-Policy, um offentlichen Lesezugriff auf deine Objekte zu erlauben. Verwende die folgende Policy und ersetze <dein-bucket-name> durch deinen tatsachlichen Bucket-Namen:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3DirectoryListing",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<dein-bucket-name>/*",
                "arn:aws:s3:::<dein-bucket-name>"
            ]
        }
    ]
}

Ersetze <deine-ip-adresse> durch deine gewunschte IP-Adresse oder einen CIDR-Block, um den Zugriff auf bestimmte IP-Adressen zu beschranken. Aktiviere schliesslich das statische Website-Hosting fur deinen Bucket und notiere den statischen Website-Endpunkt des Buckets.

Jetzt, da deine S3-Bucket-Einstellungen konfiguriert sind, kannst du deine brandneue, schicke S3-Verzeichnisauflistung geniessen! Aber warte, es gibt noch mehr. Du kannst die Anzahl der pro Seite angezeigten Elemente anpassen, indem du die Variable itemsPerPage in s3.js anderst.

Aktualisiere deine CORS-Einstellungen (Cross-Origin Resource Sharing) wie folgt.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

S3-Directory-Listing ist nicht nur einfach zu bedienen, sondern auch hochgradig anpassbar. Du kannst das Skript und HTML an deine spezifischen Bedurfnisse und Vorlieben anpassen. Und wenn du auf Probleme stosst oder Fragen hast, kannst du zum GitHub-Repo gehen und die Ersteller informieren. Sie wurden gerne von dir horen!

Du kannst es auch im Dark Mode verwenden! Hier ist die Demo: https://s3-directory-listing.s3.amazonaws.com/index.html

Du findest das gut dokumentierte README und den Quellcode im Github-Repository: https://github.com/flightlesstux/S3-Directory-Listing

Viel Spass beim Auflisten!