Micro Frontends on Kubernetes - trial - @silver_birder 2019/09/24 

whoami 2 

3 Love ErgodoxEZ 

4 Love Smart App https://medium.com/@silverbirder/スマート家電のよさをしってほしい 

Published Book https://silverbirder.booth.pm/ 5 

6 Try Kubernetes https://qiita.com/silverbirder/ 

and more ! → https://silver-birder.github.io 7 

Agenda ● Micro Frontends ● Kubernetes ● Micro Frontends on Kubernetes ○ Overview ○ Get hands dirty ○ Knowledge 8 

Micro Frontends 9 

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 

Micro Frontends ※ https://micro-frontends.org/ 11 

Micro Frontends ※ https://micro-frontends.org/ this is still a monolith 12 

Micro Frontends ※ https://micro-frontends.org/ this is still a monolith 13 

Micro Frontends ※ https://micro-frontends.org/ 14 

Frontend can take the merits of microservices. 15 

Frontend can take the merits of microservices. Scalability Independence Fault tolerant Easy to deploy Easy to try new tech 16 

Frontend can take the demerits of microservices. 17 

Frontend can take the demerits of microservices. 18 Performance Data Consistency Trouble shooting High level Tech Design the architecture 

Kubernetes 19 

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 

Applications on Kubernetes are often microservices. 21 

Micro Frontends on Kubernetes 22 

Micro Frontends on Kubernetes - Sample Repository - https://github.com/Silver-birder/micro-frontends-on-kubernetes/ fork by https://github.com/neuland/micro-frontends 23 

Micro Frontends on Kubernetes - Overview - team-red team-green team-blue team-black (nginx) 24 

Micro Frontends on Kubernetes - Get hands dirty - Let’s try it ! 25 

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/ 

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 

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 

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 

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://[email protected]/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 

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 

Micro Frontends on Kubernetes - tools - skaffold Easy and Repeatable Kubernetes Development 32 

Micro Frontends on Kubernetes - furthermore - ● Collecting logs, monitoring frontend with pure javascript 33 

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 

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 

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 

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 

Thank you ! 38