aws s3 bucket browser

AWS S3級瀏覽器

單個HTML文件瀏覽AWS S3存儲桶

演示

特徵

• 兼容提供商：
• 在表視圖中列出所有文件
• 將和顯示/在鑰匙中作為文件夾進行處理 /顯示
• 渲染標記文件的預覽
• 顯示ios設備上的manifest.plist的Install按鈕

安裝

自我託管

點擊我

• 只需下載index.html並將其上傳到您的水桶即可。
  • 在index.html中調整配置，例如

     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)
    } 

• 配x確保存儲桶許可

  • 轉到https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
  • 通過Access Control List或Bucket Policy授予公共閱讀許可
    • 訪問控制列表
      • 為Everyone啟用List objects
    • 存儲措施政策

      {
          "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>/* "
                  ]
              }
          ]
      }

• 配x確保水桶箱

  • 根據您的設置，您可能需要確保遵循CORS Configuration
  • 轉到https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
  • 通過以下CORS Configuration授予交叉來源訪問，請替換http://www.example.com ，通過您的存儲桶瀏覽器index.html的地址替換
    • 例如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
      }
    ]

• 在瀏覽器中打開<YOUR BUCKET URL>/index.html 。

託管

點擊我

• 配x確保存儲桶許可

  • 見自我託管

• 配x確保水桶箱

  • 見自我託管
• 打開託管index.html在您的瀏覽器中，並提供存儲桶URL作為bucket請求參數
  • ${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}
  • 例如https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org

CloudFront設置

點擊我

如果您在S3存儲桶前面使用CloudFront，請確保遵循雲層設置。

• 允許/緩存的HTTP方法： GET ， HEAD ， OPTIONS
• 根據選定的標頭緩存： Whitelist
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin
• 查詢字符串轉發和緩存： Forward all

IBM雲對象存儲設置

點擊我

IBM雲對象存儲僅支持虛擬主機式地址，即https://<bucket-name>s3-web.<region>.cloud-object-storage.appdomain.cloud/ for靜態網站託管。否則，請按照本教程中的說明進行配置。此外，您可能需要為存儲桶配置CORS。

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