Slide 1
Slide 1 text
1
Building frontend development environment
and web performance monitoring
フロントエンド開発環境の構築とパフォーマンス監視
Mercari x Merpay Frontend Tech Talk vol.2
Slide 2
Slide 2 text
2
(Hayato Koriyama)
Mercari JP
Web Platform
DevOps
@nekobato
Slide 3
Slide 3 text
3
What is Mercari JP Web DevOps
Agenda
Why Web DevOps?
Building & Monitoring
02
03
01
Slide 4
Slide 4 text
4
What is Web DevOps?
--
Slide 5
Slide 5 text
5
Mercari JP Web Re-architecture DevOps
Members
Slide 6
Slide 6 text
6
Mercari JP Web Re-architecture Project
Frontend
+
α (Backend + SET)
Recent Mercari JP Web Team New technical stack
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
8
↓Frontend Engineer
↓UI Designer
↓BlockChain Engineer
↓Frontend Engineer
Web DevOps
Slide 9
Slide 9 text
9
Mercari JP Web Frontend Stack
Slide 10
Slide 10 text
10
Mercari JP Web DevOps Stack
microservice platform
Slide 11
Slide 11 text
11
Why DevOps?
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
13
Why DevOps?
To focus on
development
Slide 14
Slide 14 text
14
Web Re-architecture DevOps
Slide 15
Slide 15 text
15
Web Re-architecture DevOps
Slide 16
Slide 16 text
16
Frontend DevOps Toolset
E2E Performance
Monitoring
Frontend Error
Tracking
Build
Development
Environment
Slide 17
Slide 17 text
17
In CircleCI, workflow add a comment to each Pull Request
DevTools
Slide 18
Slide 18 text
18
Storybook static files per Pull Request
https://[ internal Website ]/[Repository name]/[Pull Request Number]/storybook
AWS S3
Push Commit
Build Storybook
Upload Assets
Slide 19
Slide 19 text
19
Bundle Analyzer per Pull Request
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
21
Check Modules License
Slide 22
Slide 22 text
22
Check Vulnerability
Slide 23
Slide 23 text
23
Monitoring
Slide 24
Slide 24 text
24
Calibreapp
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
26
Alert from the outlier
Calibreapp
Slide 27
Slide 27 text
27
Calibreapp
- Caused from the new feature
- Our network incident
- Issues on Calibreapp
This alert is...
Slide 28
Slide 28 text
28
Calibreapp
- Snapshot per hour
- Extract median of recent 14 snapshots
- Alert if the median exceeds the threshold
Extract median of recent 14 snapshots
Slide 29
Slide 29 text
29
Calibreapp
Carousel...
Slide 30
Slide 30 text
30
Sentry
Error tracking service
Slide 31
Slide 31 text
31
Sentry
- Sentry ⇔ JIRA Issue Link
- Slack alert notification
- An issue is first seen
- An issue is seen more than N times in 1m
Slide 32
Slide 32 text
32
Sentry workflow
1. Sentry notification
2. On-call member create a ticket
3. Assign a member to ticket
Slide 33
Slide 33 text
33
Support & Knowledge for after release
- On-call training for members
- Describe Design Doc
Slide 34
Slide 34 text
34
Conclusion
microservice platform