Transfer Family web apps触ってみた

 はじめにこんにちは、クラウドインフラグループの松尾です。

私たちクラウドインフラグループでは、社内全体のインフラ領域を設計から運用まで幅広く担当しています。
今回は、re:Inventで発表されたAWS Transfer Family ウェブアプリについてご紹介します。

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/aws-transfer-family-web-apps/

本記事では、ウェブアプリの概要、作成手順、設定方法、そして実際に使用してみた感想をお伝えします。参考になれば幸いです。
 概要AWS Transfer Family ウェブアプリとは、簡単に言うと、ブラウザ上でS3バケット内のファイルを操作できるアプリケーションを、コードを書くことなく作成できるサービスです。

従来、GUIでS3にアクセスするにはAWSコンソールやWinSCPなどの専用ソフトウェアが必要で、設定も必要でした。

そのため、非技術者や一時的なユーザーには操作が難しいという課題がありました。
AWS Transfer Family ウェブアプリは、直感的なインターフェースで、技術的な知識がなくても簡単に操作できる点が特徴です。

さらに、IAM Identity CenterやS3 Access Grantsと統合されているため、細かいアクセス制御も可能です。
 料金についてAWS Transfer Family ウェブアプリの料金は、ユニット数（1ユニットで5分間に最大250セッション）に基づく1時間単位の従量課金制です。

リージョン
料金

東京
ユニット数*0.5 USD/時間

例えば、1ユニットを24時間フル稼働させると 12USD/日、1か月では 360USD となり、

長時間の利用ではかなりのコストがかかります。

手軽なサービスの割には高額と言えますね。
利用ケースによっては過剰なコストとなる可能性があるため、用途に応じたサービスの利用が大事ですね。
 Webアプリの作成方法それでは早速アプリを作成してみましょう。

（執筆時点ではTerraform未対応のため、AWS Management Consoleを使用します。）

AWS Management Consoleにログインし、AWS Transfer Familyのナビゲーションペインから「ウェブアプリ」を選択し、ウェブアプリを作成をクリック。

今回はNameタグのみ設定して「次へ」をクリック。

※IAM Identity Centerの設定が事前に必要です。未設定の場合、先に準備してください。

ページタイトル、ロゴ、ファビコンを設定し、「作成」をクリック。

今回、ロゴ・ファビコンは設定しないでいきます。

これでウェブアプリの作成は完了です！ 簡単ですね！

 ユーザー/グループとS3 Access Grantsの設定次に、ウェブアプリにグループの割り当てとS3 Access Grantsを設定していきます。

グループの割り当て

ウェブアプリ詳細画面で「ユーザーとグループの割り当て」をクリック。

今回はグループを用意したので、既存のグループを選択して割り当てます。

S3 Access Grantsの設定

次にAccess Grantsの設定です。ロケーションと権限の2つを設定します。

S3のナビゲーションペインからAccess Gratsに移動すると、「権限」 「ロケーション」タブがあるのでここから設定していきます。

ロケーションから設定します。

ロケーションではアクセス対象のS3バケット及び、S3バケットに対する権限を割り当てたIAMロールを指定します。

今回は検証のためAWS管理ポリシー"AmazonS3FullAccess"を付与してます。

権限では先ほど設定したロケーションを指定し、サブプレフィックス、許可、被付与者タイプ、IAM プリンシパルタイプ、IAM プリンシパルユーザーを設定し、権限を作成します。

IAM Identity Centerで認証を行うので、画像の通り、設定しています。

今回は設定していませんが、オプションとして、アプリケーション単位で制限をすることも出来るようです。

CORSの設定

バケットの中身を参照できるように対象のS3バケットで Cross-Origin Resource Sharing (CORS) からCORS設定を追加します。

今回は以下の内容を設定しました。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://${ウェブアプリID}.transfer-webapp.ap-northeast-1.on.aws"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]
 試してみるここまで出来たら準備完了です。

ウェブアプリのURLにアクセスし、認証を行ったらS3の管理画面が出てきました！

ロケーションで設定したS3バケットが表示されていることが分かります。

それじゃあ実際に今回は対象バケットにs3ファイルの削除をしてみましょう。

Folderのリンクからオブジェクトを操作しようとしましたが、あれ？権限が不足してるようですね。

どうやらAccess Grantsのロケーションで設定したIAMロールでsts:SetContextの設定が必要だったようです。

User Guideにも記載がありました。
設定を追加して再度試したところ、無事オブジェクトの確認が出来ました。

ちなみにCORSの設定ができていないとここでNetwork Errorが出てきます

それじゃあ、ここから本当にオブジェクトを選択して、削除をしてみます。

操作も簡単です。

削除したいオブジェクト(今回はテスト1.txt)を選択して三点リーダーからDeleteを選択するだけです。

Webアプリ上から削除されてますね。

コンソール上からも同様に削除できてることを確認しました。
 感想IAM Identity CenterやAccess Grantsの設定が必要でしたが、ノーコードでS3の管理アプリケーションを簡単に構築できる点は非常に便利だと感じました。

設定箇所が多いため、戸惑った部分も少しありましたが、

IaCに対応することで、さらに使いやすくなると思います。
また、本サービスは同じくre:Inventで発表されたStorage Browser for Amazon S3を基にしているため、

プログラムスキルがある方はそちらのサービスを利用することで独自のカスタマイズも可能です。

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/storage-browser-amazon-s3/
このブログが少しでも参考になれば幸いです。