Implementando micro front-end com nginx

[@jflizandro]

Cara, venho acompanhando seus vídeos e você explica muito bem. Neste vídeo em questão, acabei pegando dicas preciosas do NGINX que não sabia como funcionavam (tinha que recorrer a pesquisas e testes a cega, sem saber o que estava fazendo). Continue assim que você vai longe!

[@MatheusCastiglioni]

Obrigado Jonatas, fico feliz que venha gostando dos vídeos, agradeço o feedback e força.

[@MarcosVRPereira]

Cara tu acabou de ganhar mais um inscrito!!!! Tú explica muito tranquilo algo que muitos pintam um bicho de "1k" cabeças PARABÉNS!!! PS. você tem algum video ensinando montar um servidor web local mas pra colocar em produção? Sei que muitos vão dizer que não compensa que é trabalhoso, mas, sempre quis montar um para aprendizado e deixar alguma página hospedada e agora como estou estudando programação, deixar uma aplicação rodando também. Se tiver algum video seu sobre o assunto, mas que aborde tambem segurança do servidor vou ser muito grato.

[@MatheusCastiglioni]

Obrigado Marcos, infelizmente fico devendo viu e sim, saber como as coisas funcionam é muito bom, parabens pela iniciativa

[@matheuscolhyer]

Boa noite, amigo! Sou fã das suas aulas. Profissionalmente falando, obtive conquistas e avanços por meio delas! Obrigadoooooo!!

[@MatheusCastiglioni]

Obrigado Matheus, fico muito feliz em ter lhe ajudado de alguma forma.

[@rainerteixeira7590]

Muinto bom amigo exelente explicaçao me fez intender perfeitamente.

[@MatheusCastiglioni]

Obrigado Rainer, fico feliz que tenha entendido.

[@gabrielfrancelino2389]

Sempre com ótimos conteúdos, aprendi demais! Obrigado

[@MatheusCastiglioni]

Obrigado Gabriel

[@claudineigibin]

Muuuito bom o video, você tem uma excelente didática!! está muito bacana acompanhar seus videos!!! parabéns e obrigado por compartilhar o conhecimento!!!

[@MatheusCastiglioni]

Obrigado Claudinei, fico feliz e agradeço o feedback/apoio.

[@felipeamorais]

Parabéns, excelente conteúdo, aprendi muito.

[@MatheusCastiglioni]

Obrigado Felipe

[@IgorSimoes13]

Excelente! Vou ter que ver de novo só para anotar o passo a passo...srrssr

[@MatheusCastiglioni]

Obrigado Igor kkk é complicado mesmo

[@SegredosCabeludos]

Video sensacional, parabéns pelo interesse de repassar conhecimentos os seus dois videos sobre micro-frontend são ótimos. Espero que continue assim, sabe que aprendemos muito mais quando repassamos o conhecimento, tem uma pegada de devops ai em rs. Abraços.

[@MatheusCastiglioni]

Obrigado Marco, realmente, compartilhar é uma das melhoras maneiras para se aprender semana que vem se tudo der certo sai um vido atualizado sobre Single SPA e micro front-end, acompanha aí.

[@Deck0o]

Booa! Ainda sobre micro front-end, eu acho que seria legal mostrar como funciona quando componentes de servidores diferentes são juntados na mesma página

[@MatheusCastiglioni]

Esse será um dos próximos vídeos André, mostrei como implementar no client e no server (ambos via rotas), o próximo quero mostrar como fazer via página a integração.

[@thiagotcx]

Todo o processo foi muito bem explicado! Parabéns!

[@MatheusCastiglioni]

Obrigado Thiago

[@robsonataide]

Sensacional... muito bom mesmo. Parabéns.

[@MatheusCastiglioni]

Obrigado Robson.

[@alysonramos3424]

Man, pode não fazer mt sentido mas é possível trabalhar em um framework x em um microfronted e um framework y no mesmo projeto??

[@MatheusCastiglioni]

@@alysonramos3424 Nesse caso tu se refere a um projeto ser React e outro em Vue ou Angular por exemplo? Se for o caso, sim, é possível sem problemas

[@rodrigomartins9115]

muito top, estou acompanhando todos seus novos videos

[@MatheusCastiglioni]

Obrigado Rodrigo, valeu pela força, hoje saiu um novo sobre micro front-end com single-spa.

[@eltondeveloper1159]

Aula sensacional. Parabéns!!!

[@MatheusCastiglioni]

Obrigado Elton

[@felipemarinhodev]

Parabens! muito bom o conteúdo. Obrigado

[@MatheusCastiglioni]

Obrigado Felipe

[@devgeraçãoz]

Caraaa muito show : ) , parabéns pelo vídeo.

[@MatheusCastiglioni]

Obrigada Norton

[@douglasandrade5199]

Nossa... incrível!!

[@MatheusCastiglioni]

Obrigado Douglas

[@latinasporai]

Como a gente faria pra customizar componentes usando libs como Bootstrap e usar nos 3 MS diferentes mantendo a consistência de Design?

[@MatheusCastiglioni]

Fala Maryany, desculpa mas eu não entendi, me perdi um pouco no usar Boostrap e customização.

