はじめに
こちらの内容はハンズオン形式ではなく、大まかな手順と所感を記載した投稿となります。
悪しからず。
結婚式で写真を撮ってもらった際に、それぞれから写真を送ってもらうのが手間なので、QRコードを配布し、そこからアップロードサイトに飛んでもらって写真や動画をアップロードしてもらおうという案から構築しようと思った次第です。
機能のイメージ
・S3の静的ホスティングで画像アップロードサイトを公開
・セキュリティを高めるためにLambdaで署名付きURL発行
・サイトはアップロードの機能のみで、アップロードされる画像は別のS3に保存され、CLIコマンドでS3バケットからダウンロードする
やってみた
とりあえず、Claudeに作ってみてもらった。
以下文章を投下
「S3への画像アップロードサイトを作成したいです。 画像アップロード画面はS3の静的ホスティングを利用する予定です。 画像の拡張子は全てに対応したいです。 ある程度セキュアで簡単に実装できる方法を教えて。」
回答としてはやはり署名付きURLを使った方法を提案してもらった。
（コードが長すぎるのでここでは割愛）
構成は「API Gateway＋Lambda＋S3」
手順まとめ
■フロント側
・静的ホスティング機能を持ったS3バケットを作成し、画像アップロードサイト（index.html）を配置
・パブリックアクセスを許可し、バケットポリシーには誰でもOKだがやれることは「GetObject」だけにする
■バックエンド側
・画像を保存するためのS3バケットを作成
・パブリックアクセスはブロックでOK
・バケットポリシーも空でOK
・CORSの設定が必要なため、S3のCORSに以下を追加
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
・Lambdaで署名付きURL生成をする設定
・LambdaにはS3（画像保存用バケット）にアクセスする権限を付与
・API GatewayでREST APIを構築
・Lambdaプロキシ統合とCORS有効化が必須
・出来たエンドポイントをフロントエンド（index.html）に設定
S3バケットは公開用と保存用で分けることで、セキュアになる。
（公開用とまとめてしまうと、公開用の方で保存される画像がさらされることになるため）
保存用のS3バケットはパブリックアクセスを不可としており、なおかつ発行された署名付きURLでしか画像を置くことができないためセキュアになっている。
署名付きURLには期限を設定でき、例えば期限を5分にしておくと、もし署名付きURLが何らかの形でさらされても5分後には使えなくなる。
追加要件
ここまでで動作確認が取れたところで、複数アップロードが出来ないことに気付いた。
自分はインフラエンジニアでコードのことは全然なので、Claudeに助けてもらい複数枚アップロードの機能も実施。
さらに、動画も入れたいと思い、動画も入れられるようにした。
そうすると、アップロード時間がかなり掛かることに気付く。
ここからさらにアップロード時間を早めるため、マルチアップロード機能を追加する。
複数枚アップロードの機能はフロントエンド側だけの修正で良かったが、
動画アップロード、マルチアップロード機能はフロントとバックエンド両方の修正が必要だった。
コードがほとんど分かっていないまま進めているので、どちらがなんの機能を持っているか把握しておらず詰まることが多いと感じる。
最後に、画像アップロードをすることしかできないと言えど誰でも入れるURLなので、QRコードでしか入れないようにする。
URLの後ろに「/?token=******」と入れて、QRコードにし、フロントとバックエンドでそのトークンが入ったものしかアクセスできないようにすることでセキュリティを高める。
所感
ClaudeのコーディングはChatGPTよりかなり制度が高いように感じた。
ChatGPTは調べるのがめんどくさそうなことを聞くと簡潔に答えてくれるがコード生成の制度は微妙だった。
（ただ最近Codexと呼ばれるコーディングエージェント機能が追加されたらしい。有料会員じゃないと使えないけど）
いきなり色々な機能を頼んでコード生成してもらうと大体うまくいかない。まず最小限で動く構成を提案し、そこから1つ1つ機能の追加を頼んでいくと上手くいく。
画像アップロードサイトなんて単純だと思っていたが、拡張子の対応だったり、一括でのアップロードだったり、アップロードの速度が単純な設定だと遅かったり、1つ1つ改善を行っていく作業は新鮮だった。
生成してもらったものをそのまま使っているのでデバッグも簡単なものしか出来ないが、今はデバッグ機能さえもAIの発展により可能になってそうなので、インフラエンジニアがコードを勉強する際はどこまで知識をつけるべきなんだろうという疑問🤔
以上！！