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. 8.

    Agenda • Micro Frontends • Kubernetes • Micro Frontends on

    Kubernetes ◦ Overview ◦ Get hands dirty ◦ Knowledge 8
  2. 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
  3. 16.
  4. 18.

    Frontend can take the demerits of microservices. 18 Performance Data

    Consistency Trouble shooting High level Tech Design the architecture
  5. 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
  6. 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/
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 32.

    Micro Frontends on Kubernetes - tools - skaffold Easy and

    Repeatable Kubernetes Development 32
  13. 33.

    Micro Frontends on Kubernetes - furthermore - • Collecting logs,

    monitoring frontend with pure javascript 33
  14. 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
  15. 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
  16. 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
  17. 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