Amazon Web Services ブログ

外部ユーザが安全かつ直接的に Amazon S3 へファイルをアップロードできるようにする方法

このブログは 2022 年 3 月 24 日に Anderson Hiraoka (Solutions Architect) と、Rafael Koike (Principal Solutions Architect) によって執筆された内容を日本語化した物です。原文はこちらを参照して下さい。

企業では、ファイルや画像などのデジタル資産をリポジトリに保存することが求められることが多くあります。多くの場合、これらのファイルのソースは、社内システムに接続されていないパートナーまたは個人であり、ファイルをアップロードするためには、企業の認証が必要となります。お客様は従来、ファイルのアップロードを処理するためにサーバーを使用していましたが、大量のネットワーク I/O とコンピューティングリソースが使用される可能性があります。さらに、アプリケーションの規模が大きくなるにつれて、ファイルアップロードのパフォーマンスを維持することが非常に困難になる場合があります。これらの要件を満たすために、企業はデジタル資産を保存および配布するためのコストと、時間のかかるインフラストラクチャを維持することが多く、代替セットアップに比べて安全性が低く、コストが高くなる可能性があります。

この記事では、AWS Amplify を使用して Amazon Simple Storage Service (Amazon S3) へ直接複数のファイルを安全にアップロードするための、最新の Web アプリケーションを構築する方法を紹介します。このソリューションは、外部ユーザーがストレージリソースに直接アクセスすることなく、Amazon S3 にファイルをアップロードすることを可能にする安全な方法を提供します。さらに、コスト効率の高い完全なサーバーレスアーキテクチャが活用できるため、Amazon S3 のスケーラビリティと信頼性を活かしつつ、サーバー管理の運用負荷を軽減できます。

ソリューションの概要

AWS Amplify は、フロントエンドのウェブおよびモバイル開発者が AWS 上にフルスタックアプリケーションを迅速かつ簡単に構築できるように目的に応じたツールと機能のセットで、ユースケースの進化に応じて幅広い AWS サービスを柔軟に活用できます。このサービスにより、基盤となるインフラストラクチャを管理することなく、誰でも簡単に Web アプリケーションやモバイルアプリケーションを構築できます。AWS Amplify フレームワークは、ストレージ、認証、GraphQL など多くのライブラリを提供します。

このソリューションでは、コンテンツ配信に Amazon CloudFront を使用し、ブラウザから Amazon Cognito を通じて Web アプリケーションのユーザーを認証し、ストレージコンポーネントである Amazon S3 バケットにファイルをアップロードできるようにします。このソリューションのデプロイを簡素化するために、 AWS Cloud9 を使用しています。


図 1: AWS Amplify を使用してブラウザから Amazon S3 にファイルをアップロード

ソリューションのワークフローとアーキテクチャは、以下のように動作します。

  1. Amazon S3 および CloudFront にホストされた静的ページを持つ AWS Amplify Web アプリケーションは、HTTPS プロトコルを介してコンテンツを提供します。
  2. Amazon Cognito がユーザー認証を提供します。
  3. 認証後、ユーザーは Amazon S3 にファイルをアップロードすることができます。

前提条件

  1. AWS アカウント
  2. 8 GiB のメモリと 、2 つの vCPU、 20 GB の Amazon EBS を備えた AWS Cloud9 IDE インスタンス
  3. AWS Amplify CLI

環境セットアップ

このソリューションは、AWS リージョンの us-east-1 にデプロイされます。別のリージョンで実行する場合は、Amazon Cognito と Amazon S3 のサービスが利用可能であることを確認してください。このステップでは、新しい AWS Cloud9 IDE を作成する方法と、その中でソリューションを構築する方法を説明します。

注意： AWS Cloud9 IDE インスタンスは、ソリューションのデプロイに一度だけ使用します。30 分間アイドル状態になると、自動的にオフになります。

開始するには、まず AWS アカウントにサインインする必要があります。AWS Cloud9 IDE  を作成するためにに、以下の手順を実行します。

  1. AWS マネジメントコンソールで、AWS Cloud9 を検索します。
  2. 「Create environment」を選択します。

図 2: AWS Cloud9 環境の作成

  1. 環境名（Name）と説明（Description）を入力し、「Next step」ボタンをクリックします。
  2. 次の画面に示すように環境を構成します。

図 3: AWS Cloud9 環境の設定

  1. 残りはすべてデフォルトのままとし、「Next step」ボタンをクリックします。
  2. 概要を確認し、「Create environment」をクリックします。環境が作成されるまで数分かかる場合があります。

環境が作成されると、コマンドラインターミナルを備えた AWS Cloud9 のウェルカム画面が表示されます。

図 4: AWS Cloud9 ターミナル

