Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【詳説】コンテンツ配信 システムの複数機能 基盤への拡張

Hatena
February 25, 2025

【詳説】コンテンツ配信 システムの複数機能 基盤への拡張

Hatena Engineer Seminar #32 はてなブログ新機能基盤の開発編 の発表資料です
https://hatena.connpass.com/event/344958/

Hatena

February 25, 2025
Tweet

More Decks by Hatena

Other Decks in Technology

Transcript

  1. アジェンダ • 自己紹介 • はてなCMSで配信されるコンテンツ ◦ 従来のコンテンツの配信 ◦ CMSのコンテンツの配信 •

    コンテンツのプレビュー ◦ 従来のプレビューの配信 ◦ CMSのプレビューの配信 2
  2. 自己紹介 •  id:nanto_vi (TOYAMA Nao) ◦ 株式会社はてな ◦ ブログチーム Webアプリケーションエンジニア

    ◦ 名古屋出身 ▪ 『メダリスト』に登場するスケートリンクを懐かしみつつ観 ています。 3
  3. 従来のコンテンツの配信 6 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 4

    ユーザー ※ CDN、ロードバランサー、キャッシュサーバー(Varnish)などは省略
  4. CMSのコンテンツの配信 • CMSのコンテンツ かどうかはPerl アプリケーション で判別 ◦ CMSのコンテンツなら、 Nginxの内部リダイレクト機能を使って配信 •

    限定公開の認可はPerlアプリケーションで行う 9 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6 ユーザー Next.js アプリケーション 4 5
  5. Nginxの内部リダイレクト機能 A. ユーザーが https://cms. example.com/ foo にアクセス B. Perlアプリケーションが X-Accel-Redirect:

    internal_url 応答ヘッダ付きの応答を返す C. Nginxはinternal_url (Next.jsアプリケーション) に要求 を投げ、返ってきた応答をユーザーに返す 10 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6 ユーザー Next.js アプリケーション 4 5
  6. プレビュー機能の変化 従来のプレビュー • ページ内のタブ切り 替え、または新規 ウィンドウで開く • プレビューウィンド ウを再読み込みして も内容はそのまま

    CMSのプレビュー • 新規タブで開く • プレビューウィンドウ (タブ)を再読み込みす ると、その時点で編集 中の内容がプレビュー される 13
  7. 従来のプレビューの配信 1. プレビュー内容を送信 2. トークンとキーを返す ◦ 限定公開のサイトを閲覧 可にする認可トークン ◦ プレビュー内容が勝手に

    変更されないためのキー 3. プレビュー内容、トークン、キーを送信 14 1 ユーザー 管理画面のドメイン blog.hatena.ne.jp サイトのドメイン cms.example.com 2 3 4
  8. CMSのプレビューの配信 2., 3. 認可トークンは従来のPerl アプリケーションから取得 4., 5. プレビュー内容そのもの ではなく、内容を指す キーをやり取り

    • Nginxの内部リダイレクト およびNext.jsでPOST要求 本体を扱いづらいため 15 1 ユーザー 管理画面のドメイン cms.hatena.ne.jp サイトのドメイン cms.example.com 4 5 6 管理画面のドメイン blog.hatena.ne.jp 2 3