Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

AWS Transfer Family web apps を使ってノーコードでS3のWebUIを作成する

はじめに

こんにちは、一史です。
暖かくなりベランダに出している金木犀が新芽を出してきました、春ですね。

さて、ストレージサービス間でファイル転送を実現するサービス、AWS Transfer Familyの新機能として、web appsというものがあります。
aws.amazon.com

この機能を使うことで、S3のWebUIをノーコードで作成することができるようになりました。
今回はこの新機能を用いて実際にWebUIを作成し、ユーザー単位のアクセス制御が行えるかを試していきます。

AWS Transfer Family web apps とは

AWS Transfer Familyは、マネージドなSFTP / FTPS / FTPサービスを提供するAWSのサービスです。
従来のAWS Transfer Familyは、クライアントソフトを用いないとファイルの操作ができませんでした。

しかし、新機能のAWS Transfer Family web appsにより、ウェブブラウザから直接SFTP / FTPS / FTPサーバーへアクセスできるWebUIを、ノーコードで作成できるようになりました。
またこのWebUIは、S3 Access Grantsというサービスを活用することで、ユーザー単位のファイル・フォルダへのアクセス権限を設定することができます。

AWS Transfer Family web appsを用いてS3 WebUI作成する

WebUIの完成像

今回WebUIの対象となるS3バケットはこちらです。
このバケットでは、ある企業の資料が、部署ごとのフォルダにわけて保存されている状態を想定しています。

そして、今回作成する、このバケットを操作するためのWebUIは以下です。


Homeではアクセス許可のあるS3バケット・フォルダが一覧として表示されます。
(上記は、対象S3バケットの全フォルダへのアクセス権を付与した場合の表示になります。)

この画面からユーザーは、ファイルのアップロード、ダウンロード、フォルダ作成、ファイルの削除など、基本的な操作を行うことができます。

WebUIの作成

それではWebUIを作成する方法を紹介していきます。

まずAWS Transfer Familyにアクセスし、「ウェブアプリを作成」からアプリを作成します。

Webアプリの設定では、想定する同時アクセス数に応じたユニット数を選択します。
(このユニット数が後述する課金額に直結します。)

ウェブアプリのデザイン設定では、ページのタイトル、ロゴやファビコンを設定することが可能です。

ここまでの設定を入力し実行すると、以下のようにWebUIが作成され、表示されるエンドポイントからアクセスできるようになります。

ただ、このままではWebUIにはアクセスできても、S3バケットへはアクセスできないので、S3バケット側でアクセス許可するためのCORS設定を行います。

WebUIの対象となるS3バケットにアクセスし、「アクセス許可」タグから、CORS設定を行ったものが以下です。
以下のようにAllowedOriginsは、先ほど作成したWebUIのエンドポイントをもとに設定します。

ユーザーの作成・割り当て

次に、このアプリケーションにアクセスするユーザーの作成と割り当て設定を行っていきます。

作成したアプリケーションの設定画面にアクセスし、「ユーザーとグループの割り当て」に進みます。

ダイアログが表示されるので「新しいユーザーを追加して割り当てる」を選択して進みます。
そして、ユーザー情報を入力してユーザー作成し、「割り当てる」を実行します。
(既に別アプリで作成済みのユーザーを、割り当てる場合は「既存を割り当てユーザーとグループ」を選択して進めます。)



最後に新規作成したユーザーはパスワード設定ができていないため、IAM Identity Centerにアクセスし、「パスワードをリセット」から登録を行います。
(表示される手順に従えば設定可能なため詳細は割愛します。)

ユーザーのファイルへのアクセス権限の設定

ここまでで作成したユーザーですが、まだファイルへのアクセス権がありません。
そのためS3 Access Grantsにてアクセス権の付与を行います。
(初回は、S3 Access Grantsのインスタンス作成とIAM アイデンティティセンターインスタンスの登録が必要ですが、本記事の趣旨から離れるため割愛します。)

まず権限作成のために、今回WebUIの対象となるS3バケットをロケーションとして登録します。


次にユーザーへの「権限を作成」を行っていきます。

以下がユーザー単位のアクセス権制御の設定になります。

「サブプレフィックス」設定で権限設定したいフォルダ、ファイルを指定し、「許可」で許可する内容の設定が可能です。
まずは全ファイルの、読み込み・書き込み権限を付けてみます。
そして「IAM アイデンティティセンターユーザーID」を指定することで、権限を紐づけたいユーザーの指定を行います。
この設定では、ユーザーをグループに所属させれば、そのグループ単位での権限管理も行えます。
これにより例えば、所属している部署ごとの権限管理などが可能です。

作成したS3 WebUIの操作

それでは作成したWebUIでファイル・フォルダ操作ができるかを試します。

WebUIのエンドポイントからアクセスし、作成したユーザーのユーザー名・認証情報を入力します。
そして、紐づけたS3バケットのengineeringフォルダにアクセスしてみます。

WebUIでは、三点リーダーから、コピー、フォルダの作成、ファイルの削除、ファイル・フォルダのアップロードが、ファイルの右側のアイコンからはダウンロードが可能となっています。
以下は例として、「サンプルフォルダ」作成の操作をしてみた結果です。

ユーザーごとのアクセス制御を行う

それでは次にS3 Access Grantsを使用して、ユーザーにファイル・フォルダ単位のアクセス制限をかけていきます。

まず先ほど作成した全フォルダアクセス可能な権限を削除し、新しい権限を作成していきます。

作成する権限は、engineeringフォルダへの読み書き可能権限と、publicフォルダ内の「training-schedule-2025.csv」のみ読み込み可能とする権限です。
特定の1ファイルへの権限設定の場合は、「権限範囲がオブジェクト」へのチェックが必要となります。


権限再設定後に、WebUIに再度アクセスしてみると、以下の表示に変わりました。

上記から、権限設定した通り、アクセス可能なフォルダとファイルのみ表示されるようになったことが確認できます。

料金体系

AWS Transfer Family web appsの料金体系についてです。

課金額は、ウェブアプリケーションの有効になっている時間に対してUSD 0.50/時間/ユニット(東京リージョンの場合)で発生します。
このユニット数とは、想定同時アクセス数に応じて、WebUIの作成時に設定した値になります。

より詳細な内容は以下の公式サイトからご確認ください。
aws.amazon.com

まとめ

AWS Transfer Family web appsでS3のWebUIがノーコードで作成でき、ユーザー単位のアクセス制御が可能だと分かりました。

また、試していく中でユーザーがWebUIにアクセスできるまでには以下の条件が必要だということもわかりました。

  1. 前提条件
    ・IAM Identity Centerが有効化されていること。(こちら1アカウントにつき1つのリージョンしか有効化できないため注意が必要です。)
    ・S3 Access Grantsのインスタンス作成と、IAM Identity Centerインスタンスの紐づけ設定がされていること。
  2. WebUIアクセスのための条件
    ・S3バケットに、WebUIからのアクセス許可(CORS)設定がされていること。
    ・IAM Identity Centerにユーザー登録がされていること。
    ・ユーザーに、S3 Access Grantsによる対象S3バケットへのアクセス権限が作成されていること。

開発コストを抑えてWebUIを作れる便利な機能なため、是非ご活用ください。


Acroquest Technologyでは、キャリア採用を行っています。

  • Azure OpenAI/Amazon Bedrock等を使った生成AIソリューションの開発
  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • マイクロサービス、DevOps、最新のOSSクラウドサービスを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 

少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

www.wantedly.com