0Pricing
React Academy · Aula

Implantação independente e pipelines de CI para MFEs

Configure pipelines de CI/CD separados para que cada microfrontend seja implantado sem coordenação.

Implantação independente e pipelines de CI para MFEs é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O objetivo: implantação independente

Cada microfrontend deve ser implantado de forma independente, sem coordenação com outras equipes. Isso exige repositórios separados (ou Nx/Turborepo), processos separados de CI e hospedagem separada.

Estratégias de repositório

Há duas abordagens: Polyrepo (um repositório por MFE, com independência real) e Monorepo (todos os MFE em um repositório, com ferramentas compartilhadas e CI baseada no que foi afetado). O Monorepo costuma ser mais simples para começar.

Estratégia de URL de entrada remota

Cada MFE expõe um remoteEntry.js em uma URL previsível. Implante-o em um caminho versionado ou use um arquivo de manifesto para descoberta dinâmica.

// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js

// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js

// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }

Fluxo do GitHub Actions para uma aplicação remota

Um fluxo típico de CI para um microfrontend é: testar, compilar, enviar para a CDN e, opcionalmente, notificar a aplicação hospedeira para atualizar o manifesto.

# .github/workflows/deploy.yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET }}
          aws-region: us-east-1
      - run: aws s3 sync dist/ s3://cdn-bucket/products/ --delete

URLs remotas específicas do ambiente

Use variáveis de ambiente na configuração do webpack ou no manifesto da aplicação hospedeira para apontar para aplicações remotas de homologação ou de produção.

// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';

new ModuleFederationPlugin({
  remotes: { products: `products@${PRODUCTS_URL}` },
});

Nx affected para monorrepositórios

Em um monorrepositório Nx, nx affected compila e implanta apenas os MFE que foram alterados, não todos — economizando tempo de CI.

# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/main

Testes de contrato

Quando uma aplicação remota altera a API de um módulo exposto, os consumidores falham. Os testes de contrato (Pact) verificam se o produtor e o consumidor concordam sobre a interface antes da implantação.

Implantações canário

Implante primeiro uma nova versão remota para uma pequena porcentagem dos usuários. Monitore as taxas de erro antes de promovê-la para todos — isso reduz o alcance do impacto de alterações incompatíveis.

Estratégia de reversão

Mantenha no CDN o remoteEntry.js da versão remota anterior. Para reverter, basta atualizar o manifesto apontando novamente para a versão antiga.

// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });

Armazenamento em cache de entradas remotas na CDN

Defina um TTL curto (ou nenhum cache) em remoteEntry.js para que as aplicações hospedeiras sempre obtenham a versão mais recente. Use TTLs longos para arquivos de fragmentos versionados.

# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js     → Cache-Control: max-age=31536000, immutable

Testes de fumaça pós-implantação

Execute um teste de fumaça mínimo do Playwright após cada implantação para verificar se a aplicação remota carrega e é renderizada corretamente no contexto da aplicação contêiner.

Verificação rápida

Qual é a principal vantagem de usar um arquivo de manifesto versionado para URLs remotas em vez de codificá-las diretamente na configuração do webpack da aplicação hospedeira?

Resumo

Cada MFE tem seu próprio fluxo de CI: testar → compilar → enviar para a CDN. Use URLs remotas versionadas ou baseadas em manifesto para possibilitar a reversão. Defina um TTL de cache curto em remoteEntry.js para que a versão mais recente seja obtida imediatamente. Em monorrepositórios Nx, use nx affected para implantar apenas os MFE alterados.

Perguntas Frequentes

A aula “Implantação independente e pipelines de CI para MFEs” é grátis?

Sim — o texto completo de “Implantação independente e pipelines de CI para MFEs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Implantação independente e pipelines de CI para MFEs”?

Configure pipelines de CI/CD separados para que cada microfrontend seja implantado sem coordenação. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Implantação independente e pipelines de CI para MFEs”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Conceitos e compensações de microfrontends
  2. Federação de módulos com Webpack 5
  3. Estado compartilhado e roteamento entre MFEs
  4. Implantação independente e pipelines de CI para MFEs
← Voltar para React Academy