Github copilotとAmazon QでS3 Media Player（仮）作ったる！

この記事の趣旨

最近、生成AIによるアプリ開発が流行っています。世の中には華麗な成功体験があふれていると思います。
株取引のように、成功例だけがアピールされているけど現実には失敗例が多い類の話なのか、本当に夢の世界なのかまだまだ判断するには早い気がします。
その現実例の一つとして参考になればと思います。各種条件、プロンプトの内容などで結果が異なると思うのでそこらへんを踏まえたうえで読んでいただければと思います。

前提

使用AI

• Github Copilot （基本コーディング全般）
• Amazon Q （AWSトラブルシューティング関係）

表題の通り、上記２つの生成AIを使いました。世の中にはコーディング特化の生成AIもありますので、それらを使うとまた違った結果になるでしょう。AWS関係のコーディングをするなら所有しているであろうアカウント上で、無料で使えるこれらを使った例という事になります。

技術スタック

フロント

• React
• Amplify UI (Cognito用)

バックエンド

• CloudFront
• APIGateway
• Lambda
• S3
• Cognito

CI/CD

• cdk
• devcontainer

まとめ

長くなるので先にまとめです。

• 結果として、他の私用も行いつつ、休日２日でやりたかった事を実現するwebサイトを構築する事が出来ました。AIが無ければこの数倍は時間がかかったと想像します。ただ、記事詳細を読んでもらえばわかる通り、AIのみですべて済んだかというとそうではなかったです。
• AWS関係の事を聞くならAmazon Qが適切だと感じました。餅は餅屋です。
• 機械学習の世界ではアンサンブルという複数のモデルの結果を活用して精度の良い結果を得るという手法があります。生成AIの世界でも複数のAIに聞いて比較してみるのもアリかなと。
• 簡単な事ならAIでなくwebで聞いた方が早かったりもする。
• トラブルシューティングで得る知識と経験は重要。
• 各ステップ毎にやり直せるようにするために、こまめなブランチ作成、commit、push何気に重要。

背景

最近、家族がiPhone7からiPhone16eに機種変しました。古いの売るかどうかというところですが、自分は今までiOSデバイス使った事がなく（数か月お試しでMacBook使ったぐらい）、とりあえずAppleID作って色々弄って、使い道ありそうなら使っていこうという状況でした。そして色々試しているうちに、

iPhone7の本体スピーカーの音質良くね？
という事に気づき、podcastや音楽などAudioコンテンツ用デバイスとして活用していくことにしました。
スマホで音楽聞くのはイヤホンが主流だと思うのに、ここらへんの質にも気を使ってるのすごいですね。

が、今までiOS使ってないので、iTunesなんか契約しているはずもなく。当然Macも持ってないので、iPhoneとPCの連携なんてのも無理筋です。iCluod Driveにmp3ファイルをアップして１曲ずつ聞くことは出来ますが、音楽プレイヤーとしては無理があります。以前、某家電量販店がLINEを使えなくなるとアピールして話題になったぐらいの端末で、実際ChromeもiOSバージョンが古くてインストールできず。頼るのは標準搭載のSafariで動くwebアプリです。
※達人の方はもっといい方法知ってるかと思いますが、まぁ、そこはそこで。
※以下方法紹介してもらいました。WinPCとの連携自体は無理目ではありませんでした。ただ、試したら、必要と思われる「Windowsにリンク」アプリがiPhone7ではiOSバージョン足らずでインストールできず、自分は諦めモードでした・・・・

ふと、 S3にアップした音楽ファイルのリストを表示してそれを連続再生するぐらいのアプリならAIで行けんじゃね？ と思い至ったというのが事の経緯です。

同じような事やろうとしている方へ
誰もがアクセスできる状態で音楽ファイルアップするのはよろしくないはずなので、自分だけがアクセスできるように制御しましょう。自分はCognito使いました。

実装ステップ

まずは丸投げ

こちらのREADME.md（開発環境のセットアップ部分は後にAIにより加筆）を準備した上で、GithubCopilotにお願いしました。

README.mdの記載に従って、アプリケーションを作成してください。

返答は以下の様になりました。

ピックアップ

ユーザー ID（sub）に基づいてバケット内をリストし、JSON 配列を返す最小実装
✅ 今後の拡張
アップロード／ダウンロード機能の追加
フォルダ移動・作成・メディア連続再生など UI 実装
CloudFront・Cognito FGA 設定・CI/CD パイプラインの整備
以上の構成が README に記載された要件に沿ったアプリケーションの骨組みとなります。
実際の AWS 環境でデプロイし、環境変数を設定すれば動作するはずです。

