0Pricing
React Academy · Pelajaran

Penerapan Mandiri & Pipeline CI untuk MFE

Siapkan pipeline CI/CD terpisah agar setiap micro-frontend dapat diterapkan tanpa koordinasi.

Penerapan Mandiri & Pipeline CI untuk MFE adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Tujuan: Penerapan Independen

Setiap mikro-frontend harus dapat diterapkan secara independen tanpa koordinasi dari tim lain. Hal ini memerlukan repositori terpisah (atau Nx/Turborepo), alur CI terpisah, dan infrastruktur hosting terpisah.

Strategi Repositori

Dua pendekatan: Polyrepo (satu repositori per MFE, benar-benar independen) dan Monorepo (semua MFE dalam satu repositori, perkakas bersama dengan CI berbasis perubahan). Monorepo sering kali lebih sederhana untuk memulai.

Strategi URL Entri Modul Jarak Jauh

Setiap MFE mengekspos remoteEntry.js di URL yang dapat diprediksi. Terapkan ke jalur berversi atau gunakan berkas manifes untuk penemuan dinamis.

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

Alur GitHub Actions untuk Modul Jarak Jauh

Alur CI yang umum untuk mikro-frontend: pengujian, pembangunan, pengunggahan ke CDN, dan, secara opsional, pemberitahuan kepada aplikasi induk untuk memperbarui manifesnya.

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

URL Modul Jarak Jauh Spesifik Lingkungan

Gunakan variabel lingkungan dalam konfigurasi webpack atau manifes aplikasi induk untuk menunjuk ke modul jarak jauh praproduksi atau produksi.

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

Pembangunan Berdasarkan Perubahan dengan Nx untuk Monorepo

Dalam monorepo Nx, nx affected hanya membangun dan menerapkan MFE yang berubah, bukan semuanya — sehingga menghemat waktu CI.

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

Pengujian Kontrak

Saat modul jarak jauh mengubah API modul yang diekspos, pengguna modul tersebut dapat mengalami kerusakan. Pengujian kontrak (Pact) memverifikasi bahwa produsen dan konsumen menyepakati antarmuka sebelum penerapan.

Penerapan Bertahap

Terapkan versi modul jarak jauh yang baru kepada sebagian kecil pengguna terlebih dahulu. Pantau tingkat kesalahan sebelum menerapkannya kepada semua pengguna — hal ini mengurangi dampak perubahan yang merusak.

Strategi Pengembalian Versi

Simpan remoteEntry.js versi modul jarak jauh sebelumnya di CDN. Untuk mengembalikan versi, Anda hanya perlu memperbarui manifes agar menunjuk kembali ke versi lama.

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

Penyimpanan CDN untuk Entri Modul Jarak Jauh

Tetapkan TTL singkat (atau tanpa penyimpanan) pada remoteEntry.js agar aplikasi induk selalu mengambil versi terbaru. Gunakan TTL panjang untuk berkas potongan berversi.

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

Pengujian Asap Pasca-Penerapan

Jalankan pengujian asap Playwright minimal setelah setiap penerapan untuk memverifikasi bahwa modul jarak jauh dimuat dan dirender dengan benar dalam konteks aplikasi kerangka.

Pemeriksaan Singkat

Apa keunggulan utama menggunakan berkas manifes berversi untuk URL modul jarak jauh dibandingkan menuliskannya secara langsung dalam konfigurasi webpack aplikasi induk?

Ringkasan

Setiap MFE memiliki alur CI sendiri: pengujian → pembangunan → pengunggahan ke CDN. Gunakan URL modul jarak jauh berversi atau berbasis manifes untuk mendukung pengembalian versi. Tetapkan TTL cache singkat pada remoteEntry.js agar versi terbaru segera diambil. Dalam monorepo Nx, gunakan nx affected untuk hanya menerapkan MFE yang berubah.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penerapan Mandiri & Pipeline CI untuk MFE” gratis?

Ya — teks lengkap “Penerapan Mandiri & Pipeline CI untuk MFE” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penerapan Mandiri & Pipeline CI untuk MFE”?

Siapkan pipeline CI/CD terpisah agar setiap micro-frontend dapat diterapkan tanpa koordinasi. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Penerapan Mandiri & Pipeline CI untuk MFE” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Konsep Micro-Frontend & Pertimbangannya
  2. Module Federation dengan Webpack 5
  3. Status Bersama & Perutean Antar-MFE
  4. Penerapan Mandiri & Pipeline CI untuk MFE
← Kembali ke React Academy