複数ドメインに散らばってしまった画像…！ 運用中のPHPアプリに後からCDNを導入する…！

運用中のPHPアプリに後からCDN（CloudFront）を導入する際、**複数のS3ドメインに画像が分散している**ことが課題となります。CDNは地理的に分散されたサーバーでコンテンツをユーザー近くに配信し、**表示速度を向上させる**ための技術であり、TTL（キャッシュ有効期限）の理解が重要です。

複数ドメインのままCDNを導入すると、設定が複雑化し運用管理やコスト、セキュリティ面で課題が生じる可能性があります。一方、事前にS3の画像を統合する方法は移行コストと時間がかかります。現実的な解決策として、**短期的に複数ドメインのままCloudFrontを導入し表示速度を改善**し、**長期的にS3を統合して運用を安定化させるハイブリッド型アプローチ**が推奨されます。

CDN導入時の注意点として、**キャッシュによる誤表示や情報漏洩のリスク**があります。特に個人情報のようなキャッシュしてはいけないコンテンツは、レスポンスヘッダー（X-Cache: Miss, Cache-Control: no-storeなど）で確認し、CloudFrontの設定でキャッシュを無効化する必要があります。動的ページではCookieや認証トークンの扱いに注意し、複数のユーザーで検証を行うことが重要です。**表示速度の改善と安全な運用**の両立を目指し、段階的なCDN導入を進めることが現実的なプラクティスです。

Transcript

