日経電子版だけじゃない！ 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3

2023/1/26
NIKKEI Tech Talk #3
メディア企業のWebフロントエンド～多様な開発と技術選定～

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 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
   サービス画面
   (アーカイブ時に削除しています )
   

   View Slide

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

   View Slide

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

   View Slide

8. 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
   構成
   アプリケーション設計
   

   View Slide

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

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

12. 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 の採用で初期開発の開発環境の構築コストは下げられたのはよかった
    ただ既存システム/運用との相性が悪い部分もいくつか見つかった
    

    View Slide

13. 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 に投稿されるコメント
    

    View Slide

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

    View Slide

15. 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
    テーマが増えても短期間でのリリースが可能に
    

    View Slide

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

    View Slide

17. 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 を活用
    

    View Slide

18. 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 の技術選定についての社内ブログ記事 )
    

    View Slide