Yahoo!検索におけるNext.jsの利用事例 #ヤフー名古屋

Yahoo!検索における Next.jsの利用事例 2019年8月7日 ヤフー株式会社 岸本 耀平 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

自己紹介 • 岸本耀平 • 2015年入社 エンジニア • ヤフーの検索サービスの 開発担当 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2

Yahoo!検索 YAHOO! JAPAN Q ヤフー 検索 ウェブ 画像 動画 リアルタイム 知恵袋 求人 地 Q ヤフーショッピング ヤフーカード ヤワートラベル ヤフーメール ヤフーニュース ヤフー m.yahoo.co.jp/ 日本最大級のポータルサイト。検索、オークション、ニュ ース、天気、スポーツ、メール、ショッピングなど多数 のサービスを展開。 Yahoo!ニュース Yahoo!ショッピング Yahoo!検索 ファイナンス スポーツナビ こちらで検索 Yahoo! Yahoo! Inc.は、かつて存在したアメリカ合衆国 の企業である。インターネット関連サービス... YAHOO! JAPAN YAHOO! JAPAN Q 名古屋 天気 検索 ウェブ 画像 動画 リアルタイム 知恵袋 求人 地 Q 名古屋 天気予報 名古屋 天気 10日間 名古屋 天気 1ヶ月 名古屋 天気 過去 愛知県名古屋市中区の天気 Yahoo!天気・災害 今日 15:00の天気 晴れ 33°C 降水量: 0mm/h 湿度: 48% 3時間ごと 週間天気 雨雲レーダー 7/23 18:00 21:00 7/24 0:00 3:00 6:00 9:00 12:00 15:00 18 30°C 28°C 26°C 25°C 25°C 29°C 33°C 34°C 3 天気を詳しく見る → 名古屋市の1時間天気 - 日本気象協会 tenki.jp tenki.jp/lite/forecast/5/26/5110/23100/1hour.html 名古屋市の1時間ごとの天気、気温、降水量などに加え、 台風情報、警報注意報を掲載。3日先までわかるからお出 かけ計画に... 名古屋駅周辺のグルメランキング (2749件) Yahoo!ロコ 200 本陣 2 丸の内 3 名駅 伏見 栄 中村公園 C1 栄 中区 東新 2019年7月15日~7月21日に検索された話題のスポット 1 味仙 名古屋駅店 予算: 昼 ~2,000円 夜 ~4,000円 アクセス: 国際センター駅から徒歩1分 PayPay支払い可 電話 道案内 2 猿カフェ ルーセントタワー店 ネット予約可 予算: 昼 1,500円 夜 3,000円 アクセス: 名古屋駅から徒歩3分 電話 道案内 3 イチビキ 予算: 昼 ~3,000円 夜 ~3,000円 アクセス: 近鉄名古屋駅から徒歩5分 電話 道案内 名古屋駅のおすすめグルメなら | r.gnavi.co.jp Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 3

今日お話すること • Next.jsについて紹介 • Yahoo!検索におけるNext.jsのプロ ジェクト構成やカスタマイズ内容を紹 介 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 4

Yahoo!検索におけるNext.jsの利用 • 検索サービスのフロントエンドの React化が進行中 • Reactアプリケーションを開発するため に必要な機能が備わっているため利用 • ReactのSSR • JSビルドの設定 • 開発時の自動リロード(HMR)のサポート Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 5

Next.jsについて • Reactを利用したウェブサイトをシンプ ルに作るためのフレームワーク • Reactのサーバサイドレンダリング (SSR)のサポート • Webpack/BabelによるJSビルドをラッ プしたコマンドが用意されている Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 6

フロントエンドのシステム構成と役割 • BFF (Node.js サーバ) • Next.jsによるSSR • Cookieやヘッダの処理 • バックエンドAPIの集約 • Object Storage • 静的JSファイルの配信 • Reverse Proxy • パス別のリクエスト振り 分け • レスポンスキャッシュ Reverse Proxy キャッシュ LB BFF (Node.js サーバ) • Express + Next.js Object Storage (S3互換) • JSファイル バックエンドAPI/検索エンジン Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 7

デプロイ 1. CIでサーバサイド/クライアン トサイドのJSをビルド 2. JSファイルのObject Storageへのアップロード 3. BFFの更新 • JSを先に配置してアクセスで きるようにしておくことで、 Sticky Session不要 Reverse Proxy キャッシュ LB BFF (Node.js サーバ) • Express + Next.js Object Storage (S3互換) • JSファイル ②アップロード ③デプロイ CI/CD ① next build Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 8

Next.js × TypeScript • Reactコンポーネントの記述にTypeScriptを利用 • Next.js 8まで … next-typescriptプラグインを 利用 • babel/preset-typescriptによるビルド • fork-ts-checker-webpack-pluginを追加するこ とでビルド時の型のチェックが可能 • Next.js 9から … 組み込みでTypeScriptサポー トが追加 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 9

Next.js × CSS • styled-jsxを利用 • Next.jsで組み込みサポートCSS-In-JS • 利用されているCSSのみSSRでheadタグに出 力することが可能 • Reactコンポーネントのマークアップ(tsx)と 独立したSCSSファイルに記述 • 可視性向上+デザイナーさんが扱いやすい形式 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 10

Component.tsx
import * as React from 'react';
const style = require('./Component.scss').default;
const Component: React.FC<{name: String}> = props => {
return (
<div>
Hello World <span className="highlight">{props.name}!</span>
<style jsx global>{style}</style>
</div>
);
};
export default Component;
Component.scss
.highlight {
background: linear-gradient(transparent 60%, #ffff66 60%)
}
Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

styled-jsxとcss-loaderの併用 • styled-jsxのコンポーネントCSSよりも先/後に読み込 みたいCSSがある • リセットCSSを適用したい場合 • パッチ的なCSSを適用したい場合 • Webpackの設定で Rule.oneOf + Rule.resourceQueryを利用し、CSSのloaderを変更 • css-loader … require('./imports.scss?cssloader') • styled-jsx … require('./component.scss') • styled-jsxのCSS出力の前後でcss-loaderのCSSを出 力を行う Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 12

その他のカスタマイズ • Polyfill • Bundle Analyzer • next-without-jest Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 13

Next.jsのビルドのカスタマイズについて • Webpack/Babelの設定変更が可能 • Webpack: next.config.js • Babel: .babelrc • 公式リポジトリのexamplesディレク トリにカスタマイズ例が多数ある Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 14

さいごに • Yahoo!検索におけるNext.jsの設定カ スタマイズやシステム構成を紹介しま した • Next.jsを利用したサービス開発の参 考になれば幸いです Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 15

ご清聴 ありがとうございました YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.