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
110
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
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.2k
はてなインターンシップ2024 RDBMS ブートキャンプ講義資料
hatena
0
960
はてなインターンシップ2024 フロントエンドブートキャンプ講義資料
hatena
0
880
はてなインターンシップ2024 コンテナ講義資料
hatena
0
1k
はてなインターンシップ2024 コンテナオーケストレーション講義資料
hatena
0
870
はてなインターンシップ2024 インフラ講義資料
hatena
0
900
はてなインターンシップ2024 AI 講義資料
hatena
0
880
はてなインターンシップ2024 ブログライティング講義資料
hatena
4
3.2k
トップダウン・ボトムアップの両面から作るチーム内マトリクス組織
hatena
0
10
Other Decks in Technology
See All in Technology
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
110
脳波を用いた嗜好マッチングシステム
hokkey621
0
170
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
240
php-conference-nagoya-2025
fuwasegu
0
110
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
280
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
180
The Future of SEO: The Impact of AI on Search
badams
0
240
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
ローカルLLMを活用したコード生成と、ローコード開発ツールへの応用
kazuhitoyokoi
0
140
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
340
EDRの検知の仕組みと検知回避について
chayakonanaika
2
850
分解して理解する Aspire
nenonaninu
2
490
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
How to Ace a Technical Interview
jacobian
276
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Speed Design
sergeychernyshev
27
800
GraphQLとの向き合い方2022年版
quramy
44
13k
The Invisible Side of Design
smashingmag
299
50k
Unsuck your backbone
ammeep
669
57k
For a Future-Friendly Web
brad_frost
176
9.5k
Designing for Performance
lara
604
68k
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