Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 日経電子版だけじゃない！ 日経の新規Webメディアの開発 2023/1/26 NIKKEI Tech Talk #3 メディア企業のWebフロントエンド～多様な開発と技術選定～ 日本経済新聞社 鈴木 智也

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 鈴木 智也 ● 日本経済新聞社 デジタル編成ユニット Web チーム所属 ● 2021年 中途入社 ● 日経電子版 Web、および新規メディアサービスの開発 ● 前職はクラウドベンダーでの技術サポート🌥 副業でWeb開発をしていたが、本格的に身につけていきたいと想い、転職して本業としてチャレンジ ● 趣味として昨年夏にカメラを購入して風景などを撮影して楽しんでいます📷 2

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 2022年は新規メディアサービスの開発も注力 日経電子版以外のサービス開発 3

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk サービスの概要紹介 4

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk テーマに特化した専門メディア群 https://www.nikkei.com/promotion/service/prime/ 2022年1月時点で以下の3つのメディアがリリースされている NIKKEI Mobility NIKKEI GX NIKKEI Tech Foresight NIKKEI Prime 5 サービス画面 (アーカイブ時に削除しています )

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 日経電子版 FOR OFFICE をご契約いただいた法人向けの 「社内報メディアのWebサービス + CMS」ホスティングサービス 社内報サービス 以降、「社内報」とします 6

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 7 まず前提

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 日経内で新規Webメディアサービスを立ち上げるには API Server Web Browser Webチームでは CDN(Fastly Service) とアプリケーションサーバ の構築を担当する DB ※このあたりは 　かなり簡略化しています CMS App Server CDN (Fastly) - コンテンツ(記事)の数は多い - インタラクティブな要素は少ない - 状態を持つコンポーネントも少ない - SEO も重要 (さきほどの社内報は違う) - API サーバがブラウザから直接アクセス する前提の設計ではないところがある - Server Side Renderirng で CDN のキャッシュ を活用する - SPA (Client Side Rendering) にする強いモチ ベーションはない 記事データ, … HTML, … HTML, … 8 構成 アプリケーション設計

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 新規メディア開発での取り組み 9 アプリケーションサーバ側

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 新規メディアでのアプリケーションサーバの開発基盤の選定 ● 作るものは API Server からデータを取得しHTMLを生成してクライアントに返すサービス ● 基本的に利用するフレームワークやライブラリはチームのエンジニアで決定できる ● そもそも既存サービスの日経電子版はWebアプリ開発用のフレームワーク(Next.js等)は使っていな い ○ TypeScript, Node.js, React(JSX) を利用 ○ webpack を利用して自分たちでビルドツールチェーンを組んでいる ● NIKKEI Prime / 社内報 ○ 日経電子版とはコンテンツ/ロジックや開発のライフサイクルが異なる ■ コードベースを共有せずにゼロベースで開発した方がよい ○ 開発期間が短かったので、ロジックと画面の構築に集中するために、ビルド、ルーティングやレンダリング部分はフ レームワークを利用したかった 手軽に SSR のアプリケーションを構築できる Next.js を採用 10

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk Next.js との付き合い方 ● URL のパスに basePath でプレフィックスをつける (Prime のみ) ○ サービスを提供するURL は https://www.nikkei.com/prime ○ アプリケーションサーバは www.nikkei.com を配信している Fastly の後段で動作し、パスベース( /prime )でルー ティングする ○ Next.js は /prime というパスがついている前提でリクエストを受けるようにするため basePath を設定する ● HTTP Caching の設定 ○ Next.js のページはデフォルトで Cache-Control に no-store をつけるのでキャッシュしない ○ サーバサイドのコードで Cache-Control や Fastly のための Surrogate-Control を明示的に付与する ○ キャッシュの事故防止のため、サーバサイドのコードで参照したリクエストヘッダフィールドはレスポンスの Vary に 追加する ○ アプリケーションが返すレスポンスのヘッダフィールドについてもテストコードを書いている 11

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk basePath の細かいつまずき ● basePath と既存のパス運用の相性 (prime) ○ ロギングの運用などの都合で、jsやcssなどの静的アセットの URL でパスのプレフィックスを既存のサービスと揃えた かった( 例えば /static など ) ■ だが basePath を利用するとそのプレフィックスの前に /prime などのパスが被ってしまうため都合が悪い ● ⭕/static/bundle.js ● ❌/prime/static/bundle.js ○ 代替策としてbasePath を使わず、個別のリソースにパスプレフィックスをつける方法を考える ■ Next.js では next/link での遷移時に /_next/data から配信される仕様がある ■ /_next/data は basePath 以外でパスプレフィックスをつけられない ● basePath つけないと CDN でルーティングできなくなる ○ 結局ロギングの運用を揃えるのを妥協して basePath を指定した 12 総合的にみてNext.js の採用で初期開発の開発環境の構築コストは下げられたのはよかった ただ既存システム/運用との相性が悪い部分もいくつか見つかった

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk コンポーネントカタログのホスティング ● Pull Request を作成すると対象ブランチのコードでのカタログがホスティングされる ● 仕組み ○ GitHub への push をトリガーに GitHub Actions を起動 ○ Storybook / Ladle を静的ビルドした結果を S3 + CloudFront あるいは Firebase でホスティング ○ Pull Request のコメントにカタログページの URL が投稿される 13 ブラウザ画面上でコンポーネントのUIを確認するために、実際のサービスの開発 環境などでログインする必要がなくなるため、迅速にレビューできる Pull Request に投稿されるコメント

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk Content Security Policy(CSP)の導入 (社内報) ブラウザ上のアプリケーションから意図しないホストへのリクエストを制限する ● 顧客のデータを扱うのでセキュリティリスクを下げる仕組みを導入するモチベーションも高い ● 新規サービスだと導入しやすい ○ 既存のサービスで導入しようとすると、意図せず必要なリクエストが制限されてしまう可能 性があり慎重に作業する必要がある 実際に付与されたレスポンスヘッダフィールド ここで許可しないホストへのリクエストは遮断される 違反時に Sentry に送られるレポート ● Next.js の next.config.js に記述するカスタムヘッダの設定を利用 ● アプリケーションで利用する以外のドメインをブロックする 14

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk テーマ機能の実装(スタイルの差し替え) (NIKKEI Prime) NIKKEI Prime では複数のメディアを一つのアプリ ケーションで提供している ● メディアごとに色使いなどを切り替えたい ○ NIKKEI Mobility ○ NIKKEI GX ○ NIKKEI Tech Foresight ● theme 機能がある CSS in JS は利用してい ない ● useInsertionEffect() Hook で URL ごとに import する css を切り替える ● CSS のカスタム変数を利用してテーマごと のスタイルの値を差し替えている 15 NIKKEI Mobility NIKKEI GX NIKKEI Tech Foresight テーマが増えても短期間でのリリースが可能に

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk 新規メディア開発での取り組み 16 CDN ( Fastly Service )側

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk Fastly による認証状態のチェック(社内報) ● 要件: 権限が無くなったユーザ(例: 退職者)からの社内報へのアクセスはブロックしたい ● 前提: ログイン後のユーザはトークンが Cookie にセットされる ● リクエストに含まれるユーザのトークンに不正がないか検証する処理を実装したい ○ トークンにも期限の情報が含まれているのでそのうち無効になるが、その期限内に管理サーバ側で権限を取り消した場 合もブロックしたい ● Fastly Service から API Server のトークン検証用 API を呼び出すことでチェックしている ○ アプリケーションサーバでチェックすると、全リクエストをFastlyのバックエンドに通さないといけなくなり HTTP キャッシュを活用できなくなる Web Browser App Server CDN (Fastly) API Server ②トークンの検証 ③ページの取得 17 ①ユーザリクエスト 管理 Server HTTP Caching 以外の用途でも認証などの仕組みに CDN を活用

Copyright Nikkei Inc. All rights reserved. #nikkei_tech_talk まとめ ● 新規Webメディアサービスの開発の紹介 ○ フレームワークとして Next.js を採用して初期開発をスムーズにした ○ 既存のシステムや運用と合わせながら新しいツールや技術の取り入れている ● 日本経済新聞社の Web フロントエンド ○ 新しい技術を取り入れながらの Web アプリケーションの開発 ○ CDN を活用した Web サービスの配信構成の構築 18 参考資料 ● 『日経の新媒体における、既存資産を活かすフロントエンド技術選定』 https://hack.nikkei.com/blog/promedia-tech-stack/ ( NIKKEI Prime の技術選定についての社内ブログ記事 )