1. 複数ドメインに散らばってしまった画像…！ 運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 1
2. 所属 株式会社TechBowl 住んでるところ 東京 何やってる？ 「TechTrain」というサービスで反復横跳びし続けてい る何でも屋さん(Laravel, Next.js, AWS, etc...) 2025-03-23 スー | TechTrain 2
3. 今までの登壇させてもらった内容 2025-03-23 スー | TechTrain 3
4. 2025-03-23 スー | TechTrain 4
5. 趣味 お酒(よく溺れる) サウナ 2025-03-23 スー | TechTrain 5
6. 今日は怪しげなサウナ?に泊まってきました 2025-03-23 スー | TechTrain 6
7. 2025-03-23 スー | TechTrain 7
8. 僕と同じく間違った場所に入ったかもしれないという方! 裏番組の方がためになるトークをしてくださるかも？ 2025-03-23 スー | TechTrain 8
9. 2025-03-23 スー | TechTrain 9
10. 移動は今のうちに！ 2025-03-23 スー | TechTrain 10
11. 大丈夫ですか？ 2025-03-23 スー | TechTrain 11
12. それでは本題に入っていきます！ 2025-03-23 スー | TechTrain 12
13. 複数ドメインに散らばってしまった画像…！ 運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 13
14. 複数ドメインに散らばってしまった画像…！ 2025-03-23 スー | TechTrain 14
15. これだけでも耐えられないのに・・・ 2025-03-23 スー | TechTrain 15
16. 運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 16
17. Q. 本当に後からCDNを入れるっていうんですか！？ 2025-03-23 スー | TechTrain 17
18. A. はい。なんとしても入れます(断固たる決意) 2025-03-23 スー | TechTrain 18
19. Q. そもそも何のためにCDNを入れるんでしたっけ？ A. 画像などの配信を早くするためです 2025-03-23 スー | TechTrain 19
20. でもそもそもCDNってなんぞ・・・？ 2025-03-23 スー | TechTrain 20
21. CDNを雰囲気で理解している人を少し抜け出します 2025-03-23 スー | TechTrain 21
22. ※ 最低限覚えておくべきこと 2025-03-23 スー | TechTrain 22
23. CDN(Content Delivery Network)と TTL(Time To Live)を理解する 2025-03-23 スー | TechTrain 23
24. CDNとは？ 2025-03-23 スー | TechTrain 24
25. CDNとは？ 1. 地理的に分散されたサーバーグループ 2. コンテンツをユーザーの所在地に近づけることで Web コンテンツの配信をスピ ードアップ 3. ファイルのコピーを一時的にキャッシュサーバーに保存し、近くのサーバーから インターネットコンテンツにアクセスさせる 2025-03-23 スー | TechTrain 25
26. 2025-03-23 スー | TechTrain 26
27. TTL (Time To Live) とは？ キャッシュの有効期限 CDNにキャッシュされたコンテンツが、どれくらいの期間保持されるかを設定する 値 2025-03-23 スー | TechTrain 27
28. CDNのそれぞれの仕様については どのあたりを見ればよいのか？ 2025-03-23 スー | TechTrain 28
29. 2025-03-23 スー | TechTrain 29
30. ここまででCDNについて雰囲気理解を "少し" 抜け出せたかなと思います 2025-03-23 スー | TechTrain 30
31. 本題に戻ります 2025-03-23 スー | TechTrain 31
32. Q. 何でそんなにCDN入れたいんですか？ 2025-03-23 スー | TechTrain 32
33. Q. 何でそんなにCDN入れたいんですか？ A. 画像などの配信を高速で行うためです 2025-03-23 スー | TechTrain 33
34. AWSでの構成を先ほどの図と重ねると 2025-03-23 スー | TechTrain 34
35. 2025-03-23 スー | TechTrain 35
36. タイトル回収！ 複数ドメインに散らばってしまった画像…！ 2025-03-23 スー | TechTrain 36
37. 2025-03-23 スー | TechTrain 37
38. オリジンサーバーとして扱うS3のドメインが複数あ ると何が問題か？ 2025-03-23 スー | TechTrain 38
39. オリジンサーバーとして扱うS3のドメインが複数あ ると何が問題か？ 1. パフォーマンスへの影響 2. 運用管理の複雑化 3. コストへの影響 4. セキュリティリスク 2025-03-23 スー | TechTrain 39
40. 今回の主題だと「パフォーマンスへの影響」 2025-03-23 スー | TechTrain 40
41. 複数ドメインをどうにかした方が良いのはわかった 現実的にはどうアプローチすべきか？ 2025-03-23 スー | TechTrain 41
42. 状況をもう少し具体に落としつつ説明します 2025-03-23 スー | TechTrain 42
43. 画像ファイルが 5つの異なるドメイン に分散 - service.s3-ap-northeast-1.amazonaws.com - service-production.s3-ap-northeast- 1.amazonaws.com - service-production.s3.ap-northeast- 1.amazonaws.com - service.s3.ap-northeast-1.amazonaws.com - service-production.s3.ap-northeast- 2025-03-23 スー | TechTrain 43
44. そうなるとフロントエンドも辛くて 2025-03-23 スー | TechTrain 44
45. 2025-03-23 スー | TechTrain 45
46. こうなります 2025-03-23 スー | TechTrain 46
47. No調査時のCDN導入計画 (甘い…) 2025-03-23 スー | TechTrain 47
48. No調査時のCDN導入計画 (甘い…) 1. S3の画像を1つに統合 2. 統合後のパスをDBにUPDATE 3. フルパスでないパスを修正 4. キャッシュの仕組みを考える 5. CloudFront導入！ 2025-03-23 スー | TechTrain 48
49. 本当か？を検討する 2025-03-23 スー | TechTrain 49
50. 考えるべきこと 1. 最適な移行手順は？ 2. 移行時のトラブルと検証方法は？ 2025-03-23 スー | TechTrain 50
51. 1. 最適な移行手順 2025-03-23 スー | TechTrain 51
52. 1. 最適な移行手順 2つのパターンを比較 S3のドメインを1つに統合 → CDN(CloudFront)導入 複数のS3のまま → CDN(CloudFront)導入 各観点で比較し、最適な手法を解説します。 2025-03-23 スー | TechTrain 52
53. 観点 S3ドメイン統合→CDN 導入 S3のドメイン複数のまま→CDN 導入 S3画像移行コスト 高 低 (ほぼゼロ) CDN(CloudFront)料 金 低 やや高 追加サービス料金 不要 場合によって必要 (Lambda@Edge) 移行時間（人日） 長 短 2025-03-23 スー | TechTrain 53
54. S3統合後のCDN導入 メリット： CloudFrontの設定がシンプル 追加費用がほぼ不要 長期的な運用・管理が容易 デメリット： S3のデータ移行にコストと時間がかかる 移行期間中はストレージ費用が一時的に増加 2025-03-23 スー | TechTrain 54
55. 複数S3のままCDN導入 メリット： データ移行が不要で、迅速に導入可能 既存の環境をそのまま利用可能 デメリット： CloudFrontの設定が複雑になる可能性 Lambda@Edgeなどの追加費用が発生する可能性 パス設定やオリジン設定が複雑化し、運用難易度が上がる 2025-03-23 スー | TechTrain 55
56. 短期施策：まずはCloudFront導入 複数ドメインのまま、迅速に画像配信を改善 ※ただし、費用と複雑さはサービスごとに考慮が必要なので、慎重に検討してくださ い 2025-03-23 スー | TechTrain 56
57. Q. CloudFrontで複数ドメイン設定できるの？ 2025-03-23 スー | TechTrain 57
58. Q. CloudFrontで複数ドメイン設定できるの？ A. はい、可能です！ 「CloudFront 複数オリジン」 で検索！ ※作成時は1つのオリジン設定ですが、後から複数オリジンへの変更が可能です。 2025-03-23 スー | TechTrain 58
59. 長期施策：S3の統合後にCloudFront 長期的な運用安定性とメンテナンス性を重視 2025-03-23 スー | TechTrain 59
60. 現実的なベストプラクティス ハイブリッド型アプローチ 短期施策 → 長期施策 2025-03-23 スー | TechTrain 60
61. ハイブリッド型アプローチ Step1（短期的対策）： 複数ドメインのままCloudFrontを導入し、配信速度を即改善 Lambda@Edgeの利用は最小限に、パスベースで単純なマッピングを実施 Step2(長期的対策)： 新しい統合されたS3バケットへ段階的に画像をコピー 新規アップロード画像は統合後のS3バケットへ保存 Step3（長期的対策）： 全画像を統合バケットに移動後、単一オリジン＋CloudFrontの構成へ移行 Lambda@Edgeを利用している場合は、将来的な停止を視野に設計 2025-03-23 スー | TechTrain 61
62. 現実的な移行プランのベストプラクティス決定した ので、あとは検証ですね？ 2025-03-23 スー | TechTrain 62
63. 2. 移行時の注意点とテスト方法 2025-03-23 スー | TechTrain 63
64. 2. 移行時の注意点とテスト方法 注意点 2025-03-23 スー | TechTrain 64
65. CDN / TTLでよくあるトラブルを抑える 2025-03-23 スー | TechTrain 65
66. CDN / TTLでよくあるトラブル キャッシュしてはいけないものがキャッシュされてしまう キャッシュが更新されず、古い画像が表示される 意図しないタイミングでオリジンサーバーにアクセスが集中する 2025-03-23 スー | TechTrain 66
67. CDN / TTLでよくあるトラブル キャッシュしてはいけないものがキャッシュされてしまう ← 致命的なものはこ れ キャッシュが更新されず、古い画像が表示される 意図しないタイミングでオリジンサーバーにアクセスが集中する 2025-03-23 スー | TechTrain 67
68. CDN/TTLでよくあるトラブル キャッシュしてはいけないものがキャッシュされてしまう ← 致命的なものはこ れ キャッシュが更新されず、古い画像が表示される 意図しないタイミングでオリジンサーバーにアクセスが集中する 特に個人情報系のものが漏れると事業が一発で終わる可能性がある 2025-03-23 スー | TechTrain 68
69. 実際の検証していく 2025-03-23 スー | TechTrain 69
70. privateな画像のキャッシュの検証方法 基本は先ほどと同じだが、動的な情報を表示するページは特に厳密に検証する。 ① レスポンスヘッダーを確認（推奨） ブラウザの開発者ツールや curl でヘッダーを確認し、以下を必ず確認する。 curl -I https://image.example.dev/personal-private/private.png 2025-03-23 スー | TechTrain 70
71. ▼ 確認すべきヘッダー： ヘッダー 内容 X-Cache 必ず Miss from cloudfront である Cache- Control no-store , no-cache , private , max-age=0 等になっている Set-Cookie Cookieを利用しているページなら、CloudFrontがキャッシュしな い設定になっている 通常 Cache-Control: private, no-store または no-cache が適切。 2025-03-23 スー | TechTrain 71
72. 正しい例： HTTP/2 200 cache-control: no-store, private x-cache: Miss from cloudfront 2025-03-23 スー | TechTrain 72
73. 間違った例（キャッシュされている）： HTTP/2 200 cache-control: max-age=3600 x-cache: Hit from cloudfront 2025-03-23 スー | TechTrain 73
74. ② 動的ページの場合、Cookieや認証トークンに注意する 動的ページでは、認証トークンやセッションCookieが含まれるため、必ずCloudFront の挙動設定を以下のようにする必要がある。 2025-03-23 スー | TechTrain 74
75. CloudFrontの設定方法（必須）： CloudFrontの「Behavior」設定で、キャッシュポリシーとして CachingDisabled （または相当するカスタムポリシー）を選ぶ。 オリジンリクエストポリシーで、ヘッダーやCookieをS3またはオリジンサーバ に渡すよう設定。 キャッシュ対象としないパス（例： /personal-private/* ）をBehaviorで明示的 に設定することが推奨される。 例: Path pattern: /personal-private/* Cache policy: CachingDisabled 2025-03-23 スー | TechTrain 75
76. ③ 実際に複数の異なるユーザーでテストする（必須） 実際に複数ユーザーでログイン状態などを変えてアクセスし、意図しないキャッシュ がないことをテストしてください 複数のユーザーがログインして、別ユーザーのmypageが表示されないことを確 認する。 未ログイン時にmypageにアクセスして、個人ページが誤って表示されないこと を検証する。 2025-03-23 スー | TechTrain 76
77. プライベートコンテンツに関する注意点（よくあるミス） デフォルトのキャッシュポリシーを利用すると、mypageのような動的ページが 意図せずキャッシュされることがある。 特に注意が必要なのは、ブラウザキャッシュとCloudFrontのキャッシュの違い： no-cache : ブラウザやCDNに対して再検証を要求するが、条件次第で一時 的なキャッシュが発生する可能性がある。 no-store : 一切のキャッシュを禁止する最も厳しい指定（mypageなどで推 奨）。 認証情報(Cookieや認証ヘッダー)を含む場合、CloudFrontが適切にキャッシュを 無効にするように設定する 2025-03-23 スー | TechTrain 77
78. 推奨の設定まとめ プライベートな画像などのファイルはCloudFrontに必ず明示的にキャッシュを無 効化する。 CloudFront Behavior設定で明示的に CachingDisabled ポリシーを使用する。 キャッシュ検証はレスポンスヘッダーの X-Cache と Cache-Control で厳密に行 う。 2025-03-23 スー | TechTrain 78
79. 全体まとめ 2025-03-23 スー | TechTrain 79
80. CDNの導入を現実的に着地させるプラクティス ハイブリッド型アプローチ Step1（短期的対策）： 複数ドメインのままCloudFrontを導入し、配信速度を即改善 Lambda@Edgeの利用は最小限に、パスベースで単純なマッピングを実施 Step2(長期的対策)： 新しい統合されたS3バケットへ段階的に画像をコピー 新規アップロード画像は統合後のS3バケットへ保存 Step3（長期的対策）： 全画像を統合バケットに移動後、単一オリジン＋CloudFrontの構成へ移行 Lambda@Edgeを利用している場合は、将来的な停止を視野に設計 2025-03-23 スー | TechTrain 80
81. 検証について アプリケーションエンジニアの場合、全てを気にするのは難しい 個人情報流出のところが一番マイナスの事業インパクトが大きい そこを重点的に検証しましょう！ 2025-03-23 スー | TechTrain 81
82. ご静聴ありがとうございました! 2025-03-23 スー | TechTrain 82
83. 余談 2025-03-23 スー | TechTrain 83
84. こちらへまとめてあります。 2025-03-23 スー | TechTrain 84