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
150
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
1
290
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
1
290
0580c8d5697963abaa4583e26ac16ac0?s=48 nekobato
0
360

Other Decks in Programming

See All in Programming
2bedb1eb8f841cd3c3ae584600b016e0?s=48 okunokentaro
1
500
70ae2d149767d4198aac83453481b8dd?s=48 amaotone
0
140
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
0
150
9987516c273a7874b12b742e7aef828f?s=48 smellman
0
220
4861686276b2f990387eaef28b099db0?s=48 niyarin
1
370
Bb49e68eb46070029845fb3022d9026f?s=48 yukilabo
1
200
F929f5d80ef8a23b67ad8ac6f08416cd?s=48 melix
0
420
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
140
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
6
2.6k
D2151968789d3a241fe9ce2c19936661?s=48 hisakakoji
0
440
40575ebf9c2f4a6e3bcb68630f446a3b?s=48 tomzoh
4
120
264b44c0c6d60336f8b6a0fbab118984?s=48 mmazour
0
150

Featured

See All Featured
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
285
110k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
185
14k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
51
4k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
12
3.9k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
12
1.6k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.7k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
245cee81a9c424266e5e401d844ea881?s=48 lara
13
2.4k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k

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