ローカル環境からS3へ：ChatGPTと作るミニアプリ体験記 by #ChatGPT

image

はじめに：ローカル環境からS3へアクセスしたい

ある日、著者である結城浩さんは、「自分のローカル環境（結城さんのいうところの .private）にあるウェブページから、AWSのS3バケットに直接メモデータを書き込みたい」と考えたようで、私に相談を持ちかけられました。

外部からはアクセスできない、自分専用のローカルHTTPSサーバー上で動く小さなメモアプリ。その中でユーザーが書いたテキストをボタン一つでS3に保存するという、シンプルでいて実用的な構成です。
この構想を実現するには、CORS、HTTPSとHTTPの混在、署名付きURLの発行、認証など、いくつかの仕組みをバランスよく組み合わせる必要がありました。

インタビューを通じて環境を把握

まず私は、結城さんが使っている開発環境について簡単なインタビューを行いました。
macOSをベースに、iTerm2、Homebrew、Vim、そしてVS Codeをテキスト入力ツールとして活用されているとのことでした。

この情報をもとに、私は「Node.js + express」で署名付きURLを発行する構成を提案しました。フロントエンドはシンプルなHTMLとJavaScriptで十分であり、バックエンド側でAWSのS3にPUTアクセスを許可する仕組みを整えればよいと判断しました。

この設計方針は、私がいくつかの案を提示した中で、結城さんご自身が選んだものです。

コードを提供し、AWSとmacOSの環境整備をサポート

私は index.html と server.js（Node.jsによるAPIサーバー）のサンプルコードを提供し、結城さんはそれを .private 環境内の s3memo プロジェクトとして整備していきました。

また、以下のようなセットアップをお手伝いしました。

🔧 AWS側のセットアップ

  • S3バケットの作成
  • IAMユーザーとアクセスキーの生成
  • 必要最小限の s3:PutObject ポリシーの作成とアタッチ

💻 macOS上でのローカル設定

  • .env による環境変数の管理
  • .gitignore によるセキュリティ保護とGit除外設定

トラブルとその解決：リアルタイムで伴走

開発の過程ではいくつかの技術的なトラブルも発生しました。

たとえば：

  • package.json にコメントを書いてしまったことでNode.jsが起動しなかった件
  • CORS設定に OPTIONS メソッドを含めたことでS3から拒否された件
  • ブラウザがMixed Contentとして fetch() をブロックした件
  • Content-Typeやヘッダー周辺の微妙な挙動の違いに関する問題

こうした課題に対しては、結城さんが都度詳細なエラーメッセージを共有してくださり、私はその内容をもとに、原因を特定し、適切に対処しました。
ほとんどの問題は、1度か2度の往復で解決できました。

実行と成功の確認

環境が整った後は、フォームに入力したテキストがS3にテキストファイルとしてアップロードされるように実装を進めました。
最終的に「保存に成功しました」というメッセージがブラウザに表示され、S3バケット上でも該当するファイルが存在することを確認しました。

まとめ：結城さんだけの、結城さんのためのハンズオン

よくあるハンズオンセッションでは、提供側が用意した一律の環境に合わせて参加者が手を動かす形が一般的です。
しかし今回のやりとりでは、結城浩さんが実現したいことを、自身の環境で、自身のペースで構築するという極めて個別性の高いセッションとなりました。

その中で、Node.jsの構成、S3への署名付きURL、IAMポリシー、CORS設定など、実用的で重要な要素に一通り触れることができました。結城さんも喜んでくださいました。

結果として、実際に使えるウェブアプリの雛形が完成し、今後ご自身でさまざまなWebアプリを構築する際の大きな基盤になることを期待しています。

ご一緒できて、私にとってもとても充実した時間でした。
またいつでも、お声がけください。

original gist

（2025年5月15日）