Slide 1

Slide 1 text

【詳説】コンテンツ配信 システムの複数機能 基盤への拡張 id:nanto_vi (TOYAMA Nao) 2025-02-25 Hatena Engineer Seminar #32 はてなブログ新機能基盤の開発編 1

Slide 2

Slide 2 text

アジェンダ ● 自己紹介 ● はてなCMSで配信されるコンテンツ ○ 従来のコンテンツの配信 ○ CMSのコンテンツの配信 ● コンテンツのプレビュー ○ 従来のプレビューの配信 ○ CMSのプレビューの配信 2

Slide 3

Slide 3 text

自己紹介 ●  id:nanto_vi (TOYAMA Nao) ○ 株式会社はてな ○ ブログチーム Webアプリケーションエンジニア ○ 名古屋出身 ■ 『メダリスト』に登場するスケートリンクを懐かしみつつ観 ています。 3

Slide 4

Slide 4 text

はてなCMS 4

Slide 5

Slide 5 text

配信するコンテンツ 従来のコンテンツ ● Perlアプリケー ションから出力 CMSのコンテンツ ● Next.jsアプリケー ションから出力 5

Slide 6

Slide 6 text

従来のコンテンツの配信 6 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 4 ユーザー ※ CDN、ロードバランサー、キャッシュサーバー(Varnish)などは省略

Slide 7

Slide 7 text

● URLパスだけでは従来のコンテンツかCMSの コンテンツか判別不能 ○ リバースプロキシで事前に切り分けられない ● 限定公開のサイトの閲覧をどうするか ○ 従来はPerlアプリケーションで認可 CMSのコンテンツを配信するために 7

Slide 8

Slide 8 text

CMSのコンテンツの配信 8 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6 ユーザー Next.js アプリケーション 4 5

Slide 9

Slide 9 text

CMSのコンテンツの配信 ● CMSのコンテンツ かどうかはPerl アプリケーション で判別 ○ CMSのコンテンツなら、 Nginxの内部リダイレクト機能を使って配信 ● 限定公開の認可はPerlアプリケーションで行う 9 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6 ユーザー Next.js アプリケーション 4 5

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

CMSでのコンテンツの出力 ● Next.jsのビルド済みJSファイルははてなのドメイン (cms.hatena.ne.jp) から配信 ○ サイトのURLにはサブディレクトリが含まれることが あり、JSファイルのパスを解決できない ○ Next.jsのassetPrefix設定 ● internal_urlが外部から直接アクセスできないよう に、HTTP要求ヘッダの値によるアクセス制限 11

Slide 12

Slide 12 text

プレビュー機能 ● 実際の表示に近づけたい ので、管理画面のドメイン (cms.hatena.ne.jp)では なく、サイトのドメイン (cms.example.com)で 表示 12

Slide 13

Slide 13 text

プレビュー機能の変化 従来のプレビュー ● ページ内のタブ切り 替え、または新規 ウィンドウで開く ● プレビューウィンド ウを再読み込みして も内容はそのまま CMSのプレビュー ● 新規タブで開く ● プレビューウィンドウ (タブ)を再読み込みす ると、その時点で編集 中の内容がプレビュー される 13

Slide 14

Slide 14 text

従来のプレビューの配信 1. プレビュー内容を送信 2. トークンとキーを返す ○ 限定公開のサイトを閲覧 可にする認可トークン ○ プレビュー内容が勝手に 変更されないためのキー 3. プレビュー内容、トークン、キーを送信 14 1 ユーザー 管理画面のドメイン blog.hatena.ne.jp サイトのドメイン cms.example.com 2 3 4

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

再読み込みへの対応 1. 編集ページからプレビューページを開く 2. プレビューページから編集ページに、 ウィンドウ間通信(postMessage)を 用いて、認可トークンとキーを 問い合わせ 3. iframe内にプレビュー内容を読み込み ○ プレビューページを再読み込みすると、 2.の手順から再実行することになる 16

Slide 17

Slide 17 text

まとめ ● Nginxの内部リダイレクト機能を使い、 同一ドメイン下で従来のコンテンツ配信と CMSのコンテンツ配信を共存 ● 認証・認可は既存の仕組みを流用すること で、従来と同レベルの安全性を確保しつつ 開発工数を節約 17