Slide 1

Slide 1 text

1 Development of Mercari’s Web in 2019 ~Mercari Engineer’s meetup for students vol.3~ 2019/11/25 Kazutaka Matsumoto

Slide 2

Slide 2 text

2 はじめに ● 自己紹介 ● メルカリWebの状況 ● その他

Slide 3

Slide 3 text

3 自己紹介 松本和高 @_mkazutaka 2017/08~10 インターン 2018/04~ 新卒入社 WebPlatformチーム所属 Backend Engineer FXBot/Rust/WebAnimation Microservicesにジョインするには...略 php-srcで遊ぶよ

Slide 4

Slide 4 text

4 遍歴 2017/08: Channel / Box 2018/04: Anyone 2018/07: CRE 2018/10: オファー 2018/12: Merpay Help 2019/04: WebRearchi 2019/08: DefenceForce 2019/10: WebPlatform => PHP => PHP => PHP => Go => PHP => TypeScript/Go => PHP => PHP/Go

Slide 5

Slide 5 text

5 遍歴 2017/08: Channel / Box 2018/04: Anyone 2018/07: CRE 2018/10: オファー 2018/12: Merpay Help 2019/04: WebRearchi 2019/08: DefenceForce 2019/10: WebPlatform => PHP => PHP => PHP => Go => PHP => TypeScript/Go => PHP => PHP/Go

Slide 6

Slide 6 text

6 Web

Slide 7

Slide 7 text

7 メルカリとWeb ● メルカリはネイティブアプリからできたサービス ○ Webは機能がクライアントより少ない ○ Web独自のサービスも存在する(メルカリボックス・メルカリガイド)

Slide 8

Slide 8 text

8 ● PHP + Twig + Pimple + Symfony: EventDispatcher ○ Twig: Template Engine ○ Pimple: Service Locator メルカリのWeb(~2019/08~)

Slide 9

Slide 9 text

9 ● 状況変化 ○ Webにまつわる技術の変化: PWA/SSR/BFF/WebAssembly ○ メルカリ内でWebエンジニア数の増加 ● 技術進化とスケーラビリティについていけるアーキテクチャが必要 Web業界

Slide 10

Slide 10 text

10 Microservices化

Slide 11

Slide 11 text

11 Monolith Web Single PHP Server Team Mercari Team Mercari Box Team Mercari Guide Mercari Mercari Box Mercari Guide

Slide 12

Slide 12 text

12 Microservices Single PHP Server Team Mercari Team Mercari Box Team Mercari Guide Mercari Mercari Box Mercari Guide SSR GraphQL SPA REST API Simple HTTP server Microservices Team Mercari Microservices Team Mercari Box Microservices Team Mercari Guide

Slide 13

Slide 13 text

13 ideal Monolithic Service Feature ・ ・ ・ Microservice Microservice Microservice Microservice

Slide 14

Slide 14 text

14 Actual: Chaos Monolithic Service Feature ・ ・ ・ Monolithic Service Feature ・ ・ ・ Microservice Microservice Microservice Microservice Microservice Microservice ● Microservices化によってお客さまに影響があってはならない

Slide 15

Slide 15 text

15 WebPlatform

Slide 16

Slide 16 text

16 ミッション メルカリWebのMicroservice化を推進し開発チームが安全 かつ容易に開発・運用を行えるようにするため、Web全体に またがる意思決定や基盤構築を行っていく

Slide 17

Slide 17 text

17 現在のアーキテクチャ GraphQL SSR mercari-web mercari-api Web Gateway Session service CDN

Slide 18

Slide 18 text

18 Session Consistency ● リアーキ前後で Sessionに関わる挙動が変わってはいけない ● セッション情報の一貫性の担保の ためのマイクロサービスを作成 ○ GraphQLからアクセスのたびに PHPWebに問い合わせる Session service Request Call to get session every time Response Session data GraphQL mercari-web

Slide 19

Slide 19 text

19 デプロイメントフロー ● マイクロサービス環境でのメルカリWebのリリースフロー

Slide 20

Slide 20 text

20 ● メルカリはそれぞれが持つ問題解決方法の提案できる環境 ○ フローが整っているから ● 立場に関係なく提案/議論を行える環境へ ○ リアーキテクチャ自体が DesignDoc上で議論され 実装されている 意思決定のフロー: DesignDoc

Slide 21

Slide 21 text

21 PHP Web ロードマップもデザインドック上で ● 大きな意思決定が必要 ○ Webを開発するチームすべてに影響がある ● どう決定する? ○ トップダウン? => No ○ マネージャが決定する? => マネージャを含めた自分たちのチームで ○ 勝手に決めるの? => チームには意思決定を決めるためのツールがある

Slide 22

Slide 22 text

22 WebPlatform: 主な技術スタック ● Go, PHP, Typescript ● Nextjs, GraphQL ● GCP, Docker, Kubernetes, Terraform ● CircleCI, Spinnaker ● Datadog, Kibana, Sentry

Slide 23

Slide 23 text

23 画像NoIMage 週1h: Kubernetes Pattern WebPlatform: 勉強会

Slide 24

Slide 24 text

24 ミッション メルカリWebのMicroservice化を推進し開発チームが安全 かつ容易に開発・運用を行えるようにするため、Web全体に またがる意思決定や基盤構築を行っていく

Slide 25

Slide 25 text

25 まとめ ● 自己紹介 ● メルカリWebの状況 ● その他