الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

متصفح دلو AWS S3

-

ملف HTML واحد لتصفح دلاء AWS S3

العرض التوضيحي

سمات

  • مقدمي الخدمات المتوافقون:
  • سرد جميع الملفات في عرض الجدول
  • علاج وعرض / في مفاتيح كمجلات
  • عرض المعاينة لملفات التخفيض
  • إظهار زر Install لـ manifest.plist على أجهزة iOS

تثبيت

مستضافة ذاتي

انقر لي
  • فقط قم بتنزيل 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)
}
  • ️ ضمان أذونات دلو
    • انتقل إلى https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
    • منح إذن قراءة عامة عن طريق Access Control List أو Bucket Policy
      • قائمة التحكم في الوصول
        • تمكين List objects Everyone
      • سياسة دلو 
        {
    "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>/* "
            ]
        }
    ]
}
  • ️ ضمان دلو كورس
    • اعتمادًا على الإعداد الخاص بك ، قد تحتاج إلى التأكد من CORS Configuration التالي
    • انتقل إلى https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
    • منحة الوصول إلى أصل Cross Cross باتباع CORS Configuration ، استبدل http://www.example.com بواسطة عنوانك من Bucket Browser 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 في متصفحك.

استضاف

انقر لي
  • ️ ضمان أذونات دلو
    • انظر مستضيف الذات
  • ️ ضمان دلو كورس
    • انظر مستضيف الذات
  • افتح index.html المستضافة في متصفحك وقم بتوفير عنوان URL لجروح كمعلمة طلب bucket
    • ${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}
    • eg https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org

CloudFront Setup

انقر لي

إذا كنت تستخدم CloudFront أمام دلو S3 ، تأكد من اتباع إعدادات CloudFront.

  • طرق HTTP المسموح بها/المخزنة مؤقتًا: GET ، HEAD ، OPTIONS
  • مخزنة مؤقتًا بناءً على الرؤوس المختارة: Whitelist
    • Access-Control-Request-Headers
    • Access-Control-Request-Method
    • Origin
  • إعادة توجيه سلسلة الاستعلام والتخزين المؤقت: Forward all

إعداد تخزين كائن Cloud IBM

انقر لي

يدعم تخزين كائن Cloud IBM فقط عنونة على غرار المضيف الظاهري ، أي https://<bucket-name>s3-web.<region>.cloud-object-storage.appdomain.cloud/ لاستضافة موقع الويب الثابت. بخلاف ذلك ، اتبع الإرشادات الواردة في هذا البرنامج التعليمي لتكوين دلوتك. بالإضافة إلى ذلك ، قد تحتاج إلى تكوين CORS للدلو الخاص بك. 

< CORSConfiguration >
  < CORSRule >
      < AllowedOrigin >*</ AllowedOrigin >
      < AllowedMethod >GET</ AllowedMethod >
      < AllowedHeader >*</ AllowedHeader >
  </ CORSRule >
</ CORSConfiguration >
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل