タケユー・ウェブ日報

Ruby on Rails や Flutter といったWeb・モバイルアプリ技術を武器にお客様のビジネス立ち上げを支援する、タケユー・ウェブ株式会社の技術ブログです。

Amazon Cognito + AWS JavaScript SDKで作るサーバ不要のアップローダ

ずっと気になってたAmazon Cognitoを使ってみました。

Cognitoを使うと、アプリ側だけでAWSへのアクセス権を与えることができます。

これを利用して、サーバインスタンスなしにいろいろなことができるようになります。

ありがちな例ですが、今日はブラウザから直接S3にファイルをアップロードしてそのURLを表示する、というものを作ってみましたので、よろしければ参考にどうぞ。

7/21 追記

アップロードしたファイルをLambdaでDynamoDBに登録して、一覧表示できるようになりました。

デモ

http://browser-uploader-demo.s3-website-ap-northeast-1.amazonaws.com/

  • CognitoでS3へのアップロード権限を取得
    • AWS JS SDKでS3へ直接アップロード
  • S3へのアップロード時にLambdaファンクション実行
    • DynamoDBへファイルの情報を記録
  • CongnitoでDynamoDBへのScan権限を取得
    • アップロード済みファイルリストを表示

このURLもS3の静的ウェブサイトホスティング機能を使っているので、本当にサーバは不要です。

Cognitoは東京リージョンでは提供されていませんが、取得したCredentialはリージョン問わず使えるので特に問題ありません。

なお、S3のライフサイクル設定で数日後に自動で消えるようにしています。

ソースコード

takeyuweb/browser-uploader-demo · GitHub