aws s3 bucket browser

Navigateur de godet AWS S3

Fichier HTML unique pour parcourir les seaux AWS S3

Démo

Caractéristiques

• Fournisseurs compatibles:
• Liste tous les fichiers dans une vue de table
• Traiter et afficher / en touches comme dossiers
• Rendre l'aperçu pour les fichiers Markdown
• Afficher le bouton Install pour manifest.plist sur les appareils iOS

Installation

Auto-hébergé

Cliquez sur moi

• Téléchargez simplement index.html et téléchargez-le sur votre seau.
  • Ajustez la configuration dans index.html si nécessaire, par exemple

     const config = {
      title : 'Bucket Browser' , // prefix value with `HTML> ` to render as html, see subtitle
      subtitle : 'HTML>made with ♥ by <b><a href="https://qoo.monster">qoomon</a></b>' , // prefix value with `HTML> ` to render as html
      logo : 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png' ,
      favicon : 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico' ,
      primaryColor : '#167df0' ,
      
      bucketUrl : undefined ,
      // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
      //   This will only work for locations like these
      //   * https://s3.amazonaws.com/BUCKET-NAME/index.html
      //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html
      //   * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html
      //   * https://storage.googleapis.com/BUCKET-NAME/index.html
      //   * https://BUCKET-NAME.s3-web.BUCKET-REGION.cloud-object-storage.appdomain.cloud/
      //   * https://BUCKET-NAME.BUCKET-REGION.digitaloceanspaces.com
      //   * https://BUCKET-NAME.BUCKET-REGION.cdn.digitaloceanspaces.com
      // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
      //   * https://s3.amazonaws.com/BUCKET-NAME
      //   * https://storage.googleapis.com/BUCKET-NAME
      //   The URL should return an XML document with <ListBucketResult> as root element.
      rootPrefix : undefined , // e.g. 'subfolder/'
      keyExcludePatterns : [ / ^index.html$ / ] , // matches againt object key relative to rootPrefix
      pageSize : 50 ,
      
      bucketMaskUrl : undefined , 
      // If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
      //   bucketMaskUrl: 'https://example.org'
      //     => https://example.org/foo/bar.txt 
      //   bucketMaskUrl: document.location.origin
      //     => ${document.location.origin}/foo/bar.txt 
      
      defaultOrder : 'name-asc' // (name|size|dateModified)-(asc|desc)
    } 

• ️ Assurer les autorisations de seau

  • Accédez à https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
  • Accorder la lecture publique l'autorisation par Access Control List ou Bucket Policy
    • Liste de contrôle d'accès
      • Activer List objects pour Everyone
    • Politique de seau

      {
          "Version" : " 2012-10-17 " ,
          "Statement" : [
              {
                  "Sid" : " PublicRead " ,
                  "Principal" : " * " ,
                  "Effect" : " Allow " ,
                  "Action" : [
                      " s3:ListBucket " ,
                      " s3:GetObject "
                  ],
                  "Resource" : [
                      " arn:aws:s3:::<YOUR BUCKET NAME> " ,
                      " arn:aws:s3:::<YOUR BUCKET NAME>/* "
                  ]
              }
          ]
      }

• ️ Assurer les cors de seau

  • Selon votre configuration, vous devrez peut-être assurer CORS Configuration suivantes
  • Accédez à https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
  • Accès d'origine croisée de subventions en suivant CORS Configuration , remplacez http://www.example.com par votre adresse de Backet Browser index.html
    • par exemple http://example.s3-website-eu-central-1.amazonaws.com/index.html

    [
      {
          "AllowedHeaders" : [
              " * "
          ],
          "AllowedMethods" : [
              " GET "
          ],
          "AllowedOrigins" : [
              " http://www.example.com " ,
              " https://BUCKET-NAME.s3.amazonaws.com " ,
              " https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME " ,
          ],
          "ExposeHeaders" : [
              " x-amz-server-side-encryption " ,
              " x-amz-request-id " ,
              " x-amz-id-2 "
          ],
          "MaxAgeSeconds" : 3000
      }
    ]

• Ouvrez <YOUR BUCKET URL>/index.html dans votre navigateur.

Hébergé

Cliquez sur moi

• ️ Assurer les autorisations de seau

  • Voir auto-hébergé

• ️ Assurer les cors de seau

  • Voir auto-hébergé
• Ouvrez index.html Hosted.html dans votre navigateur et fournissez une URL du seau comme paramètre de demande bucket
  • ${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}
  • par exemple https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org

Configuration du cloudfront

Cliquez sur moi

Si vous utilisez CloudFront devant votre seau S3, assurez-vous que les paramètres CloudFront suivants.

• Méthodes HTTP autorisées / mises en cache: GET , HEAD , OPTIONS
• Mis en cache basée sur des en-têtes sélectionnés: Whitelist
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin
• Requête en remise des cordes et mise en cache: Forward all

Configuration du stockage d'objets Cloud IBM

Cliquez sur moi

Le stockage d'objets IBM Cloud prend uniquement en charge l'adressage de style hôte virtuel, c'est-à-dire https://<bucket-name>s3-web.<region>.cloud-object-storage.appdomain.cloud/ pour l'hébergement de site Web statique. Sinon, suivez les instructions de ce tutoriel pour configurer votre seau. De plus, vous devrez peut-être configurer CORS pour votre seau.

< CORSConfiguration >
  < CORSRule >
      < AllowedOrigin >*</ AllowedOrigin >
      < AllowedMethod >GET</ AllowedMethod >
      < AllowedHeader >*</ AllowedHeader >
  </ CORSRule >
</ CORSConfiguration >