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
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
Search
Hatena
February 25, 2025
Technology
0
530
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
Hatena Engineer Seminar #32 はてなブログ新機能基盤の開発編 の発表資料です
https://hatena.connpass.com/event/344958/
Hatena
February 25, 2025
Tweet
Share
More Decks by Hatena
See All by Hatena
はてなインターンシップ2024 HTTP, Web, API 講義資料
hatena
0
1.4k
はてなインターンシップ2024 RDBMS ブートキャンプ講義資料
hatena
0
1.2k
はてなインターンシップ2024 フロントエンドブートキャンプ講義資料
hatena
0
1.1k
はてなインターンシップ2024 コンテナ講義資料
hatena
0
1.2k
はてなインターンシップ2024 コンテナオーケストレーション講義資料
hatena
0
1.1k
はてなインターンシップ2024 インフラ講義資料
hatena
0
1.1k
はてなインターンシップ2024 AI 講義資料
hatena
0
1.1k
はてなインターンシップ2024 ブログライティング講義資料
hatena
5
3.7k
トップダウン・ボトムアップの両面から作るチーム内マトリクス組織
hatena
1
46
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
Kiroから考える AIコーディングツールの潮流
s4yuba
4
660
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
220
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.7k
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
180
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
360
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
Featured
See All Featured
Navigating Team Friction
lara
188
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Docker and Python
trallard
45
3.5k
For a Future-Friendly Web
brad_frost
179
9.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
185
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張 id:nanto_vi (TOYAMA Nao) 2025-02-25 Hatena Engineer Seminar
#32 はてなブログ新機能基盤の開発編 1
アジェンダ • 自己紹介 • はてなCMSで配信されるコンテンツ ◦ 従来のコンテンツの配信 ◦ CMSのコンテンツの配信 •
コンテンツのプレビュー ◦ 従来のプレビューの配信 ◦ CMSのプレビューの配信 2
自己紹介 • id:nanto_vi (TOYAMA Nao) ◦ 株式会社はてな ◦ ブログチーム Webアプリケーションエンジニア
◦ 名古屋出身 ▪ 『メダリスト』に登場するスケートリンクを懐かしみつつ観 ています。 3
はてなCMS 4
配信するコンテンツ 従来のコンテンツ • Perlアプリケー ションから出力 CMSのコンテンツ • Next.jsアプリケー ションから出力 5
従来のコンテンツの配信 6 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 4
ユーザー ※ CDN、ロードバランサー、キャッシュサーバー(Varnish)などは省略
• URLパスだけでは従来のコンテンツかCMSの コンテンツか判別不能 ◦ リバースプロキシで事前に切り分けられない • 限定公開のサイトの閲覧をどうするか ◦ 従来はPerlアプリケーションで認可 CMSのコンテンツを配信するために
7
CMSのコンテンツの配信 8 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6
ユーザー Next.js アプリケーション 4 5
CMSのコンテンツの配信 • CMSのコンテンツ かどうかはPerl アプリケーション で判別 ◦ CMSのコンテンツなら、 Nginxの内部リダイレクト機能を使って配信 •
限定公開の認可はPerlアプリケーションで行う 9 リバースプロキシ (Nginx) Perl アプリケーション 1 2 3 6 ユーザー Next.js アプリケーション 4 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
CMSでのコンテンツの出力 • Next.jsのビルド済みJSファイルははてなのドメイン (cms.hatena.ne.jp) から配信 ◦ サイトのURLにはサブディレクトリが含まれることが あり、JSファイルのパスを解決できない ◦ Next.jsのassetPrefix設定
• internal_urlが外部から直接アクセスできないよう に、HTTP要求ヘッダの値によるアクセス制限 11
プレビュー機能 • 実際の表示に近づけたい ので、管理画面のドメイン (cms.hatena.ne.jp)では なく、サイトのドメイン (cms.example.com)で 表示 12
プレビュー機能の変化 従来のプレビュー • ページ内のタブ切り 替え、または新規 ウィンドウで開く • プレビューウィンド ウを再読み込みして も内容はそのまま
CMSのプレビュー • 新規タブで開く • プレビューウィンドウ (タブ)を再読み込みす ると、その時点で編集 中の内容がプレビュー される 13
従来のプレビューの配信 1. プレビュー内容を送信 2. トークンとキーを返す ◦ 限定公開のサイトを閲覧 可にする認可トークン ◦ プレビュー内容が勝手に
変更されないためのキー 3. プレビュー内容、トークン、キーを送信 14 1 ユーザー 管理画面のドメイン blog.hatena.ne.jp サイトのドメイン cms.example.com 2 3 4
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
再読み込みへの対応 1. 編集ページからプレビューページを開く 2. プレビューページから編集ページに、 ウィンドウ間通信(postMessage)を 用いて、認可トークンとキーを 問い合わせ 3. iframe内にプレビュー内容を読み込み
◦ プレビューページを再読み込みすると、 2.の手順から再実行することになる 16
まとめ • Nginxの内部リダイレクト機能を使い、 同一ドメイン下で従来のコンテンツ配信と CMSのコンテンツ配信を共存 • 認証・認可は既存の仕組みを流用すること で、従来と同レベルの安全性を確保しつつ 開発工数を節約 17