Micro_Frontends_on_Kubernetes-trial-

This slide gives you the steps to build MicroFrontends on Kubernetes.
It does not provide ideas or solutions because trial.

Transcript

1. Micro Frontends on Kubernetes - trial - @silver_birder 2019/09/24
2. whoami 2
3. 3 Love ErgodoxEZ
4. 4 Love Smart App https://medium.com/@silverbirder/スマート家電のよさをしってほしい
5. Published Book https://silverbirder.booth.pm/ 5
6. 6 Try Kubernetes https://qiita.com/silverbirder/
7. and more ! → https://silver-birder.github.io 7
8. Agenda • Micro Frontends • Kubernetes • Micro Frontends on Kubernetes ◦ Overview ◦ Get hands dirty ◦ Knowledge 8
9. Micro Frontends 9
10. Micro Frontends > The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. ※ https://micro-frontends.org/ 10
11. Micro Frontends ※ https://micro-frontends.org/ 11
12. Micro Frontends ※ https://micro-frontends.org/ this is still a monolith 12
13. Micro Frontends ※ https://micro-frontends.org/ this is still a monolith 13
14. Micro Frontends ※ https://micro-frontends.org/ 14
15. Frontend can take the merits of microservices. 15
16. Frontend can take the merits of microservices. Scalability Independence Fault tolerant Easy to deploy Easy to try new tech 16
17. Frontend can take the demerits of microservices. 17
18. Frontend can take the demerits of microservices. 18 Performance Data Consistency Trouble shooting High level Tech Design the architecture
19. Kubernetes 19
20. Kubernetes > Kubernetes is an open source system for managing containerized applications across multiple hosts; providing basic mechanisms for deployment, maintenance, and scaling of applications. ※ https://github.com/kubernetes/kubernetes 20
21. Applications on Kubernetes are often microservices. 21
22. Micro Frontends on Kubernetes 22
23. Micro Frontends on Kubernetes - Sample Repository - https://github.com/Silver-birder/micro-frontends-on-kubernetes/ fork by https://github.com/neuland/micro-frontends 23
24. Micro Frontends on Kubernetes - Overview - team-red team-green team-blue team-black (nginx) 24
25. Micro Frontends on Kubernetes - Get hands dirty - Let’s try it ! 25
26. Micro Frontends on Kubernetes - Kompose - $ kompose convert -f docker-compose.yml 26 Kompose https://github.com/neuland/micro-frontends/ https://github.com/Silver-birder/micro-frontends-on-kubernetes/
27. Micro Frontends on Kubernetes - Deployment - team-black team-red team-blue team-green deployment deployment frontend backend frontend backend frontend backend deployment deployment request team-red-deployment.yaml team-blue-deployment.yaml team-green-deployment.yaml team-nginx-deployment.yaml team-nginx-conf-configmap.yaml location /common 27
28. Micro Frontends on Kubernetes - Service - team-black team-red team-blue team-green deployment deployment frontend backend frontend backend frontend backend deployment deployment request location /common port 3000 port 3003 location / location /red team-nginx-service.yaml team-blue-service.yaml team-green-service.yaml team-red-service.yaml location /blue port 3001 port 3002 location /green 28
29. Micro Frontends on Kubernetes - Statefulset - team-black team-red team-blue team-green deployment frontend backend frontend backend frontend backend deployment deployment request location /common port 3000 port 3003 location / location /red mysql-statefulset.yaml mysql-configmap.yaml mysql-services.yaml team-green-confimap.yaml team-red-confimap.yaml location /blue port 3001 port 3002 location /green statefulset statefulset database database port 3306 deployment port 3306 29
30. Micro Frontends on Kubernetes - Secrets - team-black team-red team-blue team-green deployment frontend backend frontend backend frontend backend deployment deployment request location /common port 3000 port 3003 location / location /red $ sentry_dns='https://X@sentry.io/X' $ echo "sentry.dns=${sentry_dns}" > team-red-secrets && \ kubectl create secret generic team.red --from-env-file=./team-red-secrets location /blue port 3001 port 3002 location /green statefulset statefulset database database port 3306 deployment port 3306 30 secrets
31. Micro Frontends on Kubernetes - tools - minikube kind skaffold Kubernetes IN Docker - local clusters for testing Kubernetes Run Kubernetes locally Easy and Repeatable Kubernetes Development 31
32. Micro Frontends on Kubernetes - tools - skaffold Easy and Repeatable Kubernetes Development 32
33. Micro Frontends on Kubernetes - furthermore - • Collecting logs, monitoring frontend with pure javascript 33
34. Micro Frontends on Kubernetes - Knowledge - • Choose the right tools for your purpose ◦ application testing -> skaffold + minikube ◦ multiple clusters testing -> kind • Not use as pv or pvc as possible ◦ use the configmap, environment variable 34 Kubernetes
35. Micro Frontends on Kubernetes - Knowledge - • Need to team for aggregate page ◦ for common js or css ◦ ex. team-black ? team-red ? • Design for communicating between teams. ◦ PubSub ? DOM API ? ◦ Asynchronous? Synchronous? ◦ Interface 35 Micro Frontends
36. Micro Frontends on Kubernetes - Knowledge - • Separate whether databases or tables by team ? ◦ this sample separates the tables by team ▪ Really, databases ? • Determine the team by structure the database ? ◦ ex. ▪ product -> team-red ▪ recommend -> team-green 36 Micro Frontends
37. References • micro-frontends.org ◦ https://micro-frontends.org/ • Micro Frontend Architecture and Best Practices ◦ https://www.xenonstack.com/insights/what-is-micro-frontend/ • Five Things to Consider Before Choosing Micro Frontends ◦ https://rangle.io/blog/five-things-to-consider-before-choosing-micro-frontends/ • Understanding Micro Frontends ◦ https://hackernoon.com/understanding-micro-frontends-b1c11585a297 • Independent micro frontends with Single SPA library ◦ https://blog.pragmatists.com/independent-micro-frontends-with-single-spa-library-a829012dc5be • Micro Frontends ◦ https://martinfowler.com/articles/micro-frontends.html • Micro service Websites ◦ https://gustafnk.github.io/microservice-websites/ • MICROSERVICE WEBSITES (youtube) ◦ https://www.youtube.com/watch?v=4KVOuQDIfmw • UI in Microservices World — Micro Frontends pattern and Web Components ◦ https://medium.com/@witek1902/ui-in-microservices-world-micro-frontends-pattern-and-web-components-23607a569363 37
38. Thank you ! 38