Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PR_TIMESにおけるFastlyの導入と運用について.pptx.pdf
Search
Ryuya Yanagi
July 22, 2025
0
12
PR_TIMESにおけるFastlyの導入と運用について.pptx.pdf
Ryuya Yanagi
July 22, 2025
Tweet
Share
More Decks by Ryuya Yanagi
See All by Ryuya Yanagi
PR TIMESにおけるNext.jsとcacheの付き合い方
apple_yagi
3
2.7k
開発速度を上げつつ品質を保つためのフロントエンド開発
apple_yagi
1
860
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How GitHub (no longer) Works
holman
314
140k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GraphQLとの向き合い方2022年版
quramy
49
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Language of Interfaces
destraynor
158
25k
A Tale of Four Properties
chriscoyier
160
23k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Transcript
PR TIMESにおけるFastlyの導入と運用について
自己紹介 やなぎ(@apple_yagi) PR TIMES 開発本部 フロントエンドエンジニア 新卒1年目の時にFastlyを導入しプレスリ リース画像の画質改善を行う - PR
TIMESのReact/Next.js化を進めており、 直近ではトップページをNext.jsに移行
会社紹介
Product|基幹事業 プレスリリース配信サービスを運営 企業の一次情報が日本で最も集まるプラットフォームとして、国内トップシェア • 利用企業社数 • 国内上場企業利用率 • プレスリリース数 •
メディアユーザー数 • パートナーメディア • サイト閲覧数 • SNSアカウント • 個人ユーザー数 10万社超え 57.8% 34,092件 / 月 26,911名 252媒体 8,984万PV / 月 Facebook 130,003 X 459,185 198,503名
Product|事業ポートフォリオ プレスリリース配信サービス 「PR TIMES」 ストーリー配信サービス 「PR TIMES STORY」 広報・PRの効果測定サービス 「PR
TIMES Webクリッピング」 動画PRサービス 「PR TIMES LIVE」「PR TIMES TV」 クライアントとメディアのパートナーとして広報・ PR支援の実施 「PRパートナー事業」
Product|事業ポートフォリオ タスク・プロジェクト管理ツール 「Jooto」 カスタマーサポートツール 「Tayori」 アート特化型オンライン PRプラットフォーム 「MARPH」 トレンドニュースメディア 「ストレートプレス」
Z世代向けWebメディア 「isuta」 若手ビジネスパーソン向け Webメディア 「U-NOTE」 PR・広告・プロモーション事例メディア 「PR EDGE」 スタートアップメディア 「THE BRIDGE」
PR TIMESにおける Fastlyの初導入
https://developers.prtimes.jp/2022/02/24/press_release_image_optimization/
プレスリリース画像の画質改善 改善前の画像 - 表示する画像サイズと同じになるようリサイズ処理を行っていた - Retinaディスプレイなどの高画質ディスプレイが普及するまではこの対 応は最適だった - しかし現在では実際に画面に表示されるサイズよりも大きな画像を配信 しないと綺麗に表示されなくなった
プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly
Image Optimizer(IO)を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly
Image Optimizer(IO)を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
プレスリリース画像の画質改善 以前の構成(オンプレミスのストレージサーバーへ画像をアップロード)
プレスリリース画像の画質改善 新しい構成(オンプレミスとS3のどちらにも画像をアップロード)
プレスリリース画像の画質改善 改善のために行ったこと - 大きめのサイズにリサイズ処理したプレスリリース画像をS3にアップロー ドするように変更する - 当時はプレスリリース画像をオンプレミスのストレージサーバーで管 理していた - Fastly
Image Optimizer(IO)を利用して、画像サイズ/形式を最適化し、 ユーザーに配信する
プレスリリース画像の画質改善 プレスリリース画像のみをFastlyから配信
Fastly Image Optimizerを選択した理由 - Instant Purgeによる高速なキャッシュパージ - プレスリリースを配信するというサービス特性上、すぐにキャッシュ を削除することができるのは重要だった -
VCLを用いて設定を柔軟に変更できる - 将来的にNext.jsを導入し、SSRした結果をCDNでキャッシュすること を視野に入れていたため、今後を見据えた上で必要であった - また、Next.js以外にも様々な場面で活用しており、開発工数を大幅に 削減することができている
プレスリリース画像の画質改善の結果
Fastlyを管理するTerraformの 構成・運用について
Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
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のディレクトリ構成 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で 実行しローカル環境では実行しない
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を分割し、 コードの共有などは一切行わない方針
Fastlyを管理するTerraformの構成・運用について - Terraformのディレクトリ構成 - リリースフロー
リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする
- GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする
- GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
Pull Requestのコメントにplan結果を表示
使用しているライブラリ suzuki-shunsuke/tfcmt (https://github.com/suzuki-shunsuke/tfcmt) - terraform plan, applyの結果をPull RequestにコメントしてくれるCLI - デフォルトで見やすいコメントを生成してくれる
- 使い方がシンプル $ tfcmt -var target:<working directory> plan -- terraform plan
リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする
- GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
Pull Requestのコメントにapply結果を表示 使用しているライブラリは先ほどと同様 tfcmt
リリースフロー - Pull Requestを出す - GitHub Actions上で実行したplan結果を自動でコメントに付与される - Pull Requestをマージする
- GitHub Actions上でapplyが実行される - Fastlyのコンソールに入り、VCLの差分を確認しactivateする - terraform applyではDraft versionを作るようにしている
terraform applyではactivateを無効に設定 DraftでVersionが作成
activateを無効にしている理由 - VCLのterraform planの差分が見づらい問題 - 1行の変更でも全ての行が差分として出てきてしまう
FastlyのコンソールでVCLのDiffを確認する - 変更した行の差分が表示されるため、変更内容を確認しやすい - 意図した差分になっているか必ず確認してからactivateしている
その他運用Tips - 全ての変更をterraform applyで行うということはなく、コンソールから直 接変更することも許容する - コンソールで変更した内容は必ず terraform に反映する -
新規で作成したリソースなどは terraform import で tfstate を生成 する - terraform importを行う時は tfmigrate を用いて安全に行う - https://github.com/minamijoyo/tfmigrate