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

Slide 1

Slide 1 text

複数ドメインに散らばってしまった画像…！運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 1

Slide 2

Slide 2 text

所属株式会社TechBowl 住んでるところ東京何やってる？「TechTrain」というサービスで反復横跳びし続けている何でも屋さん(Laravel, Next.js, AWS, etc...) 2025-03-23 スー | TechTrain 2

Slide 3

Slide 3 text

今までの登壇させてもらった内容 2025-03-23 スー | TechTrain 3

Slide 4

Slide 4 text

2025-03-23 スー | TechTrain 4

Slide 5

Slide 5 text

趣味お酒(よく溺れる) サウナ 2025-03-23 スー | TechTrain 5

Slide 6

Slide 6 text

今日は怪しげなサウナ?に泊まってきました 2025-03-23 スー | TechTrain 6

Slide 7

Slide 7 text

2025-03-23 スー | TechTrain 7

Slide 8

Slide 8 text

僕と同じく間違った場所に入ったかもしれないという方! 裏番組の方がためになるトークをしてくださるかも？ 2025-03-23 スー | TechTrain 8

Slide 9

Slide 9 text

2025-03-23 スー | TechTrain 9

Slide 10

Slide 10 text

移動は今のうちに！ 2025-03-23 スー | TechTrain 10

Slide 11

Slide 11 text

大丈夫ですか？ 2025-03-23 スー | TechTrain 11

Slide 12

Slide 12 text

それでは本題に入っていきます！ 2025-03-23 スー | TechTrain 12

Slide 13

Slide 13 text

複数ドメインに散らばってしまった画像…！運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 13

Slide 14

Slide 14 text

複数ドメインに散らばってしまった画像…！ 2025-03-23 スー | TechTrain 14

Slide 15

Slide 15 text

これだけでも耐えられないのに・・・ 2025-03-23 スー | TechTrain 15

Slide 16

Slide 16 text

運用中のPHPアプリに後からCDNを導入する…！ 2025-03-23 スー | TechTrain 16

Slide 17

Slide 17 text

Q. 本当に後からCDNを入れるっていうんですか！？ 2025-03-23 スー | TechTrain 17

Slide 18

Slide 18 text

A. はい。なんとしても入れます(断固たる決意) 2025-03-23 スー | TechTrain 18

Slide 19

Slide 19 text

Q. そもそも何のためにCDNを入れるんでしたっけ？ A. 画像などの配信を早くするためです 2025-03-23 スー | TechTrain 19

Slide 20

Slide 20 text

でもそもそもCDNってなんぞ・・・？ 2025-03-23 スー | TechTrain 20

Slide 21

Slide 21 text

CDNを雰囲気で理解している人を少し抜け出します 2025-03-23 スー | TechTrain 21

Slide 22

Slide 22 text

※ 最低限覚えておくべきこと 2025-03-23 スー | TechTrain 22

Slide 23

Slide 23 text

CDN(Content Delivery Network)と TTL(Time To Live)を理解する 2025-03-23 スー | TechTrain 23

Slide 24

Slide 24 text

CDNとは？ 2025-03-23 スー | TechTrain 24

Slide 25

Slide 25 text

CDNとは？ 1. 地理的に分散されたサーバーグループ 2. コンテンツをユーザーの所在地に近づけることで Web コンテンツの配信をスピードアップ 3. ファイルのコピーを一時的にキャッシュサーバーに保存し、近くのサーバーからインターネットコンテンツにアクセスさせる 2025-03-23 スー | TechTrain 25

Slide 26

Slide 26 text

2025-03-23 スー | TechTrain 26

Slide 27

Slide 27 text

TTL (Time To Live) とは？キャッシュの有効期限 CDNにキャッシュされたコンテンツが、どれくらいの期間保持されるかを設定する値 2025-03-23 スー | TechTrain 27

Slide 28

Slide 28 text

CDNのそれぞれの仕様についてはどのあたりを見ればよいのか？ 2025-03-23 スー | TechTrain 28

Slide 29

Slide 29 text

2025-03-23 スー | TechTrain 29

Slide 30

Slide 30 text