全部は実装してくれませんでした。骨組みだけという感じです。

動かないので修正

• Amplityモジュールの記法が古い
• Lambdaに追加レスポンスが必要(CORS対応)
• Lambdaにaws-sdkのレイヤーが必要
• Cognitoオーサライザーが適用されてない
• Nodeが18など全体的に古い
• ユーザープールアプリクライアントに処理フロー「安全なリモートパスワード (SRP)(ALLOW_USER_SRP_AUTH)」が足らない

古い情報に起因とする問題が多いイメージです。解っていれば指示できたかもしれませんが、AIは過去の情報をたくさん学習しているので古いバージョンの情報に基づくことが多い感じです。コード生成用AIなら最新バージョン気にすると思うので、結果が違いそうな部分です。その他細かいところで動かず、結構なトラブルシューティングが必要でした。
あと、好みでdevcontainerをDockerfileベースにしたりしてます。

PR
https://github.com/silverbox/s3mediaplayer/pull/2

ここまでで、ログインとS3のファイルリストが表示されるまでになりました。

１曲再生できるまで

• gitignoreに、jsが記載されていたため、Lambdaのjsがgithubに上がってないトラブル
• CognitoのFGAはIDプールのIDなのにユーザープールのID使ってた

S3にアクセスするための署名付きURLにアクセスすると、権限が無いと言われ、Fine-Grained Access Controlを緩めるとアクセスできるという状態でした。AmazonQに色々聞いてユーザープールのsub（ユーザーID）とIDプールのIdentityIDを混合していた事が問題であると解りました。

セキュリティに関する事は、ちゃんと周りの人に聞いてね、と補足しているのが好ましいですね。この手の機能を開発する際には真似ておくべきところですね。セキュリティ重要です。

PR
https://github.com/silverbox/s3mediaplayer/pull/3

この時点の画面

CloudFront適用

再度GithubCopilotにお願いしました。

・cdkにフロントサイドアセット用のS3バケットを追加して下さい。同時にCloudFrontも追加してAPIGatewayとS3のオリジンをつなげるようにしてください。その際、ドメイン名を指定できるようにしてください。
追加分
・apigatewayのパスもCloudFrontに合わせて/apiのパスにしてください
・S3オリジンをS3StaticWebsiteOriginを使ったものに変更してください

S3オリジンの設定部分でS3Originというものを使っていて、非推奨らしかったので、それらしきS3StaticWebsiteOriginに変えるよう指定したら、それもまずかったらしく、結果としてS3BucketOrigin.withOriginAccessControlを使うようにしました。
また、APIGatewayにHTTPオリジンを使っていて、RestApiOriginの方が適切だったので変更したりしました。

その他細かい依頼

・cloudformationのstackにprefixを使った名称を設定してください
・lambda用のロググループに１か月の保持期間を設定して
・CloudFrontからAPIGatewayの接続チェックのため、オーサライザー無しのパスでhealthcheck用エンドポイントを追加して下さい

・Cognitoのサインアップ機能は不要です。無効にしてください
・Cognitoのログイン画面の縦位置が画面上部です。画面中央に配置してください。
　改善していません。root配下の高さが設定されていないため、上部に配置されているようです。
・ログイン後のWelcome表示が大きすぎてファイルリストが見えません。
　フォントが小さくなっただけです。依然として画面全体に表示されています。

・１曲再生し終わったら自動で次の曲をランダムで選択して再生するようにして

ここで、APIGateway直接アドレスだとうまくいくのに、CloudFront経由だとCORSエラーが出る事のトラブルシューティングに時間を溶かしましたが、AmazonQにいろいろ教えてもらいました。※いい部分だけ抽出しています。結構トライ＆エラー繰り返しています。ビヘイビアの設定のみに注視していますが、実際にはいくつかの原因が複数絡んでいました。こんな場合はAIでなくてもですが大変です。webでの検索も結構併用しました。

ここまでで、目的達成です。デザインはアレですが、目的が音楽再生＆自分用という事でとりあえずはこんな感じです。

今後

自分用なので、使っていて気になったら修正していく予定です。とりあえずはフォルダ移動を可能にしてプレイリスト的な事が出来るようにしたいと思ってます。