AWS Cloud9 インスタンスボリュームの増加

一般的な AWS Cloud9 インスタンスには 10 GB のディスク容量があり、その内 8 GB は実行中の OS によって消費されます。これではアプリケーションをダウンロードしてビルドするには不十分です。アプリケーションのビルド要件を満たすようにするため、Amazon EBS ボリュームを 20 GB に拡張します。

  1. 次のコマンドをコピーして、AWS Cloud9 ターミナルに貼り付けて実行します。
curl https://raw.githubusercontent.com/aws-samples/s3uploader-ui/main/cloud9_resize.sh > cloud9_resize.sh

図5:ボリュームを拡張するためのスクリプトのダウンロード

  1. AWS Cloud9 ターミナルで次のコマンドにてスクリプトを実行します。これにより、ボリュームが 20 GB に拡張されます。
sh cloud9_resize.sh 20
  1. AWS Cloud9 インスタンスを再起動して、ボリュームの拡張を有効にします。
sudo reboot
  1. 数秒経過後、再起動により自動的にCloud9インスタンスに再接続されます。接続後に、次のコマンドで空き領域を確認します。
df -h

図 6: コマンドの出力

注意：インスタンスタイプによっては、/dev/nvme0n1p1 などの別のディスク名が表示される場合があります。

Web アプリケーションのビルド

このソリューションを実装するには、以下のステップを実行します。

  1. AWS Cloud9 IDE を開き、以下のコマンドをコピーして AWS Cloud9 ターミナルに貼り付け、デフォルトの AWS リージョンを指定する設定ファイルを追加してください。
cat <<END > ~/.aws/config
[default]
region=us-east-1
END
  1. AWS Cloud9 ターミナルで以下のコマンドを実行して、AWS Amplify アプリケーションを作成します。
git clone https://github.com/aws-samples/s3uploader-ui.git

アプリを作成すると、以下の図のようなフォルダ構造が作成されます。

図 7: AWS Cloud9 IDE のフォルダ構造

  1. AWS Amplify CLI をインストールして設定します。

注意：このコマンドは、アプリディレクトリのルートから実行することをお勧めします。この例では、”s3-uploader-ui” となります。次の手順で「npm WARN deprecated」のような非推奨を示す警告メッセージが表示された場合は、無視してください。もし、「(node:19991) [DEP0128] DeprecationWarning: Invalid ‘main’,」というメッセージが表示された場合は、無視して Enter キーを押し、続行してください。

cd s3uploader-ui

npm install -g @aws-amplify/cli
  1. 次のコマンドを入力して、AWS Amplify CLI がインストールされていることを確認します。

注意：インスタンスタイプによっては、異なるバージョンが表示される場合があります。

which amplify
出力例: ~/.nvm/versions/node/v16.13.1/bin/amplify
  1. プロジェクトを初期化します。
    AWS Cloud9 ターミナルの アプリケーションディレクトリ内で、以下のコマンドを実行します。
amplify init
    • 以下のパラメータを選択します。4つともデフォルトのエンターで構いません。
      • 「Enter a name for the project: s3-uploader-ui」
        ⇒ 任意の名前も選択できます。そのままエンターキーを押してください。
      • 「Initialize the project with the above configuration:」
        ⇒ Yesを入力し、エンターキーを押してください。
      • 「Select the authentication method you want to use:」
        ⇒ AWS profile を選択し、エンターキーを押してください。
      • 「Please choose the profile you want to use: 」
        ⇒ default を選択し、エンターキーを押してください。

図8: Amplify init の応答画面

Web アプリケーションへ認証を追加

amplify add auth コマンドを使用して、AWS Amplify アプリケーションに Amazon Cognito 認証を追加します。

  1. AWS Cloud9 ターミナルのアプリケーションディレクトリ内で、次のコマンドを入力します。
amplify add auth
  1. 次のパラメータを選択します。
    • 「Do you want to use the default authentication and security configuration?」
      ⇒ Default Configuration を選択し、エンターキーを押してください。
    • 「How do you want users to be able to sign in?」
      ⇒ Username を選択し、エンターキーを押してください。
  1. 「Do you want to configure advanced settings?」
    ⇒ No, I am done を選択し、エンターキーを押してください。

図9:amplify add auth の応答画面

Web アプリケーションへストレージリソースを追加

