Amplify+Vue の開発が爆速すぎて感動する日々です
今回はS3とCognitoの連携があまりに簡単に設定出来たので記事にしました

前提

Amplifyを利用している
フロントフレームワークは Vue.js

やりたかったこと

S3バケット内にあるコンテンツをCognitoユーザーのみ閲覧出来るようにする

署名付きURL

presigned_url
認証で許可されたユーザーにのみ発行される
一定期間のみ閲覧可能
発行されたURL自体は誰でもアクセス可能

amplifyのStorageを使う

amplifyでAuthを使用している場合、Storageとして追加したバケットは自動的に認証がかかる(便利!!)

Authの追加 ... $ amplify add auth
Storageの追加 ... $ amplify add storage

すでにあるS3バケットを使う

以下のようにバケット名とリージョン名を設定するだけ

main.js

import Amplify from 'aws-amplify';

Amplify.configure({
    Storage: {
        AWSS3: {
            bucket: 'バケット名',
            region: 'リージョン名',
        }
    }
});

※ パブリックアクセス設定はすべて オン

URLを取得する

バケット情報を設定したらあとは Storage.get() するだけ(超簡単!!)

import {Storage} from 'aws-amplify';

Storage.get("文書名", {expires: 有効期限(秒)})
  .then((re) => {
    //  re = 署名付きURL
  })

URLが取得出来ない場合

Storage.get() で認証エラーが返ってきてしまう場合以下を確認

Cognitoのauthロール

Authを追加すると、ロールがいくつか作成される
今回確認するのは、末尾が -authRole のロール
もう一方の -unauthRole は非認証状態のユーザーに対する権限

ポリシー名 CognitoUserS3Access のActionとResourceの設定を確認

[Action] ... S3:GetObject が許可されていればok
[Resource] ... 塗りつぶし部分が対象のバケット名であればok

取得したURLでアクセス出来ない

署名付きURLの取得には成功したが、アクセスするとブロックされる場合、
バケットポリシーでブロックされている または 対象の文書がない 可能性がある

署名付きURLは、
バケットと対象のリソースを示すキーをもとに自動生成された公開URLに、認証情報を付加しているだけ

つまり、URL発行時に バケットポリシー や キーとして指定したリソースの有無 は確認されない