aws s3 bucket browserのダウンロード-AWS aws s3 bucket browserソースコードダウンロード

aws s3 bucket browser

ウェブサイトデータ

3.1.2

ダウンロード

AWS S3バケットブラウザ

AWS S3バケットを閲覧する単一のHTMLファイル

デモ

特徴

互換性のあるプロバイダー：
テーブルビューにすべてのファイルをリストします
/をフォルダーとして扱い、表示します
マークダウンファイルのプレビューをレンダリングします
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)
}

ショ和バケット許可を確保します

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

ショ和バケットCorsを確保します

セットアップに応じて、次のCORS Configurationを確認する必要がある場合があります
https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissionsにアクセスしてください

CORS Configurationに従ってクロスオリジンアクセスを付与するには、Bucket Browser index.htmlのアドレスでhttp://www.example.com置き換えます。

例： 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ブラウザで開きます。

ホスト

私をクリックしてください

ショ和バケット許可を確保します
- 自己ホストを参照してください
ショ和バケットCorsを確保します
- 自己ホストを参照してください
ブラウザでホストされたindex.htmlを開き、 bucketリクエストパラメーターとしてバケットURLを提供します
- ${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 bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org

クラウドフロントのセットアップ

私をクリックしてください

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/静的Webサイトホスティングの場合。それ以外の場合は、このチュートリアルの指示に従ってバケットを構成します。さらに、バケット用のCORを構成する必要がある場合があります。

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

拡大する

追加情報