今回は、ユーザーから提供されるFileに対して何かしらの処理を行うことを想定したWeb Serviceの実現の為、File Upload機能を実装します。使うComponentは、今までとほぼ同じく、Cloud側のFile ServiceにS3、ユーザー認証にCognito、Client側はAmplify、Reactを使い、最後にDropZoneによるDrag&Dropを追加します。これにより、Cognitoユーザー認証された 特定多数のUserに対し、S3 BucketにFileをUploadできる機能を実現します。
まずは、File Upload用のS3 Bucketを準備します。Management ConsoleからS3を開きます。前回作成したBucketが見えると思います。「Bucketを作成する」をクリックしてBucketを作成します。 その後のStepは、
1. 「名前とリージョン」タブでバケット名を入力します。バケット名は、FQDN形式で入力します。AWS全体で重複のない名前を指定する必要があります。今回は、”upload.hacya.com”としました。リージョンは”アジアパシフィック(東京)”を選んでおきましょう。
2. 「オプションの設定」タブでは、タグを付けておきましょう。他はデフォルトのままで良いです。
3. 「アクセス許可の設定」タブは、デフォルトのままで良いです。今回は認証されたユーザーにのみ、中身を公開します。
4. 「確認」タブで、内容を確認して「バケットを作成」ボタンをクリックしてBucketを作成します。
作成したBucketのPropertyを見ておきましょう。作成したBucketの左側のチェックボックスをクリックしてチェックを付けると、右側にPop-up Windowが開きPropertyが表示されます。Pop-up Windowsの上の方の「バケットARNをコピーする」をクリックしてARNをクリップボードにコピーし、テキストエディターなどに貼り付け、バケットARNを書き留めておきます。あとで、Policyを作成するときに使います。
次に、作成したBucketにCORSを設定します。CORSは、Cross-Origin Resource Sharingの略で、通常ブラウザは異なるドメインからのデータを読み込めないように設定されています。CORSを設定することで、ブラウザが異なるドメインのデータを読み込めるようにすることができます。例えば、local環境でテストする場合、ReactのApplicationのDefaultでは、http://localhost:3000がOriginとなり、そこからS3のデータを参照する際、例えば東京リージョンのS3のURL、https://s3-ap-northeast-1.amazonaws.comは異なるドメインという事になります。
作成したBucketをクリックして、「アクセス権限」タブをクリック、「CORSの設定」をクリックします。 CORS 構成エディター に、下記の設定を入力し、「保存」をクリックします。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
これで、S3の設定は完了です。