Guides

S3のインテグレーション

S3にファイルをアップロードします。

S3の設定

S3 IAMの新規ユーザーの作成

IAMに移動し、新規ユーザーを作成して、名前をretool-s3-uploaderとします。「Programmatic access」のみを有効にします。

2410

IAMユーザーを作成し、アクセス・タイプを設定します

「next」をクリックして、アカウントにアクセス許可を付与します。最も簡単なのはS3への完全なアクセス許可を付与することですが、必要に応じてアクセス許可をさらに制限することもできます。新規ポリシーを作成して、そのポリシーを新規ユーザーにアタッチする必要があります。

📘

IAMのアクセス許可のベスト・プラクティス

RetoolでS3を使用するうえで最も簡単なのは、RetoolにS3への完全なアクセス許可を付与することですが、必要に応じてバケットへのアクセスを制限するのがベスト・プラクティスです。

以下は、実効性のあるJSON IAMポリシーの例です。YOUR_BUCKET_NAME_HERE変数だけでなく、YOUR_STATEMENT_ID変数も変更する必要があります。YOUR_BUCKET_NAME_HERE/*とYOUR_BUCKET_NAME_HEREはどちらも必要なので残しておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetBucketAcl",
                "s3:GetBucketCORS",
                "s3:GetBucketLocation",
                "s3:GetBucketLogging",
                "s3:GetBucketNotification",
                "s3:GetBucketPolicy",
                "s3:GetBucketWebsite",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:GetObjectVersion",
                "s3:GetObjectVersionAcl",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:PutObjectTagging",
                "s3:PutObjectVersionAcl",
                "s3:PutObjectVersionTagging"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME",
                "arn:aws:s3:::BUCKET_NAME/*"
            ]
        }
    ]
}

📘

ファイルのアップロードに最低限必要な許可

RetoolでS3にファイルをアップロードするだけでも、以下のアクションが必要です。

            "s3:GetBucketLocation"
            "s3:PutObject"

CORSの設定

ブラウザーから直接アップロードするため、CORS(クロス・オリジン・リソース共有)を設定する必要があります。S3バケットを開き、Permissionsタブをクリックして、CORS configurationをクリックしてから以下のJSONをペーストすると、RetoolがブラウザーからS3バケットに直接アップロードできるようになります。

🚧

S3コンソールでのCORSの設定

S3コンソールでCORSを設定する場合、JSONを使用してCORSの設定を作成する必要があります。新しいS3コンソールではXML CORSの設定をサポートしていません。

[
  {
    "AllowedOrigins": [
    "https://*.retool.com"
    ],
    "AllowedMethods": [
    "PUT",
    "POST",
    "DELETE"
    ],
    "AllowedHeaders": ["*"]
  },
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"]
  }
]

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://*.retool.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

これで終了です。

2175

RetoolからアップロードできるようにCORSを設定します

Retoolへの追加

Retoolで新規リソースを作成し、リソース・タイプとしてAmazon S3を選択します。IAMユーザー用に生成されたアクセス・キーとシークレット、およびS3バケット名とデフォルトACLを入力します。Create resourceを押します。

1768

S3へのファイルのアップロード

S3へのファイルのアップロード方法についてはこちらを参照してください。

S3でのファイルの検索とダウンロード

S3ボタンに加えて、設定済みのS3リソースをデータソースとして使用することができます。

S3バケット内のファイルのフィルタリング

クエリー・エディターで設定したS3リソースを選択します。デフォルト設定では、バケットからすべてのファイルが読み出されます。接頭辞によるファイルのフィルタリングも設定できます。以下の例では、テキスト入力によりファイルをフィルタしてからファイル一覧をテーブルに表示しています。

2604

S3からのファイルのダウンロード

先ほどの例の範囲を拡大して、ファイルを選択してからボタンをクリックし、選択したファイルをダウンロードできるようにしましょう。以下のようになります。

2594

これで、ユーザーが「Download S3 File」ボタンをクリックすると、buttonTriggerクエリーが実行され、S3からファイルが読み出されてダウンロードされるようになります。

署名付きURLを作成してファイルをダウンロード

ファイルをただダウンロードするのではなく、他の人がS3バケット内のファイルをダウンロードできるリンクを作成して、そのリンクが60秒後に切れるようにするにはどうすればよいでしょうか。

これには、RetoolのGenerate a signed url機能を使用します。以下のようにクエリーを設定してみてください。Expires: 60はURLが60秒後に無効になることを意味します。これは必要に応じて延長することができます。

2050

Saveを押した後、上記クエリーで作成したURLを表示する新規テキスト・コンポーネントを作成します。

2028

これで、テーブルでファイルを選択すると、ファイルのダウンロードに使用できる署名付きURLをアプリが作成するようになります。

Updated almost 4 years ago