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

Building frontend development environment and web performance monitoring

0580c8d5697963abaa4583e26ac16ac0?s=47 Hayato Koriyama
July 03, 2019
Programming
2
1k

Building frontend development environment and web performance monitoring

0580c8d5697963abaa4583e26ac16ac0?s=128

Hayato Koriyama

July 03, 2019
Tweet

More Decks by Hayato Koriyama

See All by Hayato Koriyama
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
3
180
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
1
300
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
1
310
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
0
360

Other Decks in Programming

See All in Programming
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
0
180
D5744e72b6a5e6673f991cab987a31ab?s=48 siketyan
1
110
Ad764891660aca92abb3ae39879b1b36?s=48 komagata
1
1.8k
1d5a7a934b466ede82b89a39b1404c0b?s=48 daiki1020
0
1.1k
6338c8fa4e2e6325094fe30b1e9f9443?s=48 malvinstn
1
640
9ed92fc8760bf8b6ea2a034022052b42?s=48 takaram
1
1.2k
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
0
140
1c2b62114ede7d8cb897bf19b999d233?s=48 muttsu_623
0
500
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
1
480
E4acf8d83d816ef2ff215fb99401469f?s=48 pdone
0
210
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
1
370
6165f5bae67e249133eba24da4b93780?s=48 trajchevska
2
350

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
287
110k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
7
670
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
740
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
14k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
17
1.1k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
14
1.1k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.5k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.1k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k

Transcript

  1. 1 Building frontend development environment and web performance monitoring フロントエンド開発環境の構築とパフォーマンス監視

    Mercari x Merpay Frontend Tech Talk vol.2

  2. 2 (Hayato Koriyama) Mercari JP Web Platform DevOps @nekobato

  3. 3 What is Mercari JP Web DevOps Agenda Why Web

    DevOps? Building & Monitoring 02 03 01

  4. 4 What is Web DevOps? --

  5. 5 Mercari JP Web Re-architecture DevOps Members

  6. 6 Mercari JP Web Re-architecture Project Frontend + α (Backend

    + SET) Recent Mercari JP Web Team New technical stack

  7. 7 Mercari JP Web Re-architecture Project ViewDev (Frontend) + Backend

    + DevOps SSR Frontend GraphQL Server SSR Backend Server Session Server microservices Web Gateway New web team

  8. 8 ↓Frontend Engineer ↓UI Designer ↓BlockChain Engineer ↓Frontend Engineer Web

    DevOps

  9. 9 Mercari JP Web Frontend Stack

  10. 10 Mercari JP Web DevOps Stack microservice platform

  11. 11 Why DevOps?

  12. 12 Developers working on... - Develop features - Make local

    development environments - Configure error tracking - Configure logging system - Configure performance monitoring - Maintenance CircleCI jobs - Make deploy pipeline - …and so on

  13. 13 Why DevOps? To focus on development

  14. 14 Web Re-architecture DevOps

  15. 15 Web Re-architecture DevOps

  16. 16 Frontend DevOps Toolset E2E Performance Monitoring Frontend Error Tracking

    Build Development Environment

  17. 17 In CircleCI, workflow add a comment to each Pull

    Request DevTools

  18. 18 Storybook static files per Pull Request https://[ internal Website

    ]/[Repository name]/[Pull Request Number]/storybook AWS S3 Push Commit Build Storybook Upload Assets

  19. 19 Bundle Analyzer per Pull Request

  20. 20 Bundle Analyzer per Pull Request https://[ internal Website ]/[Repository

    name]/[Pull Request Number]/analyze/server https://[ internal Website ]/[Repository name]/[Pull Request Number]/analyze/client AWS S3 Push Commit Build Storybook Upload Assets

  21. 21 Check Modules License

  22. 22 Check Vulnerability

  23. 23 Monitoring

  24. 24 Calibreapp

  25. 25 Calibreapp - First Meaningful Paint - Speed Index Alert

    threshold: 20% slower than recent Mercari JP Web (measured at 2019-02-18) https://timkadlec.com/2014/01/fast-enough/ SLI/SLO

  26. 26 Alert from the outlier Calibreapp

  27. 27 Calibreapp - Caused from the new feature - Our

    network incident - Issues on Calibreapp This alert is...

  28. 28 Calibreapp - Snapshot per hour - Extract median of

    recent 14 snapshots - Alert if the median exceeds the threshold Extract median of recent 14 snapshots

  29. 29 Calibreapp Carousel...

  30. 30 Sentry Error tracking service

  31. 31 Sentry - Sentry ⇔ JIRA Issue Link - Slack

    alert notification - An issue is first seen - An issue is seen more than N times in 1m

  32. 32 Sentry workflow 1. Sentry notification 2. On-call member create

    a ticket 3. Assign a member to ticket

  33. 33 Support & Knowledge for after release - On-call training

    for members - Describe Design Doc

  34. 34 Conclusion microservice platform