この手順では、認証されたユーザーがファイルをアップロードできるようにバケットを作成します。

  1. AWS Cloud9 ターミナルのアプリケーションディレクトリ内で、次のコマンドを入力します。
    amplify add storage
  2. 次のパラメータを選択します。
    • 「Select from one of the below mentioned services」
      ⇒ Content (Images, audio, video, etc.) を選択し、エンターキーを押してください
  1. 「Provide a friendly name for your resource that will be used to label this category in the project」
    ⇒ 任意の名前にすることができます（例： s35e505e53）。デフォルト値で構わない場合は、そのままエンターキーを押してください。
  2. 「Provide bucket name」
    ⇒ ユーザーがファイルをアップロードするバケットです。たとえば、s3uploaderxxxxx のように指定します。名前は一意である必要があります。提案されたデフォルトのバケット名でも構わない場合はそのままエンターキーを押してください。後で使用するため、このバケット名をメモしておいてください。
    • 「Who should have access: 」
      ⇒ Auth users only を選択し、エンターキーを押してください。
    • 「What kind of access do you want for Authenticated users?」
      ⇒ create/update を選択した状態でスペースバーを押してください。その後、エンターキーを押してください。
    • 「Do you want to add Lambda Trigger for your S3 Bucket? 」
      ⇒ No を選択し、エンターキーを押してください。

図10:amplify add storage の応答画面

アプリケーションの Web ホスティングを追加

amplify hosting add コマンドで Web ホスティングを追加し、アプリケーションの静的コンテンツを格納するバケットを作成します。

  1. AWS Cloud9 ターミナルのアプリケーションディレクトリ内で、次のコマンドを入力します。
    amplify hosting add
  2. 次のパラメータを選択します。
    • 「Select the plugin module to execute」
      ⇒ Amazon CloudFront and S3 を選択し、エンターキーを押してください。
    • 「Select the environment setup」
      ⇒ PROD (S3 with CloudFront using HTTP) を選択し、エンターキーを押してください。
    • 「hosting bucket name」
      ⇒ s3uploaderui-2022<乱数>-hostingbucket を選択します。このバケット名も一意である必要があります。提案されたデフォルトのバケット名でも構わない場合はそのままエンターキーを押してください。これは、アプリケーションの静的 Web ページをホストするために自動的に作成される別のバケットです。

補足：PROD を選択すると、HTTPS  経由でアプリケーションへの安全なアクセスを提供する CloudFront ディストリビューションが作成されます。

図11: amplify hosting add の応答画面

アプリケーションの初期化に必要なすべてのモジュールと依存関係をインストールします。AWS Cloud9 ターミナルのアプリケーションディレクトリ内で、次のコマンドを入力します。

npm install

図 12: rpm installコマンドの応答画面

rpm install の手順では、アプリケーションに必要なものを確認しました。選択したリソースを AWS で作成するには、amplify pushコマンドを使用します。AWS Cloud9 ターミナルのアプリケーションディレクトリ内で、次のコマンドを入力します。

amplify push

「Are you sure you want to continue? 」
⇒ Yes を入力し、エンターキーを押してください。

注意：リソースの作成には数分かかる場合があります


図 13: Amplify pushコマンドの応答画面

アプリケーションを公開し、一般に利用できるようにします。この例では、フロントエンドコンポーネントを Amazon S3 に公開します。AWS Cloud9 のターミナルのアプリケーションディレクトリ内で、以下のコマンドを実行してください。

amplify publish

注意：このコマンドの最後に作成される CloudFront の URL をメモしておいてください。この URL は、アプリケーションにアクセスするために使用します。

図14:Amplfy publish コマンドの応答画面

アプリケーションのテスト

1. ブラウザの URL 欄に、直前に実行した amplify publish コマンドに出力された CloudFront の URL を記入して、サインイン画面に移動してください。

図15:サインイン画面

2. （オプション）Create Account タブの表示させたい場合は、本手順を実施してください。
アプリケーションの URL に移動すると、アプリケーションにサインインする画面が表示されます。セキュリティ上の理由から、ユーザー登録は非表示にしています。以下の画面のように、Create Account タブを全員に表示させたい場合は、以下の 2.1 ～ 2.2 の手順を実施してください。Create Account タブを表示しなくてもよい場合は、手順３（認証済みユーザーを手動で作成します）に進んでください。

図 16: Create Account タブが表示された画面

2.1. AWS Cloud9 コンソールの左ペインより、s3-uploader-ui/src/ に移動し、 App.css ファイルを開きます。

  • ファイルで、次の画面に示すように 15 行目に移動します。

図 17:  Create Account タブボタン表示方法

2.2. 行の先頭と末尾のスラッシュを削除します。以下のようになります。

*This CSS hide the signUp tab
  • ファイルを保存し、次のコマンドを使用して「アカウントの作成」タブを表示します。
amplify push
amplify publish

アプリケーションの URL に戻り、Create Account タブが表示されるかどうかを確認します。


図 18: Create Account タブ表示を確認

