S3について

こちらは改めて説明する必要もないと思いますが、インターネット経由でアクセスできる非常にスケーラブルで耐久性の高いオブジェクトストレージになります。

今回は、認証済みのユーザのみがファイルを保存できるようにします。

バケットの作成

S3を利用するには、データ(以下、オブジェクトとします) を格納するバケットを作成します。

マネージメントコンソールを開く
「S3」を選択
「バケットを作成する」ボタンをクリック
「バケット名」を入力し、「作成」ボタンをクリック

バケットのCORS（Cross Origin Resource Sharing）設定

今回、公開用のWebアプリ側のコードをS3に置くため、そこから別のバケットにアクセスすることになります。
その許可の設定をCORSで行います。

先ほど作成したバケットを選択
「アクセス権限」を選択
「CORSの設定」ボタンをクリック
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>
        <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

アプリケーションでの設定

JavaScriptからS3への保存部分は以下のようになります。

前回修正した部分のうちの「Storage:」のところに、作成したバケット名を設定します。

Storage: {
  bucket: 'devawsome-photo-mine',   
  region: 'us-west-2'
}

あとは、実際にファイルを保存するコードを作成します。

// Task: S3 Upload
console.log("Define S3 Put Operation here.");
Storage.put(photokey, file, {
        level: 'private',
        contentType: contentType,
        metadata: {
            username: username,
            description: Base64.encode(this.state.desc)
        }
    })
    .then(result => {
        console.log(result);
        alert("Uploading succeeded");
    })
    .catch(err => {
        console.log(err);
        alert("Err: " + err);
    }

Cognitoでの設定

あとはCognitoにもアクセス権限の設定をしてあげる必要があります。

マネージメントコンソールを開く
「Cognito」を選択
「フェデレーテッドアイデンティティの管理」ボタンをクリック
作成したIDプールを選択
「IDプールの編集」を選択
認証されたロールの名前を確認

この確認した名前に対してS3バケットへのアクセス権限を与えます。

マネージメントコンソールを開く
「IAM」を選択
「ロール」を選択
先程確認したロールを探し、選択
※似た名前で「Unauth」となっている方ではないので注意
「インラインポリシーの追加」を選択
「JSON」タブを選択し、権限を入力
「Review policy」ボタンをクリック
名前を入力して、「Create poilcy」ボタンをクリック

設定する権限（JSON）は以下のような感じになります。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3put01",
            "Effect": "Allow",
            "Action": "s3:PutObject",
            "Resource": [
                "arn:aws:s3:::devawsome-photo-mine",
                "arn:aws:s3:::devawsome-photo-mine/*"
            ]
        }
    ]
}

まとめ

S3にアクセス権限を設定する手順を確認しました。
S3のバケット側の設定（どこからのアクセスに何を許可するのか）とCognito側の設定（どのユーザにどこに対してどういう許可を与えるか）があるようです。