S3への写真のアップロード
イメージをS3にアップロードして、そのURLをAPIに保存するツールを作成します
私たちは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
の取得
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へのイメージのアップロードとデータベースの編集に関して、同僚に面倒な作業を頼まれたくない場合、同僚にこのツールへのリンクを送信します。同僚に特定の権限を付与している場合、同僚はツールの編集やクエリーの変更を行うことはできません。実行できるのは、作成したツールを使用することだけです。数分間の作業とは、悪くないですね。
Updated over 3 years ago