S3への写真のアップロード

私たちはAmazonの社員で、製品である本のイメージをアップロードしようとしています。イメージをS3にアップロードして、そのURLをAPIに保存するツールを作成します。作業にかかる時間は、全部で5分です。

0. S3資格情報の設定

S3にこれをアップロードする前に、リソースとして追加する必要があります。手順は、S3のインテグレーションを参照してください。S3 IAMユーザーをRetool用に作成し、ドメインをS3 CORS設定に登録する必要があります。

S3 IAMユーザーの作成

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

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

以下に、動作しているJSON IAMのサンプル・ポリシーを示します。YOUR_STATEMENT_ID変数とYOUR_BUCKET_NAME_HERE変数を変更する必要があります。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/*"
            ]
        }
    ]
}

CORSの構成

ブラウザーから直接アップロードするため、CORS(クロス・オリジン・リソース共有)を構成する必要があります。S3バケットを開き、Permissionsタブをクリックしてから、CORS構成をクリックし、以下の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>

1. イメージのアップロード

右側からS3Uploaderをドラッグして、適切なバケットを選択しましょう。

その調子です。ボタンをクリックしてファイルをアップロードしてみましょう。ファイルのアップロード後、正常終了の通知が送信されます。.lastUploadedFileUrlはS3 URLになっていることが分かります。

データベースに残すために、URLをAPIにPOSTしましょう。

2. S3 URLの保存(パート1)

S3Uploaderの右側を見てください。After Uploadコールバックがあります。これをクリックして、新規クエリーを作成するように指示しましょう。

イメージを残す場合、APIにPOSTするだけです。非常に簡単です。

3. Productsの取得

実際に、イメージをProductなどの特定のデータベース・レコードにアタッチする場合があります。これを行うには、まず項目を取得する必要があります。以下のように、SQLクエリーを作成しましょう。

select * from products order by id;

「run」を押して、問題がなければ「save」を押しましょう。

その後、右側からTableをドラッグしましょう。最後のクエリーからデータが自動的に移入されます(この場合、select * from products order by idです)。

製品のテーブルが表示されています。データベースのimage_urlからイメージ自体をレンダリングしましょう。これを行うには、右側からTextコンポーネントをドラッグして、値を<img>タグになるように設定します。

<img src="{{table1.selectedRow.data.image_url}}" height="300" />

4. データベースへのS3 URLの保存(パート2)

Productsのテーブルができたので、イメージをそれぞれプレビューできます。image_urlを変更する準備ができました。以下のスクリーンショットのように、APIでPUTしましょう。

PUTの後に、新しいデータ(image_urlを含む)を取得するために、SQLクエリーをリフレッシュする必要があります。では、これを「On success, trigger these queries」セクションに追加しましょう。

これで終了です。イメージをアップロードすると、トリガーがコールされ、APIにPUTされます。正常終了すると、SQLクエリーが再読み込みされ、製品が再度取得されます。今度はimage_urlが更新されています。

5. 実際の使用

このツールの本番での稼働の準備が完了しました。S3へのイメージのアップロードとデータベースの編集に関して、同僚に面倒な作業を頼まれたくない場合、同僚にこのツールへのリンクを送信します。同僚に特定の権限を付与している場合、同僚はツールの編集やクエリーの変更を行うことはできません。実行できるのは、作成したツールを使用することだけです。数分間の作業とは、悪くないですね。