ここまででCDNについて雰囲気理解を "少し" 抜け出せたかなと思います 2025-03-23 スー | TechTrain 30

Slide 31

Slide 31 text

本題に戻ります 2025-03-23 スー | TechTrain 31

Slide 32

Slide 32 text

Q. 何でそんなにCDN入れたいんですか？ 2025-03-23 スー | TechTrain 32

Slide 33

Slide 33 text

Q. 何でそんなにCDN入れたいんですか？ A. 画像などの配信を高速で行うためです 2025-03-23 スー | TechTrain 33

Slide 34

Slide 34 text

AWSでの構成を先ほどの図と重ねると 2025-03-23 スー | TechTrain 34

Slide 35

Slide 35 text

2025-03-23 スー | TechTrain 35

Slide 36

Slide 36 text

タイトル回収！複数ドメインに散らばってしまった画像…！ 2025-03-23 スー | TechTrain 36

Slide 37

Slide 37 text

2025-03-23 スー | TechTrain 37

Slide 38

Slide 38 text

オリジンサーバーとして扱うS3のドメインが複数あると何が問題か？ 2025-03-23 スー | TechTrain 38

Slide 39

Slide 39 text

オリジンサーバーとして扱うS3のドメインが複数あると何が問題か？ 1. パフォーマンスへの影響 2. 運用管理の複雑化 3. コストへの影響 4. セキュリティリスク 2025-03-23 スー | TechTrain 39

Slide 40

Slide 40 text

今回の主題だと「パフォーマンスへの影響」 2025-03-23 スー | TechTrain 40

Slide 41

Slide 41 text

複数ドメインをどうにかした方が良いのはわかった現実的にはどうアプローチすべきか？ 2025-03-23 スー | TechTrain 41

Slide 42

Slide 42 text

状況をもう少し具体に落としつつ説明します 2025-03-23 スー | TechTrain 42

Slide 43

Slide 43 text

画像ファイルが 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

Slide 44

Slide 44 text

そうなるとフロントエンドも辛くて 2025-03-23 スー | TechTrain 44

Slide 45

Slide 45 text

2025-03-23 スー | TechTrain 45

Slide 46

Slide 46 text

こうなります 2025-03-23 スー | TechTrain 46

Slide 47

Slide 47 text

No調査時のCDN導入計画 (甘い…) 2025-03-23 スー | TechTrain 47

Slide 48

Slide 48 text

No調査時のCDN導入計画 (甘い…) 1. S3の画像を1つに統合 2. 統合後のパスをDBにUPDATE 3. フルパスでないパスを修正 4. キャッシュの仕組みを考える 5. CloudFront導入！ 2025-03-23 スー | TechTrain 48

Slide 49

Slide 49 text

本当か？を検討する 2025-03-23 スー | TechTrain 49

Slide 50

Slide 50 text

考えるべきこと 1. 最適な移行手順は？ 2. 移行時のトラブルと検証方法は？ 2025-03-23 スー | TechTrain 50

Slide 51

Slide 51 text

1. 最適な移行手順 2025-03-23 スー | TechTrain 51

Slide 52

Slide 52 text

1. 最適な移行手順 2つのパターンを比較 S3のドメインを1つに統合 → CDN(CloudFront)導入複数のS3のまま → CDN(CloudFront)導入各観点で比較し、最適な手法を解説します。 2025-03-23 スー | TechTrain 52

Slide 53

Slide 53 text

観点 S3ドメイン統合→CDN 導入 S3のドメイン複数のまま→CDN 導入 S3画像移行コスト高低 (ほぼゼロ) CDN(CloudFront)料金低やや高追加サービス料金不要場合によって必要 (Lambda@Edge) 移行時間（人日）長短 2025-03-23 スー | TechTrain 53

Slide 54

Slide 54 text

S3統合後のCDN導入メリット： CloudFrontの設定がシンプル追加費用がほぼ不要長期的な運用・管理が容易デメリット： S3のデータ移行にコストと時間がかかる移行期間中はストレージ費用が一時的に増加 2025-03-23 スー | TechTrain 54

Slide 55

Slide 55 text

