Sei stanco del noioso e semplice elenco di directory del bucket S3? Vorresti ci fosse un modo per renderlo più user-friendly e attraente? Beh, non cercare oltre! Ti presento S3-Directory-Listing, un semplice e facile script JS in combinazione con HTML che trasformerà il listato della directory del tuo bucket S3 in un elenco di file e cartelle moderno e accattivante con una bella UI e funzionalità di ricerca.

Prima di tutto, parliamo dell'utilizzo. Per usare S3-Directory-Listing, tutto ciò che devi fare è clonare il repository o copiare i contenuti di dark-mode.css, s3.js e index.html nel tuo bucket S3. Poi, aggiorna la variabile bucketName in app.js con il nome del tuo bucket e configura le impostazioni del bucket S3. Accedi al file index.html nel tuo browser, e voilà! Ora hai un elegante elenco di directory S3. È così semplice!

Ma per quanto riguarda le impostazioni del bucket S3? Per far funzionare questa magia, devi configurare correttamente le impostazioni del bucket S3. Per prima cosa, assicurati che il tuo bucket S3 sia pubblicamente accessibile o almeno accessibile agli utenti con cui vuoi condividere l'elenco della directory. Poi, imposta la policy del bucket per consentire l'accesso pubblico in lettura ai tuoi oggetti. Usa la seguente policy, sostituendo <nome-del-tuo-bucket> con il nome effettivo del tuo bucket:

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

Sostituisci <tuo-indirizzo-ip> con l'indirizzo IP desiderato o un blocco CIDR per limitare l'accesso a indirizzi IP specifici. Infine, abilita l'hosting di siti web statici per il tuo bucket e annota l'endpoint del sito web statico del bucket (es. http://<nome-del-tuo-bucket>.s3-website-<tua-regione>.amazonaws.com/index.html o https://<nome-del-tuo-bucket>.s3.amazonaws.com/index.html per una connessione sicura).

Ora che le impostazioni del tuo bucket S3 sono configurate, puoi goderti il tuo nuovissimo ed elegante elenco di directory S3! Ma aspetta, c'è di più. Puoi personalizzare il numero di elementi mostrati per pagina modificando la variabile itemsPerPage in s3.js.

Aggiorna le impostazioni Cross-origin resource sharing (CORS) come qui sotto.

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

S3-Directory-Listing non è solo facile da usare, ma è anche altamente personalizzabile. Puoi modificare lo script e l'HTML per adattarli alle tue esigenze e preferenze specifiche. E se incontri problemi o hai domande, puoi andare al repo GitHub e far sapere ai creatori. Sarebbero felici di sentirti!

In conclusione, S3-Directory-Listing è un punto di svolta per chiunque voglia abbellire l'elenco della directory del proprio bucket S3. È facile da usare, altamente personalizzabile e, soprattutto, è gratuito! Quindi perché accontentarsi di un noioso e semplice elenco di directory S3 quando puoi averne uno moderno e user-friendly? Prova S3-Directory-Listing oggi e vedi tu stesso quanta differenza può fare.

Puoi anche usarlo in Dark Mode! Ecco la demo: https://s3-directory-listing.s3.amazonaws.com/index.html

Puoi trovare il README ben documentato e il codice sorgente nel Repository Github: https://github.com/flightlesstux/S3-Directory-Listing

Buon listing!