Micro_Frontends_on_Kubernetes-trial-

3ff690942a6e16e08d2fc2ecb9e0af6c?s=47 silverbirder
September 24, 2019

 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.

3ff690942a6e16e08d2fc2ecb9e0af6c?s=128

silverbirder

September 24, 2019
Tweet

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