複数S3のままCDN導入メリット：データ移行が不要で、迅速に導入可能既存の環境をそのまま利用可能デメリット： CloudFrontの設定が複雑になる可能性 Lambda@Edgeなどの追加費用が発生する可能性パス設定やオリジン設定が複雑化し、運用難易度が上がる 2025-03-23 スー | TechTrain 55

Slide 56

Slide 56 text

短期施策：まずはCloudFront導入複数ドメインのまま、迅速に画像配信を改善 ※ただし、費用と複雑さはサービスごとに考慮が必要なので、慎重に検討してください 2025-03-23 スー | TechTrain 56

Slide 57

Slide 57 text

Q. CloudFrontで複数ドメイン設定できるの？ 2025-03-23 スー | TechTrain 57

Slide 58

Slide 58 text

Q. CloudFrontで複数ドメイン設定できるの？ A. はい、可能です！「CloudFront 複数オリジン」で検索！ ※作成時は1つのオリジン設定ですが、後から複数オリジンへの変更が可能です。 2025-03-23 スー | TechTrain 58

Slide 59

Slide 59 text

長期施策：S3の統合後にCloudFront 長期的な運用安定性とメンテナンス性を重視 2025-03-23 スー | TechTrain 59

Slide 60

Slide 60 text

現実的なベストプラクティスハイブリッド型アプローチ短期施策 → 長期施策 2025-03-23 スー | TechTrain 60

Slide 61

Slide 61 text

ハイブリッド型アプローチ Step1（短期的対策）：複数ドメインのままCloudFrontを導入し、配信速度を即改善 Lambda@Edgeの利用は最小限に、パスベースで単純なマッピングを実施 Step2(長期的対策)：新しい統合されたS3バケットへ段階的に画像をコピー新規アップロード画像は統合後のS3バケットへ保存 Step3（長期的対策）：全画像を統合バケットに移動後、単一オリジン＋CloudFrontの構成へ移行 Lambda@Edgeを利用している場合は、将来的な停止を視野に設計 2025-03-23 スー | TechTrain 61

Slide 62

Slide 62 text

現実的な移行プランのベストプラクティス決定したので、あとは検証ですね？ 2025-03-23 スー | TechTrain 62

Slide 63

Slide 63 text

2. 移行時の注意点とテスト方法 2025-03-23 スー | TechTrain 63

Slide 64

Slide 64 text

2. 移行時の注意点とテスト方法注意点 2025-03-23 スー | TechTrain 64

Slide 65

Slide 65 text

CDN / TTLでよくあるトラブルを抑える 2025-03-23 スー | TechTrain 65

Slide 66

Slide 66 text

CDN / TTLでよくあるトラブルキャッシュしてはいけないものがキャッシュされてしまうキャッシュが更新されず、古い画像が表示される意図しないタイミングでオリジンサーバーにアクセスが集中する 2025-03-23 スー | TechTrain 66

Slide 67

Slide 67 text

CDN / TTLでよくあるトラブルキャッシュしてはいけないものがキャッシュされてしまう ← 致命的なものはこれキャッシュが更新されず、古い画像が表示される意図しないタイミングでオリジンサーバーにアクセスが集中する 2025-03-23 スー | TechTrain 67

Slide 68

Slide 68 text

CDN/TTLでよくあるトラブルキャッシュしてはいけないものがキャッシュされてしまう ← 致命的なものはこれキャッシュが更新されず、古い画像が表示される意図しないタイミングでオリジンサーバーにアクセスが集中する特に個人情報系のものが漏れると事業が一発で終わる可能性がある 2025-03-23 スー | TechTrain 68

Slide 69

Slide 69 text

実際の検証していく 2025-03-23 スー | TechTrain 69

Slide 70

Slide 70 text

privateな画像のキャッシュの検証方法基本は先ほどと同じだが、動的な情報を表示するページは特に厳密に検証する。 ① レスポンスヘッダーを確認（推奨）ブラウザの開発者ツールや curl でヘッダーを確認し、以下を必ず確認する。 curl -I https://image.example.dev/personal-private/private.png 2025-03-23 スー | TechTrain 70

Slide 71

Slide 71 text

