PR_TIMESにおけるFastlyの導入と運用について.pptx.pdf

Transcript

1. PR TIMESにおけるFastlyの導入と運用について
2. 自己紹介 やなぎ（@apple_yagi） PR TIMES 開発本部 フロントエンドエンジニア 新卒1年目の時にFastlyを導入しプレスリ リース画像の画質改善を行う - PR TIMESのReact/Next.js化を進めており、 直近ではトップページをNext.jsに移行
3. 会社紹介
4. Product｜基幹事業 プレスリリース配信サービスを運営 企業の一次情報が日本で最も集まるプラットフォームとして、国内トップシェア • 利用企業社数 • 国内上場企業利用率 • プレスリリース数 • メディアユーザー数 • パートナーメディア • サイト閲覧数 • SNSアカウント • 個人ユーザー数 10万社超え 57.8％ 34,092件 / 月 26,911名 252媒体 8,984万PV / 月 Facebook 130,003 X 459,185 198,503名
5. Product｜事業ポートフォリオ プレスリリース配信サービス 「PR TIMES」 ストーリー配信サービス 「PR TIMES STORY」 広報・PRの効果測定サービス 「PR TIMES Webクリッピング」 動画PRサービス 「PR TIMES LIVE」「PR TIMES TV」 クライアントとメディアのパートナーとして広報・ PR支援の実施 「PRパートナー事業」
6. Product｜事業ポートフォリオ タスク・プロジェクト管理ツール 「Jooto」 カスタマーサポートツール 「Tayori」 アート特化型オンライン PRプラットフォーム 「MARPH」 トレンドニュースメディア 「ストレートプレス」 Z世代向けWebメディア 「isuta」 若手ビジネスパーソン向け Webメディア 「U-NOTE」 PR・広告・プロモーション事例メディア 「PR EDGE」 スタートアップメディア 「THE BRIDGE」
7. PR TIMESにおける Fastlyの初導入
8. https://developers.prtimes.jp/2022/02/24/press_release_image_optimization/
9. プレスリリース画像の画質改善 改善前の画像 - 表示する画像サイズと同じになるようリサイズ処理を行っていた - Retinaディスプレイなどの高画質ディスプレイが普及するまではこの対 応は最適だった - しかし現在では実際に画面に表示されるサイズよりも大きな画像を配信 しないと綺麗に表示されなくなった
10. プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly Image Optimizer（IO）を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
11. プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly Image Optimizer（IO）を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
12. プレスリリース画像の画質改善 以前の構成（オンプレミスのストレージサーバーへ画像をアップロード）
13. プレスリリース画像の画質改善 新しい構成（オンプレミスとS3のどちらにも画像をアップロード）
14. プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly Image Optimizer（IO）を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
15. プレスリリース画像の画質改善 プレスリリース画像のみをFastlyから配信
16. Fastly Image Optimizerを選択した理由 - Instant Purgeによる高速なキャッシュパージ - プレスリリースを配信するというサービス特性上、すぐにキャッシュ を削除することができるのは重要だった - VCLを用いて設定を柔軟に変更できる - 将来的にNext.jsを導入し、SSRした結果をCDNでキャッシュすること を視野に入れていたため、今後を見据えた上で必要であった - また、Next.js以外にも様々な場面で活用しており、開発工数を大幅に 削減することができている
17. プレスリリース画像の画質改善の結果
18. Fastlyを管理するTerraformの 構成・運用について
19. Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
20. Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
21. Terraformのディレクトリ構成 prtimes-fastly-terraform ├── .github/ │ ├── actions/ │ └── workflows/ │ ├── terraform_plan.yaml │ └── terraform_apply.yaml ├── ci/ ├── terraform/ │ ├── prtimes.jp │ ├── prcdn.global.ssl.fastly.net │ └── www.prtimes.jp ├── .gitignore ├── README.md └── renovate.json
22. Terraformのディレクトリ構成 prtimes-fastly-terraform ├── .github/ │ ├── actions/ │ └── workflows/ │ ├── terraform_plan.yaml │ └── terraform_apply.yaml ├── ci/ ├── terraform/ │ ├── prtimes.jp │ ├── prcdn.global.ssl.fastly.net │ └── www.prtimes.jp ├── .gitignore ├── README.md └── renovate.json terraform plan/applyはGitHub Actionsで 実行しローカル環境では実行しない
23. Terraformのディレクトリ構成 prtimes-fastly-terraform ├── .github/ │ ├── actions/ │ └── workflows/ │ ├── terraform_plan.yaml │ └── terraform_apply.yaml ├── ci/ ├── terraform/ │ ├── prtimes.jp │ ├── prcdn.global.ssl.fastly.net │ └── www.prtimes.jp ├── .gitignore ├── README.md └── renovate.json ドメインごとにtfstateを分割し、 コードの共有などは一切行わない方針
24. Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
25. リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする - GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
26. リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする - GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
27. Pull Requestのコメントにplan結果を表示
28. 使用しているライブラリ suzuki-shunsuke/tfcmt (https://github.com/suzuki-shunsuke/tfcmt) - terraform plan, applyの結果をPull RequestにコメントしてくれるCLI - デフォルトで見やすいコメントを生成してくれる - 使い方がシンプル $ tfcmt -var target:<working directory> plan -- terraform plan
29. リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする - GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
30. Pull Requestのコメントにapply結果を表示 使用しているライブラリは先ほどと同様 tfcmt
31. リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする - GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
32. terraform applyではactivateを無効に設定 DraftでVersionが作成
33. activateを無効にしている理由 - VCLのterraform planの差分が見づらい問題 - 1行の変更でも全ての行が差分として出てきてしまう
34. FastlyのコンソールでVCLのDiffを確認する - 変更した行の差分が表示されるため、変更内容を確認しやすい - 意図した差分になっているか必ず確認してからactivateしている
35. その他運用Tips - 全ての変更をterraform applyで行うということはなく、コンソールから直 接変更することも許容する - コンソールで変更した内容は必ず terraform に反映する - 新規で作成したリソースなどは terraform import で tfstate を生成 する - terraform importを行う時は tfmigrate を用いて安全に行う - https://github.com/minamijoyo/tfmigrate