[@marcosaap7813]

Olá! Quero elogiar o seu trabalho, pois estou atualmente pesquisando conteúdos sobre Micro Frontends (Micro FE) e encontrei seus vídeos - eles são simplesmente incríveis! No meu local de trabalho, temos um monólito construído com Vuetify (Vue 2), e estamos enfrentando a decisão de migrar para Vue 3. A minha ideia é separar algumas funcionalidades desse monólito em Micro Frontends, enquanto já implementamos o Vue 3. Dessa forma, o projeto pode continuar se escalando e se atualizando, considerando que a versão atual é bastante antiga. Minha pergunta é a seguinte: como faço para fazer o deploy desses Micro Frontends em um servidor? Estou perguntando isso porque tenho um conhecimento limitado nessa área, e a responsabilidade de fazer isso recai sobre a equipe de infraestrutura. Você teria algum vídeo ou tutorial que explique como fazer o deploy de um Micro Frontend em um servidor, talvez utilizando uma plataforma como Vercel? Seria extremamente útil para nós entendermos a configuração do processo de deploy, integração contínua (CI/CD) e, mais importante, como os Micro Frontends interagem entre si em produção. Agradeço antecipadamente pela sua ajuda e por compartilhar seu conhecimento!

[@MatheusCastiglioni]

Fala Marcos, obrigado. Não sei quais vídeos tu já viu ou não, mas, olha esse aqui: kzbin.info/www/bejne/bGmvkouFjNyrkKs Nele eu mostro como publicar os artefatos dos micro front-ends utilizando o CDN da Digital Ocean (o mesmo pode ser feito na sua empresa utilizando um S3 da AWS por exemplo). E esse video que tu comentou também mostra como publicar eles utilizando Docker caso esteja trabalhando com Kubernetes por exemplo.

[@marcosaap7813]

@@MatheusCastiglioni muito bom! obrigado!

[@potamo1288]

EAE, vc e muito bom explicando as coisas cara, vc podia fazer um curso de flutter, a algo q ta crescendo, valeu

[@MatheusCastiglioni]

Obrigado Luis, eu parei de gravar cursos, da muito trabalho e toma muito tempo.

[@potamo1288]

@@MatheusCastiglioni é, tlgd eu nunca gravei mas aparentemente e foda msm tem aquela parada de edição, scripts e um monte de coisa, mas enfim so queria passar e agradecer pelo q vc ja fez vlw!

[@MatheusCastiglioni]

Sim, roteiro, editar, as vezes ficava até 1h da manhã editando, é tenso kkkk valeu demais o feedback.

[@dfealves]

Excelente conteúdo e uma ótima didática. Eu fiquei com uma dúvida, seria possível compartilhar dados entre esses micro-apps ?

[@MatheusCastiglioni]

Obrigado Danilo, seria sim, através de N maneiras kkkkkk

[@mike.oliveira]

@@MatheusCastiglioni Aee Dan, te acheiii kkkk "N maneiras" kkkk Agora mode DEV on !! Go to GOOGLE! kkkkk

[@LuizAzevedown]

Muito show o vídeo, parabéns pela explicação. Fiquei com algumas dúvidas; 1- Desta forma os micro front-end em teoria devem ser aplicações com responsabilidades unica, correto ? 2 - Desta forma é possível ter um micro front-end como container e neste micro front-end renderizar outros micro front-end com responsabilidades menores ? Obrigado.

[@MatheusCastiglioni]

Obrigado Luiz, vamos lá: 1. Exato, a ideia é que cada micro front-end seja separado por contextos/dominios, isso vai variar de negócio para negócio. 2. Sim, é possível, mas eu recomendaria ter apenas um orquestrador.

[@LuizAzevedown]

@@MatheusCastiglioni obrigado pelo retorno.

[@MatheusCastiglioni]

Magina, eu que agradeço por assistir

[@willianramos4153]

Ótimo video, parabéns! Será q eu consigo fazer rodar um front simples junto com um single-spa usando o orquestrador com nginx?

[@MatheusCastiglioni]

Obrigado Willian, no caso da Single SPA não seria necessário o uso do NGINX, dá uma olhada em videos mais novos que eu mostro como fazer isso com React.

[@denissales4583]

Os projetos necessariamente precisam estar no mesmo repositório por causa das configs do nginx e do dockerfile? existe uma maneira de separa-los em repositórios diferentes?

[@MatheusCastiglioni]

Fala Denis, tu pode colocar os projetos em repositórios separados, não tem problema nenhum, o importante é fazer o proxy encaminhar as requisições para cada container.

[@victorhenriquecabral]

Excelente vídeo! Muito didático. Porém fiquei com uma dúvida, no caso dos microfrontends feitos com single-spa você mostrou a possibilidade de um projeto utils, que pode ser compartilhado com todos os demais. Nesse caso por exemplo, usando nginx, é possível compartilhar funções, componentes e estilos de um container para outro?(considerando que eles sejam do mesmo framework) Isso de alguma forma não seria muito recomendável?

[@MatheusCastiglioni]

