【要約】彼女の誕生日に、2人だけのSNS「Sync」を作った話 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が、Cloudflare環境へのデプロイ後に発生した、認証エラーと画像配信の遅延という2つの課題に直面した。具体的には以下の問題が発生した。
- ・ローカルでは動作するが、本番環境のWorkerでログインAPIが500エラーを返した。
- ・スマートフォンで撮影した数MBの原画像をそのまま配信していた。
- ・初期表示だけで約5.8MBの転送量が発生し、通信負荷が極めて高かった。
// Approach
開発者は、デバッグの切り分けとCloudflare Imagesを活用した画像最適化によって、これらの問題を解決した。採用した手法は以下の通りである。
- ・デバッグでは、依存関係を一つずつ外して層を剥がす手法で原因を特定した。
- ・RuntimeをEdgeからNode.jsへ変更し、モジュール実行時のエラーを解消した。
- ・認証付きAPIを経由し、Cloudflare ImagesでリサイズとWebP変換を行う構成を構築した。
- ・Next.jsのカスタムローダーを用い、画面幅に最適な画像を選択させた。
// Result
開発者は、認証機能の正常化と、画像配信パフォーマンスの劇的な向上を実現した。得られた成果は以下の通りである。
- ・画像リクエスト数を24件以上から7件へと削減した。
- ・画像転送量を約5.8MBから245KBへと、約96%削減することに成功した。
- ・認証を維持したまま、最適化された画像を低レイテンシで配信できる体制を整えた。
Senior Engineer Insight
> Cloudflareエコシステムをフル活用した、極めて合理的かつモダンな構成である。特に、エッジ環境特有のRuntime（Edge vs Node.js）の差異に直面した際のデバッグプロセスは、実戦的で価値が高い。画像配信において、単なる公開URLではなく、認証を通した上でのオンデマンドリサイズを採用した点は、セキュリティとパフォーマンスの両立という観点で高く評価できる。小規模開発の枠を超え、エッジコンピューティングの特性を深く理解した設計と言える。