▼ 確認すべきヘッダー：ヘッダー内容 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

Slide 72

Slide 72 text

正しい例： HTTP/2 200 cache-control: no-store, private x-cache: Miss from cloudfront 2025-03-23 スー | TechTrain 72

Slide 73

Slide 73 text

間違った例（キャッシュされている）： HTTP/2 200 cache-control: max-age=3600 x-cache: Hit from cloudfront 2025-03-23 スー | TechTrain 73

Slide 74

Slide 74 text

② 動的ページの場合、Cookieや認証トークンに注意する動的ページでは、認証トークンやセッションCookieが含まれるため、必ずCloudFront の挙動設定を以下のようにする必要がある。 2025-03-23 スー | TechTrain 74

Slide 75

Slide 75 text

CloudFrontの設定方法（必須）： CloudFrontの「Behavior」設定で、キャッシュポリシーとして CachingDisabled （または相当するカスタムポリシー）を選ぶ。オリジンリクエストポリシーで、ヘッダーやCookieをS3またはオリジンサーバに渡すよう設定。キャッシュ対象としないパス（例： /personal-private/* ）をBehaviorで明示的に設定することが推奨される。例: Path pattern: /personal-private/* Cache policy: CachingDisabled 2025-03-23 スー | TechTrain 75

Slide 76

Slide 76 text

③ 実際に複数の異なるユーザーでテストする（必須）実際に複数ユーザーでログイン状態などを変えてアクセスし、意図しないキャッシュがないことをテストしてください複数のユーザーがログインして、別ユーザーのmypageが表示されないことを確認する。未ログイン時にmypageにアクセスして、個人ページが誤って表示されないことを検証する。 2025-03-23 スー | TechTrain 76

Slide 77

Slide 77 text

プライベートコンテンツに関する注意点（よくあるミス）デフォルトのキャッシュポリシーを利用すると、mypageのような動的ページが意図せずキャッシュされることがある。特に注意が必要なのは、ブラウザキャッシュとCloudFrontのキャッシュの違い： no-cache : ブラウザやCDNに対して再検証を要求するが、条件次第で一時的なキャッシュが発生する可能性がある。 no-store : 一切のキャッシュを禁止する最も厳しい指定（mypageなどで推奨）。認証情報(Cookieや認証ヘッダー)を含む場合、CloudFrontが適切にキャッシュを無効にするように設定する 2025-03-23 スー | TechTrain 77

Slide 78

Slide 78 text

推奨の設定まとめプライベートな画像などのファイルはCloudFrontに必ず明示的にキャッシュを無効化する。 CloudFront Behavior設定で明示的に CachingDisabled ポリシーを使用する。キャッシュ検証はレスポンスヘッダーの X-Cache と Cache-Control で厳密に行う。 2025-03-23 スー | TechTrain 78

Slide 79

Slide 79 text

全体まとめ 2025-03-23 スー | TechTrain 79

Slide 80

Slide 80 text

CDNの導入を現実的に着地させるプラクティスハイブリッド型アプローチ Step1（短期的対策）：複数ドメインのままCloudFrontを導入し、配信速度を即改善 Lambda@Edgeの利用は最小限に、パスベースで単純なマッピングを実施 Step2(長期的対策)：新しい統合されたS3バケットへ段階的に画像をコピー新規アップロード画像は統合後のS3バケットへ保存 Step3（長期的対策）：全画像を統合バケットに移動後、単一オリジン＋CloudFrontの構成へ移行 Lambda@Edgeを利用している場合は、将来的な停止を視野に設計 2025-03-23 スー | TechTrain 80

Slide 81

Slide 81 text

検証についてアプリケーションエンジニアの場合、全てを気にするのは難しい個人情報流出のところが一番マイナスの事業インパクトが大きいそこを重点的に検証しましょう！ 2025-03-23 スー | TechTrain 81

Slide 82

Slide 82 text

ご静聴ありがとうございました! 2025-03-23 スー | TechTrain 82

Slide 83

Slide 83 text

余談 2025-03-23 スー | TechTrain 83

Slide 84

Slide 84 text

こちらへまとめてあります。 2025-03-23 スー | TechTrain 84