React Academy · Ders

MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları

Her mikro ön ucun eşgüdüm gerektirmeden dağıtılabilmesi için ayrı CI/CD pipeline'ları kurun.

MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hedef: Bağımsız Dağıtım

Her mikro ön uç, diğer ekiplerin koordinasyonuna ihtiyaç duymadan bağımsız olarak dağıtılmalıdır. Bunun için ayrı depolar (veya Nx/Turborepo), ayrı CI işlem hatları ve ayrı barındırma gerekir.

Depo Stratejileri

İki yaklaşım vardır: Çoklu depo (mikro ön uç başına bir depo, gerçekten bağımsız) ve Tek depo (tüm mikro ön uçların tek depoda bulunması, değişikliklerden etkilenenlere dayalı CI ile paylaşılan araçlar). Tek depoyla başlamak genellikle daha basittir.

Uzak Giriş URL'si Stratejisi

Her mikro ön uç, öngörülebilir bir URL'de remoteEntry.js sunar. Sürümlendirilmiş bir yola dağıtın veya dinamik keşif için bir bildirim dosyası kullanın.

// 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' }

Uzak Uygulama için GitHub Actions İşlem Hattı

Bir mikro ön uç için tipik CI işlem hattı şunları yapar: sınama, derleme, CDN'e yükleme ve isteğe bağlı olarak ana uygulamaya bildirim göndererek bildirimini güncellemesini sağlama.

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

Ortamına Özel Uzak Uygulama URL'leri

Hazırlama ve üretim ortamlarındaki uzak uygulamalara yönlendirmek için ana uygulamanın Webpack yapılandırmasında veya bildiriminde ortam değişkenlerini kullanın.

// 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}` },
});

Tek Depolar için Nx Affected

Bir Nx tek depo yapısında nx affected, tüm mikro ön uçları değil, yalnızca değişenleri derleyip dağıtır — böylece CI süresinden tasarruf edilir.

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

Sözleşme Sınaması

Bir uzak uygulama, dışa açılan bir modülün API'sini değiştirdiğinde tüketiciler bozulur. Sözleşme sınaması (Pact), dağıtımdan önce üretici ile tüketicinin arayüz üzerinde anlaştığını doğrular.

Kanarya Dağıtımları

Yeni bir uzak uygulama sürümünü önce kullanıcıların küçük bir yüzdesine dağıtın. Tüm kullanıcılara sunmadan önce hata oranlarını izleyin — bu, bozucu değişikliklerin etki alanını azaltır.

Geri Alma Stratejisi

Önceki uzak uygulama sürümünün remoteEntry.js dosyasını CDN'de tutun. Bildirimi eski sürüme işaret edecek şekilde güncellemek, geri almak için yeterlidir.

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

Uzak Girişler için CDN Önbelleğe Alma

Sunucuların her zaman en yeni sürümü alması için remoteEntry.js üzerinde kısa bir TTL (veya hiç önbellek) ayarlayın. Sürümlendirilmiş parça dosyaları için uzun TTL değerleri kullanın.

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

Dağıtım Sonrası Hızlı Kontroller

Uzak uygulamanın kabuk bağlamında doğru şekilde yüklenip görüntülendiğini doğrulamak için her dağıtımdan sonra en düşük kapsamlı bir Playwright hızlı kontrolü çalıştırın.

Hızlı Kontrol

Uzak uygulama URL'lerini ana uygulamanın Webpack yapılandırmasında sabit kodlamak yerine sürümlendirilmiş bir bildirim dosyası kullanmanın temel avantajı nedir?

Özet

Her mikro ön ucun kendi CI işlem hattı vardır: sınama → derleme → CDN'e yükleme. Geri alma olanağı için sürümlendirilmiş veya bildirim tabanlı uzak uygulama URL'leri kullanın. Anında alınabilmesi için remoteEntry.js üzerinde kısa bir önbellek TTL'si ayarlayın. Nx tek depolarında yalnızca değişen mikro ön uçları dağıtmak için nx affected kullanın.

Sıkça Sorulan Sorular

“MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları” dersi ücretsiz mi?

Evet — “MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları” dersinde ne öğreneceğim?

Her mikro ön ucun eşgüdüm gerektirmeden dağıtılabilmesi için ayrı CI/CD pipeline'ları kurun. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Mikro Ön Uç Kavramları ve Ödünleşimler
Webpack 5 ile Module Federation
MFE'ler Arasında Paylaşılan Durum ve Yönlendirme
MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları

← React Academy Sayfasına Dön