プロパティ名	説明	Type
`s3AccessKeyId`	S3アクセス・キーIDです。	`string`
`s3SecretAccessKey`	S3アクセス・キー・シークレットです。	`string`
`s3Region`	S3バケットのリージョンです。例えば、`us-west-1`です。	`string`
`s3BucketName`	S3バケットの名前です。例えば、`test-bucket`です。	`string`
`s3ACL`	アップロードされたファイルのACLです。例えば、`private`です。他の規定ACLについては、AWSのドキュメントを参照してください。	`string`

S3にアップロードするには、Retool用にS3 IAMユーザーを作成し、S3 CORS設定でRetoolのドメインをホワイトリストに登録する必要があります。

新規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 configurationをクリックしてから以下のXMLを貼り付けると、RetoolがブラウザーからS3バケットに直接アップロードできるようになります。

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

これで完成です。試してみてください。