8年もののサービスをフルリプレースした話

by Kazu

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© DMM.com 15 ダイナミック・レンダリングとはクローラのリクエストのみ事前にレンダリングしたHTMLを返却し、ユーザのリクエストはレンダラを経由せず、通常通りレスポンスするテクニック引用: ダイナミックレンダリングを実装する | Google 検索デベロッパーガイド | Google Developers https://developers.google.com/search/docs/guides/dynamic-rendering?hl=ja

Slide 16

Slide 16 text

© DMM.com 16 ダイナミック・レンダリング実装 ● レンダラ部 Lambda@Edge上でヘッドレスChromeを操作する CloudFrontイベントにフックしてUA判定やレンダリングを行う ● ツール chrome-aws-lambda（Lambda上でPuppeteerを操作できるライブラリ） Rendertronはサーバを用意する必要があったりと面倒だった（GCPなら簡単みたい？）

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© DMM.com 29 感想よかった点 ● コード自動生成により手間の大幅削減 ● インターフェースが固まった状態で開発に臨めるため手戻りがほとんどない ● 実装とAPIドキュメントとで乖離が生まれない困った点（GraphQLに対してではないけど ...） ● スキーマが変わるたびにローカル環境が壊れる＆テストが落ちる ○ ブランチやリリースタグ指定でスキーマ定義参照することで解決 ● ApolloClientでどこまでのデータを管理するか ○ ReactiveVariavlesでローカルステートもApolloで管理がよさそう