Dev AWSome Day 2018の復習③ ～Amazon S3編～

前回に続き、「Dev AWSome Day 2018」の復習として、「Amazon S3」を勉強し直します。

AWSにおいてS3は基本中の基本ですが、今回はアクセス権限の設定がメインのお話となります。

S3について

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

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

バケットの作成

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

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

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

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

1. 先ほど作成したバケットを選択
2. 「アクセス権限」を選択
3. 「CORSの設定」ボタンをクリック
4. 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にもアクセス権限の設定をしてあげる必要があります。

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

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

1. マネージメントコンソールを開く
2. 「IAM」を選択
3. 「ロール」を選択
4. 先程確認したロールを探し、選択
   ※似た名前で「Unauth」となっている方ではないので注意
5. 「インラインポリシーの追加」を選択
6. 「JSON」タブを選択し、権限を入力
7. 「Review policy」ボタンをクリック
8. 名前を入力して、「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側の設定（どのユーザにどこに対してどういう許可を与えるか）があるようです。