PR TIMESをSSRした裏側 /phpcondo-2024

Transcript

1. PR TIMESを SSRに移行した裏側 PHPカンファレンス北海道2024 スポンサーLT 1
2. 自己紹介 • yuya.miyazaki ◦ すか ◦ @sucalul in X, github • 所属 ◦ 株式会社PR TIMES ◦ 2022年4月〜現在 ◦ プレスリリースページのバックエンド ◦ 新卒2年目 • 職業 ◦ バックエンドエンジニア ◦ PHP/Go 2
3. プレスリリース配信サービス「 PR TIMES」を運営。 企業、メディア、生活者をニュースでつなぐサービスとして、 2007年よりスタート。 3
4. PR TIMESをSSRに移行した裏側 • PR TIMES ◦ プレスリリースページ ◦ https://prtimes.jp/main/html/rd/p/000001308.000000112.html 4
5. 今回の発表について • 開発者ブログにて公開してます ◦ https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with -nextjs/ 5
6. • 背景 • 前提 • 技術選定・構成 • キャッシュ • リリースの流れ 6 話すこと
7. 背景 • 今後プレスリリースページの機能追加していくにあたってリプレイス • UIリニューアルプロジェクトの予定があった ◦ こちらもリリースを行っている ◦ https://prtimes.jp/main/html/rd/p/000001357.000000112.html 7
8. 前提 • Fastly移行 • アクセスログ改善 8
9. 前提 • Fastly移行 ◦ Next.jsを活用してSSRの結果をCDN上に柔軟にキャッシュさせるため • アクセスログ改善 9
10. 前提 • Fastly移行 ◦ Next.jsを活用してSSRの結果をCDN上に柔軟にキャッシュさせるため • アクセスログ改善 ◦ アプリケーションにリクエストが到達する前提の構成になっており、Next.jsで SSRしたHTMLをCDN上でキャッシュさせる構成を取れない 10
11. 技術選定・構成 • 元々はPHP + Smarty + jQuery • リプレイス後はNext.jsを採用し、SSRを行う • DBへのアクセスはVPC内でバックエンドサーバーに問い合わせる 11
12. 技術選定・構成 • 元々はPHP + Smarty + jQuery • リプレイス後はNext.jsを採用し、SSRを行う • DBへのアクセスはVPC内でバックエンドサーバーに問い合わせる →PHPのAPIサーバーからデータを返し、SSRを行いクライアントに HTMLを返す。その結果をCDNでキャッシュする構成。 12
13. 13 技術選定・構成
14. • SSRした理由 ◦ プレスリリースページは、一般に公開されているため、パフォーマンスと検索エ ンジンの指数化が重要 ◦ 検索エンジンになるべく早くインデックスさせたい ◦ SPAよりSSR の方が、検索結果への反映までの時間の面で通常有利と言わ れている 14 技術選定・構成
15. • 公開情報を載せて SSR した HTML を、CDN でキャッシュさせて配 信する構成 • 意識したこと ◦ オリジンサーバーにキャッシュを持たない ▪ 多段キャッシュはしない ◦ フロントエンド側のミスによって情報漏洩が生じうる構成を初めから取らない 15 キャッシュ
16. • フロントエンド側のミスによって情報漏洩が生じうる構成を初めから 取らない ◦ ユーザーによって閲覧できる限定コンテンツがあり、それらの非公開情報につ いては部分的にSSRを避け、クライアントサイドからデータ取得を行い CSR する ◦ 全ユーザーに公開可能な情報を取得するAPIと非公開情報を取得するAPIを 作り、API自体を分ける 16 キャッシュ
17. • 配信割合を刻んでの段階リリース • Fastly の Director 機能の Random を使用 17 リリースの流れ 20%の例
18. • NewRelicでアクセス量、ブラウザ到達比率、CPU・メモリ使用率、 キャッシュHIT 率、API のレスポンスステータスなどを見るダッシュ ボード、および一部のメトリクスで Slack へのアラートを設定して監 視 18 リリースの流れ
19. • PR TIMESでは日々このようなリプレイス・リニューアルを行ってい ます • より詳細については開発者ブログをご覧いただけますと幸いです • ブースもやっているのでぜひお越しください！ 19 最後に
20. カジュアル面談（全職種）👆 エンジニア募集職種👆 エンジニア採用サイト👆 　PR TIMES 採用情報 検索 私たちと一緒に 「未来の変化」 をつくっていく仲間を募集しています。 採用情報のご案内 20