Obrigado Victor. Daria para fazer isso através de bibliotecas compartilhadas, tu tem uma biblioteca que todos os projetos dependem e utilizam, olhando para a implementação com NGINX uma desvantagem seria a necessidade de baixá-la várias vezes conforme utilização da aplicação.

[@niltonbsgi]

vc é bom!!

[@MatheusCastiglioni]

Valeu Nilton

[@domingosdias5988]

Muito bom

[@MatheusCastiglioni]

Obrigado Domingos

[@igorcarneiro6372]

Muito bom o vídeo cara, parabéns. Quando executo o docker build para o react dá esse erro: The command '/bin/sh -c npm ci --silent' returned a non-zero code: 1. O que poderia estar causando isto?

[@MatheusCastiglioni]

Viiish, falando assim é foda em Igor, pode ser vários motivos, tenta pegar alguns logs de erros mais completos.

[@mechanized8]

Roda o npm install antes de executar a build

[@eduardomitkus1971]

Eai brother. Muito bom o vídeo. Como manter estados e contextos entre os fronts usando esse tipo de implementação? Ex: manter um login.

[@MatheusCastiglioni]

Obrigado Eduardo, pode ser feito de N formas, uma delas seria a API retornar o estado inicial de cada projeto e tu faz a rehydrate no cliente ou tu pode utilizar as persistências fisicas do browser, como tudo roda no mesmo dominio da pra compartilhar entre as aplicações e também fazer reidratação

[@davigasparotto9430]

Oi Matheus, excelente o video, parabéns! Achei bem interessante essa abordagem (mais que a single-spa), só me bateu uma dúvida: Como é o ambiente de desenvolvimento nesse cenário, com todas as aplicação tendo que rodar em dev mode, com hot reload e tals, pq rodar individualmente seria até simples, mas quando preciso do ambiente de dev integrado como ficaria essa abordagem? Abraço!

[@MatheusCastiglioni]

Fala Davi, obrigado. Sobre a dúvida, na real não faz sentido você precisar desenvolver com o ambiente integrado, isso porque a ideia é que cada time cuide e se limite ao seu contexto de desenvolvimento. O ambiente integrado seria em produção e para ambientes de validação (homolog, stage, etc...).

[@elvesgomesnevessantos4757]

Cara sou seu fã, parabéns. A estrutura é complexa. Existem outras maneiras de fazer uma implementacão de micro front-end mais "simples". Por exemplo web components angular. É vantajoso usar diferentes tecnologias, no caso de obter uma diversificacão dos times, ou seja, não se limitar a apenas uma, no entanto framework angular por si só, já é completo o suficiente pra revolver qualquer problema. Lembrando que são independentes, mas são harmônicos entre si, podem fazer comunicacão(troca de dados) e até mesmo um micro chamar outro micro dentro dele, daí me bate essa dúvida, o quanto seria viável a juncão de várias tecnologias.

[@MatheusCastiglioni]

Valeu Elves.

[@pedromiyake]

Cara, que video excelente! Parabens! Estou tentando usar um projeto em angular como meu app principal e ele deveria chamar um micro frontend em lit element. Estou tendo bastante dificuldade em fazer o deploy do componente em lit element. Vc tem algum material / informacao sobre isso que poderia compartilhar? Muito obrigado!

[@MatheusCastiglioni]

Obrigado Pedro, vish, não tenho conteúdo sobre deploy com lit element, fico devendo essa em kkkk

[@pedromiyake]

@@MatheusCastiglioni uahuah tranquilo. Vou retomar o projeto essa semana.. se rolar eu aviso aqui. Vc tem algum video sobre lit element no geral? Queria saber sua opiniao sobre isso, se acha que eh um tema que vale a pena se aprofundar. Vlw msm

[@MatheusCastiglioni]

@@pedromiyake Opa, tenho sim: kzbin.info/www/bejne/ZoLTqnakaKegfbs

[@pedromiyake]

@@MatheusCastiglioni Aaaah garoto!! o/ Vlw

[@andersonlima393]

Como é colocado os certificados ssl nesse caso?

[@MatheusCastiglioni]

Fala Anderson, tu pode configurar via NGINX e Docker

[@bikingaround7429]

Ola Matheus! O proxy reverso funciona bem com uma aplicacao angular recem criada. Eu gostaria de usar o RoutingModule para navegar entre componentes, porem o browser retorna um erro relacionado ao Router: " Error: Cannot match any routes. URL Segment: 'test-app' ". Como proceder para que o RouterModule funcione atras do proxy reverso? Agradeco!

[@MatheusCastiglioni]

Fala Patusko, nesse caso tu precisa configurar um wildcard no NGINX para retornar sempre o index.html de uma dado dominio ou endereço, ex: www.meudominio.com.br/angular-app/* => index.html

[@bikingaround7429]

@@MatheusCastiglioni Voce diz dentro do nginx.conf no container do angular-app : ao inves de location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } devo usar isso: location /angular/* { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } ou o que voce quis dizer com wildcard?

[@MatheusCastiglioni]

@@bikingaround7429 Isso, a ideia seria algo exatamente assim ou você pode configurar para quando der 404 retornar o index.html tambem.