Building frontend development environment and web performance monitoring

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