3. 認証済みユーザーを手動で作成します。
サインインインターフェイスだけのアプリケーションにしたい場合は、AWS マネジメントコンソールを使用してユーザーを追加できます。これを行うには、以下の手順を実行してください。

  • Amazon Cognito コンソールに移動し、「ユーザープールの管理」を選択します。AWS Amplify によって作成されたユーザープールを選択します。S3uploadxxxxxxx_userpool_xxx-devで始まる名前で作成されているはずです。
  • 「一般設定」で、「ユーザーとグループ」を選択します。
  • 「ユーザー」 タブで、「ユーザーの作成」を選択します。
  • ユーザー名、一時パスワード、および電子メールを入力します。「電話番号を確認済みとしてマークする」の横にあるチェックボックスをオフにします。


図 19: Amazon Cognito コンソールからユーザー作成

4. Web アプリケーションにサインインします。
アプリケーションに新しいユーザーを登録したので、先ほど作成した認証情報を使ってサインインします。アプリケーションにサインインすると、ユーザーインターフェイスに Choose file[s]  ボタンが表示されます。このボタンを選択し、アップロードするファイルを 1 つ、または複数選択します。ファイルを選択したら、Upload ボタンをクリックして、それらのファイルを Amazon S3 に送信します。

図 20: 複数ファイルを選択した Web アプリケーション画面

補足：フロントエンドは、サイズやタイプなどのファイル検証を行いませんが、Amazon S3 にアップロードする前にデータの特別な検証を行うよう、ソリューションをカスタマイズすることが可能です。

アップロードしたファイルが Amazon S3 バケットに保存されているかどうかを検証するには、まず AWS マネジメントコンソールに移動し、Amazon S3 サービスを選択します。ファイルをホストするために AWS Amplify アプリケーションによって作成されたバケットを選択します。AWS Amplify アプリケーションで作成した、ファイルをホストするバケットを選択します。「Web アプリケーションへストレージリソースを追加」の手順で作成したバケットです。

図 21: S3 オブジェクトを示す AWS マネジメントコンソール

注意：バケット名をメモするを忘れた場合は、AWS Amplify が生成した CloudFormation の出力でパケット名を確認することができます。

  • AWS CloudFormation コンソールに移動します。左ペインよりスタックを選択します。
  • 以下の画面のようにネストされたビューを有効にします。

図22:スタックのネスト表示選択

  • プロジェクト用に 4 つのスタックが作成されています。それらすべてamplifyから始まる同じイニシャルを持っています。その中から名前に storages が含まれているものを選択します。たとえば、amplify-s3uploaderui-dev-151739-storages3429e…  などです。
  • 選択したスタックの出力タブに移動します。スタック内の BucketName 値が、ファイルがアップロードされるバケット名を示します。
  • バケット名が確認できたので、AWS マネジメントコンソール の Amazon S3 バケットにアクセスして、アップロードされたファイルを確認します。

図 23: スタックよりバケット名確認

クリーンアップ

このチュートリアルソリューションが終了したので、もう使用しないのであれば、AWS Amplify アプリケーションを削除することができます。

注意：この操作は元に戻せません。プロジェクトが削除されると、復元できなくなります。再び必要になった場合は、再デプロイする必要があります。

  1. AWS からアプリケーションを削除するためには、ターミナルから以下のコマンドを実行します。
amplify delete

図 24: amplify delete コマンドの応答画面

  1. 「Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) 」
    ⇒ y を入力し、エンターキーを押してください。作成した Amplify アプリケーションが削除されます。
  2. 作成した AWS Cloud9 インスタンスを削除します。AWS Cloud9 コンソールに移動し、作成した IDE を選択し、Delete を実施してください。

まとめ

この記事では、外部ユーザーによる Amazon S3 へのファイルアップロードを提供するサーバーレスアプリケーション構築のデモを紹介しました。AWS Amplify と、Amazon S3、Amazon CloudFront、Amazon Cognito といったいくつかの AWS サービスを使用するだけで、Amazon S3 へ安全にファイルを保存する Web アプリケーションを簡単に構築することができます。このソリューションでは、Amazon Cognito でホストされた UI を使用して構築されたユーザーのサインインとサインアップのための認証されたアクセスを提供します。

このソリューションにより、メンテナンスとスケーラビリティの問題を、迅速かつ安全な方法でマネージドサービスに置き換えることができます。外部ユーザーにバケットへのアクセスを提供することなく、Amazon S3 バケットにファイルを取得するための簡単で安全な方法を提供することができます。これにより、セキュリティ侵害の脅威を低減しながら、外部データを使用してビジネス目標を推進したり、ビジネス要求に応じることが可能になります。

翻訳はプロフェッショナルサービス本部の葉山が担当しました。