Upgrade to Pro — share decks privately, control downloads, hide ads and more …

爆速の日経電子版開発の今

 爆速の日経電子版開発の今

Nikkei Tech Talk #3 メディア企業のWebフロントエンド~多様な開発と技術選定~ https://nikkei.connpass.com/event/268793/ で発表させていただいた際の資料です。

日経電子版の開発の今についてお話ししました。

Shinobu Hayashi

January 26, 2023
Tweet

More Decks by Shinobu Hayashi

Other Decks in Programming

Transcript

  1. 1
    Nikkei Tech Talk #3
    日本経済新聞社 デジタル編成ユニット 林 仁
    2023年01月26日
    爆速の日経電子版開発の今

    View Slide

  2. 2
    whoami
    ● サブスクリプション事業デジタル編成ユニット Web チーム
    ● Web Developer
    ○ フロントエンド, CDN
    ● Google Professional Cloud Architect
    ● 新卒1年目
    ● Member of pnpm
    ● OSS、ギター、お酒が好き
    林 仁(Shinobu Hayashi)
    @Shinyaigeek (Twitter/GitHub)
    #nikkei_tech_talk

    View Slide

  3. 3
    日経電子版 Web 開発の話をし
    ます
    #nikkei_tech_talk

    View Slide

  4. 4
    日経電子版って?
    ● 1876年 中外物価新報創刊 (日本経済新聞の前身 )
    ● 1996年 NIKKEI NET 創刊 (日経電子版の前身)
    ● 2010年 日経電子版創刊
    ● 有料購読登録者数80万人以上(資料作成時点)
    ● 月間3億アクセス以上
    ● 経済分野のニュースを中心に、スマホアプリ、 Web で配信
    ● 紙の新聞にはない、ニュースの AI推薦機能や保存したニュースを閲覧
    できるMyニュース機能など, パーソナライズ機能も提供
    #nikkei_tech_talk

    View Slide

  5. 5
    日経電子版の持つ事業特性
    ● マスメディアとしての側面
    ○ 情報インフラとして社会基盤の一部と言える
    ○ ユーザー数、アクセス数の多さ
    ○ → ダウンタイムが深刻
    ● ニュースメディアとしての側面
    ○ SNS での “バズり” によりアクセス数がスパイクしうる
    ○ また重大な事件が起きた時にも多大なアクセスがある
    ● 大規模なサービス展開
    ○ NIKKEI LIVE や選挙ページなど、 nikkei.com から多種多様な
    サービスが配信されている
    #nikkei_tech_talk

    View Slide

  6. 6
    日経電子版の爆速のユーザー
    体験への取り組み
    #nikkei_tech_talk

    View Slide

  7. 7
    #nikkei_tech_talk
    https://marketing.itmedia.co.jp/mm/articles/1712/21/news039.html

    View Slide

  8. 8
    #nikkei_tech_talk
    Google I/O 2019

    View Slide

  9. 9
    なぜ爆速を目指したいのか
    ● ”記事” という情報コンテンツをユーザーへと伝えるため
    ○ 読み込みが遅いと情報へとアクセスできる前にユーザーが離
    脱してしまう
    ○ より情報を伝えるための手段として、読み込み速度は事業価値
    的にもビジネスインパクト的にも肝
    ● SEO 上でも有利に
    ○ Google の策定した、Core Web Vitals が SEO スコアにも反映
    されるように
    ○ その指標の中にはパフォーマンス指標も ...
    #nikkei_tech_talk

    View Slide

  10. 10
    日経電子版 Web のサービス構成
    #nikkei_tech_talk

    View Slide

  11. 11
    日経電子版 Web のサービス構成
    ● CDN(Fastly) でサービスを結合している MicroServices
    ● 特定サービスでおきた障害の波及を防ぐ
    ● サービスに応じて、開発メンバーを編成できる
    ● なるべく CDN Cache から返す
    ○ 読み込み速度の向上
    ■ Origin Server への過負荷を防止する
    ■ オリジンサーバーで SSR ロジックの実行の省略
    ○ アクセス数のスパイクによる高負荷への耐久性向上
    ● Fastly の活用
    ○ 記事の更新時などに Instant Purge により CDN Cache を purge
    #nikkei_tech_talk

    View Slide

  12. 12
    電子版での CDN Cache 戦略
    ● ユーザーの認証情報は Cookie に詰められている
    ○ Origin Server のページを描画するロジックで必要なのは Incoming HTTP Request を
    送信しているユーザーの、契約ステータスといったセグメント情報
    ○ CDN で Cookie をセグメント情報へと解いてしまう
    ○ Origin Server へ HTTP Request を転送するときに、解いたセグメント情報を HTTP
    Request Header として詰める
    #nikkei_tech_talk

    View Slide

  13. 13
    電子版での CDN Cache 戦略
    ● Shared Cache として HTTP Response を CDN に Cache する
    ● Cookie 中のユーザー情報を CDN で解いてセグメント情報を Origin Server への Backend
    Request に載せそれに応じて Backend Response も変わる
    ● Backend Request に含まれるユーザーのセグメント情報によっても Shared Cache した HTTP
    Response を CDN から出し分けるために Vary Header を使う
    ● 認可だけでなく、A/B テストででも用いられている
    #nikkei_tech_talk

    View Slide

  14. 14
    電子版での CDN Cache 戦略
    #nikkei_tech_talk

    View Slide

  15. 15
    日経電子版の爆速の開発者体
    験への取り組み
    #nikkei_tech_talk

    View Slide

  16. 16
    > 日経といえば「爆速」のイメージが強いですが、昨今では「爆速」な上に生
    産性の爆上げにも注力しています。これまではテンプレートエンジンを用い
    てのHTML生成とWeb標準技術に振り切った技術選定でしたが、最近では
    React, Next.js, Rust といった新しいものを取り入れて基盤を置き換えつ
    つ、次世代基盤を開拓しています。その過程で様々なフロントエンドエコシ
    ステムに還元したいものも多く、フロントエンド技術コミュニティを応援したい
    と考えています。
    #nikkei_tech_talk
    JSConf 2022 スポンサー紹介文

    View Slide

  17. 17
    これからも爆速であり続けるために
    ● 今の開発基盤は 2017 年から開発されており、ところどころ技術的負
    債が存在する
    ● 開発対象サービスが多く、社員メンバーだけでなく業務委託 , 協力会社
    など多くの人員で開発されている
    ● 開発者体験の向上により、新しいサービス、より良いユーザー体験を
    実現するための開発をより早いサイクルで回せる
    ● そもそも働いていて気持ちのいい職場のためにも重要
    #nikkei_tech_talk

    View Slide

  18. 18
    直近の取り組み > アプリケーションパフォーマンスの外形監視
    ● アプリケーションパフォーマンスを外形監視できる基盤の “Reboot”
    ● わざわざ人の手で測定せずとも Performance Regression に気づけるように
    ○ SpeedCurve での Reporting、CI での LighthouseCI の実行
    ● 競合他社との比較設定の見直し
    ○ 組織として、アプリケーションパフォーマンスへの意識向上
    #nikkei_tech_talk

    View Slide

  19. 19
    直近の取り組み > ビルドパフォーマンスの改善
    ● コードベースのサイズが大きく、ビルド /テストでもかなり時間がかかっ
    ている
    ● 単純に TypeScript/JavaScript Compiler/Transpiler を babel から swc
    へと移行することで、ビルドパフォーマンスの改善を図った
    ● まずはローカル環境で、次に dev/staging 環境で、最後に本番環境へ
    と swc を投入し移行を完遂
    ● 1 サービスのビルドに 130 sec ほどかかっていたのが、 75 sec ほどま
    で改善された
    #nikkei_tech_talk

    View Slide

  20. 20
    直近の取り組み > Fastly VCL → [email protected] 移行検証
    ● 日経では Fastly VCL を大いに活用しているが、プログラマブルな処理は VCL
    で記述することは難しくメンテナンス性が落ちる
    ○ Fastly VCL から [email protected] へと移行することで解消できないか
    ○ またローカル/CI環境でのデバッグ、テストもできない
    ● 法人向けプランである 日経電子版 FOR OFFICE の社内報サービスや
    NIKKEI Financial で [email protected] への移行の検証が行われている
    ○ (まだ実戦投入はできていない )
    ● 鋭意検証中...…
    #nikkei_tech_talk

    View Slide

  21. 21
    Summary
    ● 爆速の日経電子版/開発の今
    ○ 日経電子版 Web 開発チームでは, 今なお爆速の情報メディアを
    目指している
    ● 爆速の/日経電子版開発の今
    ○ “爆速の電子版” というブランドの維持、さらなる爆速の実現のた
    めユーザー体験のみならず、開発者体験の爆速化への取り組み
    も行っている
    #nikkei_tech_talk

    View Slide

  22. 22
    ご清聴ありがとうございました!
    #nikkei_tech_talk

    View Slide