Λίστα αντικειμένων S3 bucket εύκολα με το S3 Directory Listing

Έχεις κουραστεί από το βαρετό, απλό S3 bucket directory listing; Εύχεσαι να υπήρχε ένας τρόπος να το κάνεις πιο φιλικό προς τον χρήστη και ελκυστικό; Λοιπόν, μην ψάχνεις άλλο! Παρουσιάζοντας το S3-Directory-Listing, ένα απλό και εύχρηστο JS script και HTML combo που θα μετατρέψει το S3 bucket directory listing σου σε μια μοντέρνα, καλαίσθητη λίστα αρχείων και φακέλων με ωραίο UI και λειτουργία αναζήτησης.

Πρώτα απ' όλα, ας μιλήσουμε για τη χρήση. Για να χρησιμοποιήσεις το S3-Directory-Listing, το μόνο που χρειάζεται να κάνεις είναι να κάνεις clone το repository ή να αντιγράψεις τα περιεχόμενα των dark-mode.css, s3.js και index.html στο S3 bucket σου. Στη συνέχεια, ενημέρωσε τη μεταβλητή bucketName στο app.js με το όνομα του bucket σου και ρύθμισε τις παραμέτρους του S3 bucket σου. Πρόσβαση στο αρχείο index.html στον browser σου και voilà! Τώρα έχεις ένα φανταχτερό S3 directory listing. Είναι τόσο απλό!

Αλλά τι γίνεται με τις ρυθμίσεις του S3 bucket; Για να λειτουργήσει αυτή η μαγεία, πρέπει να ρυθμίσεις σωστά τις παραμέτρους του S3 bucket σου. Πρώτα, βεβαιώσου ότι το S3 bucket σου είναι δημόσια προσβάσιμο ή τουλάχιστον προσβάσιμο στους χρήστες με τους οποίους θέλεις να μοιραστείς το directory listing. Στη συνέχεια, όρισε το bucket policy για να επιτρέπει δημόσια ανάγνωση των αντικειμένων σου. Χρησιμοποίησε το παρακάτω policy, αντικαθιστώντας το <your-bucket-name> με το πραγματικό όνομα του bucket σου:

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

Αντικατέστησε το <your-ip-address> με την επιθυμητή διεύθυνση IP ή ένα CIDR block για να περιορίσεις την πρόσβαση σε συγκεκριμένες διευθύνσεις IP. Τέλος, ενεργοποίησε το static website hosting για το bucket σου και σημείωσε το static website endpoint του bucket.

Τώρα που οι ρυθμίσεις του S3 bucket σου έχουν διαμορφωθεί, μπορείς να απολαύσεις το ολοκαίνουργιο, φανταχτερό S3 directory listing σου! Μπορείς επίσης να προσαρμόσεις τον αριθμό των στοιχείων που εμφανίζονται ανά σελίδα τροποποιώντας τη μεταβλητή itemsPerPage στο s3.js.

Ενημέρωσε τις ρυθμίσεις Cross-origin resource sharing (CORS) όπως παρακάτω.

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

Το S3-Directory-Listing δεν είναι μόνο εύκολο στη χρήση, αλλά είναι επίσης εξαιρετικά προσαρμόσιμο. Μπορείς να τροποποιήσεις το script και το HTML για να ταιριάζουν στις συγκεκριμένες ανάγκες και προτιμήσεις σου. Και αν αντιμετωπίσεις προβλήματα ή έχεις ερωτήσεις, μπορείς να πας στο GitHub repo και να ενημερώσεις τους δημιουργούς.

Συμπερασματικά, το S3-Directory-Listing αλλάζει το παιχνίδι για όποιον θέλει να ομορφύνει το S3 bucket directory listing του. Είναι εύκολο στη χρήση, εξαιρετικά προσαρμόσιμο και το καλύτερο απ' όλα, είναι δωρεάν! Γιατί λοιπόν να συμβιβαστείς με ένα βαρετό, απλό S3 directory listing όταν μπορείς να έχεις ένα μοντέρνο, φιλικό προς τον χρήστη;

Μπορείς επίσης να το χρησιμοποιήσεις σε Dark Mode! Ορίστε το demo: https://s3-directory-listing.s3.amazonaws.com/index.html

Μπορείς να βρεις το καλά τεκμηριωμένο README και τον πηγαίο κώδικα στο Github Repository: https://github.com/flightlesstux/S3-Directory-Listing

Καλή απαρίθμηση!