Buat portal untuk frontend mikro dengan menggunakan AWS Amplify, Angular, dan Federasi Modul - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatPraktik terbaikEpikPemecahan MasalahInformasi tambahan

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Buat portal untuk frontend mikro dengan menggunakan AWS Amplify, Angular, dan Federasi Modul

Milena Godau dan Pedro Garcia, Amazon Web Services

Ringkasan

Arsitektur micro-frontend memungkinkan beberapa tim untuk bekerja pada bagian yang berbeda dari aplikasi frontend secara independen. Setiap tim dapat mengembangkan, membangun, dan menyebarkan fragmen frontend tanpa mengganggu bagian lain dari aplikasi. Dari perspektif pengguna akhir, tampaknya menjadi aplikasi tunggal yang kohesif. Namun, mereka berinteraksi dengan beberapa aplikasi independen yang diterbitkan oleh tim yang berbeda.

Dokumen ini menjelaskan cara membuat arsitektur micro-frontend dengan menggunakan AWS Amplify, framework frontend Angular, dan Module Federation. Dalam pola ini, frontend mikro digabungkan di sisi klien oleh aplikasi shell (atau induk). Aplikasi shell bertindak sebagai wadah yang mengambil, menampilkan, dan mengintegrasikan mikro-frontend. Aplikasi shell menangani perutean global, yang memuat frontend mikro yang berbeda. Plugin @angular -architects/module-federation mengintegrasikan Federasi Modul dengan Angular. Anda menerapkan aplikasi shell dan micro-frontend dengan menggunakan. AWS Amplify Pengguna akhir mengakses aplikasi melalui portal berbasis web.

Portal dibagi secara vertikal. Ini berarti bahwa frontend mikro adalah keseluruhan tampilan atau kelompok tampilan, bukan bagian dari tampilan yang sama. Oleh karena itu aplikasi shell hanya memuat satu micro-frontend pada satu waktu.

Micro-frontend diimplementasikan sebagai modul jarak jauh. Aplikasi shell dengan malas memuat modul jarak jauh ini, yang menunda inisialisasi mikro-frontend hingga diperlukan. Pendekatan ini mengoptimalkan kinerja aplikasi dengan hanya memuat modul yang diperlukan. Ini mengurangi waktu muat awal dan meningkatkan pengalaman pengguna secara keseluruhan. Selain itu, Anda berbagi dependensi umum di seluruh modul melalui file konfigurasi webpack (webpack.config.js). Praktik ini mempromosikan penggunaan kembali kode, mengurangi duplikasi, dan merampingkan proses bundling.

Prasyarat dan batasan

Prasyarat

Versi produk

  • Angular CLI versi 13.1.2 atau yang lebih baru

  • @angular -architects/module-federation versi 14.0.1 atau yang lebih baru

  • webpack versi 5.4.0 atau yang lebih baru

  • AWS Amplify Gen 1

Batasan

Arsitektur micro-frontend adalah pendekatan yang ampuh untuk membangun aplikasi web yang terukur dan tangguh. Namun, penting untuk memahami tantangan potensial berikut sebelum mengadopsi pendekatan ini:

  • Integrasi — Salah satu tantangan utama adalah potensi peningkatan kompleksitas dibandingkan dengan frontend monolitik. Mengatur beberapa frontend mikro, menangani komunikasi di antara mereka, dan mengelola dependensi bersama bisa lebih rumit. Selain itu, mungkin ada overhead kinerja yang terkait dengan komunikasi antara frontend mikro. Komunikasi ini dapat meningkatkan latensi dan mengurangi kinerja. Ini perlu ditangani melalui mekanisme pesan yang efisien dan strategi berbagi data.

  • Duplikasi kode — Karena setiap micro-frontend dikembangkan secara independen, ada risiko duplikasi kode untuk fungsionalitas umum atau pustaka bersama. Ini dapat meningkatkan ukuran aplikasi secara keseluruhan dan memperkenalkan tantangan pemeliharaan.

  • Koordinasi dan manajemen - Mengkoordinasikan proses pengembangan dan penyebaran di beberapa frontend mikro dapat menjadi tantangan. Memastikan pembuatan versi yang konsisten, mengelola dependensi, dan menjaga kompatibilitas antar komponen menjadi lebih penting dalam arsitektur terdistribusi. Menetapkan tata kelola yang jelas, pedoman, dan jalur pipa pengujian dan penyebaran otomatis sangat penting untuk kolaborasi dan pengiriman yang mulus.

  • Pengujian - Menguji arsitektur mikro-frontend bisa lebih kompleks daripada menguji frontend monolitik. Ini membutuhkan upaya tambahan dan strategi pengujian khusus untuk melakukan pengujian dan pengujian integrasi lintas komponen, dan end-to-end untuk memvalidasi pengalaman pengguna yang konsisten di beberapa frontend mikro.

Sebelum berkomitmen pada pendekatan micro-frontend, kami sarankan Anda meninjau Memahami dan menerapkan micro-frontend pada. AWS

Arsitektur

Dalam arsitektur micro-frontend, setiap tim mengembangkan dan menyebarkan fitur secara independen. Gambar berikut menunjukkan bagaimana beberapa DevOps tim bekerja sama. Tim portal mengembangkan aplikasi shell. Aplikasi shell bertindak sebagai wadah. Ini mengambil, menampilkan, dan mengintegrasikan aplikasi mikro-frontend yang diterbitkan oleh tim lain. DevOps Anda gunakan AWS Amplify untuk mempublikasikan aplikasi shell dan aplikasi micro-frontend.

Menerbitkan beberapa frontend mikro ke aplikasi shell yang diakses pengguna melalui portal web.

Diagram arsitektur menunjukkan alur kerja berikut:

  1. Tim portal mengembangkan dan memelihara aplikasi shell. Aplikasi shell mengatur integrasi dan rendering mikro-frontend untuk menyusun portal secara keseluruhan.

  2. Tim A dan B mengembangkan dan memelihara satu atau lebih mikro-frontend atau fitur yang terintegrasi ke dalam portal. Setiap tim dapat bekerja secara independen pada frontend mikro masing-masing.

  3. Pengguna akhir mengautentikasi dengan menggunakan Amazon Cognito.

  4. Pengguna akhir mengakses portal, dan aplikasi shell dimuat. Saat pengguna menavigasi, aplikasi shell menangani perutean dan mengambil micro-frontend yang diminta, memuat bundelnya.

Alat

Layanan AWS

  • AWS Amplifyadalah seperangkat alat dan fitur yang dibuat khusus yang membantu pengembang web dan seluler frontend dengan cepat membangun aplikasi full-stack. AWS Dalam pola ini, Anda menggunakan Amplify CLI untuk menerapkan aplikasi micro-frontend Amplify.

  • AWS Command Line Interface (AWS CLI) adalah alat open source yang membantu Anda berinteraksi Layanan AWS melalui perintah di shell baris perintah Anda.

Alat-alat lainnya

  • @angular -architects/module-federation adalah plugin yang mengintegrasikan Angular dengan Federasi Modul.

  • Angular adalah kerangka kerja aplikasi web open source untuk membangun aplikasi satu halaman yang modern, terukur, dan dapat diuji. Ini mengikuti arsitektur modular dan berbasis komponen yang mempromosikan penggunaan kembali dan pemeliharaan kode.

  • Node.js adalah lingkungan JavaScript runtime berbasis peristiwa yang dirancang untuk membangun aplikasi jaringan yang dapat diskalakan.

  • npm adalah registri perangkat lunak yang berjalan di lingkungan Node.js dan digunakan untuk berbagi atau meminjam paket dan mengelola penyebaran paket pribadi.

  • Federasi Modul Webpack membantu Anda memuat kode yang dikompilasi dan digunakan secara independen, seperti mikro-frontend atau plugin, ke dalam aplikasi.

Repositori kode

Kode untuk pola ini tersedia di portal Micro-frontend menggunakan repositori Angular dan Module Federation. GitHub Repositori ini berisi dua folder berikut:

  • shell-appberisi kode untuk aplikasi shell.

  • feature1-appberisi sampel micro-frontend. Aplikasi shell mengambil micro-frontend ini dan menampilkannya sebagai halaman dalam aplikasi portal.

Praktik terbaik

Arsitektur mikro-frontend menawarkan banyak keuntungan, tetapi mereka juga memperkenalkan kompleksitas. Berikut ini adalah beberapa praktik terbaik untuk pengembangan yang lancar, kode berkualitas tinggi, dan pengalaman pengguna yang hebat:

  • Perencanaan dan komunikasi — Untuk merampingkan kolaborasi, berinvestasi dalam perencanaan awal, desain, dan saluran komunikasi yang jelas.

  • Konsistensi desain - Menerapkan gaya visual yang konsisten di seluruh frontend mikro dengan menggunakan sistem desain, panduan gaya, dan pustaka komponen. Ini memberikan pengalaman pengguna yang kohesif dan mempercepat pengembangan.

  • Manajemen ketergantungan — Karena frontend mikro berkembang secara independen, mengadopsi kontrak standar dan strategi pembuatan versi untuk mengelola dependensi secara efektif dan mencegah masalah kompatibilitas.

  • Arsitektur micro-frontend — Untuk mengaktifkan pengembangan dan penyebaran independen, setiap micro-frontend harus memiliki tanggung jawab yang jelas dan terdefinisi dengan baik untuk fungsionalitas yang dienkapsulasi.

  • Integrasi dan komunikasi — Untuk memfasilitasi kelancaran integrasi dan meminimalkan konflik, tentukan kontrak yang jelas dan protokol komunikasi antara frontend mikro, termasuk, peristiwa APIs, dan model data bersama.

  • Pengujian dan jaminan kualitas - Menerapkan otomatisasi pengujian dan jaringan pipa integrasi berkelanjutan untuk frontend mikro. Ini meningkatkan kualitas keseluruhan, mengurangi upaya pengujian manual, dan memvalidasi fungsionalitas antara interaksi mikro-frontend.

  • Optimalisasi kinerja — Terus memantau metrik kinerja dan melacak dependensi antara frontend mikro. Ini membantu Anda mengidentifikasi kemacetan dan mempertahankan kinerja aplikasi yang optimal. Gunakan alat pemantauan kinerja dan analisis ketergantungan untuk tujuan ini.

  • Pengalaman pengembang - Fokus pada pengalaman pengembang dengan memberikan dokumentasi, perkakas, dan contoh yang jelas. Ini membantu Anda merampingkan pengembangan dan memasukkan anggota tim baru.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Buat aplikasi shell.

  1. Di CLI Angular, masukkan perintah berikut:

    ng new shell --routing

  2. Masukkan perintah berikut untuk menavigasi ke folder proyek:

    cd shell
    catatan

    Folder dan struktur proyek untuk aplikasi shell dan micro-frontend dapat sepenuhnya independen. Mereka dapat ditangani sebagai aplikasi Angular independen.

Pengembang aplikasi

Instal plugin.

Di CLI Angular, masukkan perintah berikut untuk menginstal plugin @angular -architects/module-federation:

ng add @angular-architects/module-federation --project shell --port 4200
Pengembang aplikasi

Tambahkan URL micro-frontend sebagai variabel lingkungan.

  1. Buka file environment.ts.

  2. Tambahkan mfe1URL: 'http://localhost:5000' ke environment objek:

    export const environment = {
  production: false,
  mfe1URL: 'http://localhost:5000',
};

  3. Simpan dan tutup file environment.ts.

Pengembang aplikasi

Tentukan routing.

  1. Buka file app-routing.module.ts.

  2. Di CLI Angular, masukkan perintah berikut untuk mengimpor loadRemoteModule modul dari plugin @angular -architects/module-federation:

    import { loadRemoteModule } from '@angular-architects/module-federation';

  3. Tetapkan rute default sebagai berikut:

    {
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

  4. Mengatur rute untuk micro-frontend:

    {
    path: 'mfe1',
    loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfe1URL}/remoteEntry.js`,
        exposedModule: './Module'
      })
      .then(m => m.Mfe1Module)
  },

  5. Simpan dan tutup file app-routing.module.ts.

Pengembang aplikasi

Deklarasikan modul. mfe1

  1. Di src folder, buat file baru bernama decl.d.ts.

  2. Buka file decl.d.ts.

  3. Tambahkan yang berikut ini ke file:

    declare module 'mfe1/Module';

  4. Simpan dan tutup file decl.d.ts.

Pengembang aplikasi

Siapkan preloading untuk micro-frontend.

Memuat pramuat micro-frontend membantu webpack menegosiasikan pustaka dan paket bersama dengan benar.

  1. Buka file main.ts.

  2. Ganti konten dengan yang berikut ini:

    import { loadRemoteEntry } from '@angular-architects/module-federation';
 
Promise.all([
    loadRemoteEntry(`${environment.mfe1URL}/remoteEntry.js`, 'mfe1'),
])
.catch(err => console.error('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.error(err));

  3. Simpan dan tutup file main.ts.

Pengembang aplikasi

Sesuaikan konten HTML.

  1. Buka file app.component.html.

  2. Ganti konten dengan yang berikut ini:

    <h1>Shell application is running!</h1>
<router-outlet></router-outlet>

  3. Simpan dan tutup file app.component.html.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat micro-frontend.

  1. Di CLI Angular, masukkan perintah berikut:

    ng new mfe1 --routing

  2. Masukkan perintah berikut untuk menavigasi ke folder proyek:

    cd mfe1
Pengembang aplikasi

Instal plugin.

Masukkan perintah berikut untuk menginstal plugin @angular -architects/module-federation:

ng add @angular-architects/module-federation --project mfe1 --port 5000
Pengembang aplikasi

Buat modul dan komponen.

Masukkan perintah berikut untuk membuat modul dan komponen dan mengekspornya sebagai modul entri jarak jauh:

ng g module mfe1 --routing
ng g c mfe1
Pengembang aplikasi

Mengatur jalur routing default.

  1. Buka file mfe-routing.module.ts.

  2. Tetapkan rute default sebagai berikut:

    {
    path: '',
    component: Mfe1Component
  },

  3. Simpan dan tutup file mfe-routing.module.ts.

Pengembang aplikasi

Tambahkan mfe1 rute.

  1. Buka file app-routing.module.ts.

  2. Tetapkan rute default sebagai berikut:

    {
    path: '',
    pathMatch: 'full',
    redirectTo: 'mfe1'
  },

  3. Tambahkan mfe1 rute berikut:

    {
    path: 'mfe1',
    loadChildren: () => 
      import('./mfe1/mfe1.module').then((m) => m.Mfe1Module),
  },

  4. Simpan dan tutup file app-routing.module.ts.

Pengembang aplikasi

Edit file webpack.config.js.

  1. Buka file webpack.config.js.

  2. Edit For remotes bagian agar sesuai dengan yang berikut:

    // For remotes (please adjust)
    name: "mfe1",
    filename: "remoteEntry.js",
    exposes: {
        './Module': './src/app/mfe1/mfe1.module.ts',
    },

  3. Di shared bagian ini, tambahkan dependensi apa pun yang dibagikan mfe1 aplikasi dengan aplikasi shell:

    shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    
        ...sharedMappings.getDescriptors()
    })

  4. Simpan dan tutup file webpack.config.js.

Pengembang aplikasi

Sesuaikan konten HTML.

  1. Buka file app.component.html.

  2. Ganti konten dengan yang berikut ini:

    <router-outlet></router-outlet>

  3. Simpan dan tutup file app.component.html.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Jalankan mfe1 aplikasi.

  1. Masukkan perintah berikut untuk memulai mfe1 aplikasi:

    npm start

  2. Di browser web, akseshttp://localhost:5000.

  3. Verifikasi bahwa micro-frontend dapat dijalankan secara mandiri. mfe1Aplikasi harus dirender dengan benar tanpa kesalahan.

Pengembang aplikasi

Jalankan aplikasi shell.

  1. Masukkan perintah berikut untuk memulai aplikasi shell:

    npm start

  2. Di browser web, akseshttp://localhost:4200/mfe1.

  3. Verifikasi bahwa mfe1 micro-frontend tertanam dalam aplikasi shell. Aplikasi portal harus dirender dengan benar tanpa kesalahan, dan mfe1 aplikasi harus disematkan di dalamnya.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Buat modul dan komponen.

Di folder root aplikasi shell, masukkan perintah berikut untuk membuat modul dan komponen untuk halaman kesalahan:

ng g module error-page --routing
ng g c error-page
Pengembang aplikasi

Sesuaikan konten HTML.

  1. Buka file error-page.component.html.

  2. Ganti konten dengan yang berikut ini:

    <p>Sorry, this page is not available.</p>

  3. Simpan dan tutup file error-page.component.html.

Pengembang aplikasi

Mengatur jalur routing default.

  1. Buka error-page-routingfile.module.ts.

  2. Tetapkan rute default sebagai berikut:

    {
    path: '',
    component: ErrorPageComponent
  },

  3. Simpan dan tutup error-page-routingfile.module.ts.

Pengembang aplikasi

Buat fungsi untuk memuat mikro-frontend.

  1. Buka file app-routing.module.ts.

  2. Buat fungsi berikut:

    function loadMFE(url: string) {
    return loadRemoteModule({
        type: 'module',
        remoteEntry: `${url}/remoteEntry.js`,
        exposedModule: './Module'
    })
    .then(m => m.Mfe1Module)
    .catch(
        () => import('./error-page/error-page.module').then(m => m.ErrorPageModule)
    );
}

  3. Ubah mfe1 rute menjadi sebagai berikut:

    {
    path: 'mfe1',
    loadChildren: () => loadMFE(environment.mfe1URL)
},

  4. Simpan dan tutup file app-routing.module.ts.

Pengembang aplikasi

Uji penanganan kesalahan.

  1. Jika belum berjalan, masukkan perintah berikut untuk memulai aplikasi shell:

    npm start

  2. Di browser web, akseshttp://localhost:4200/mfe1.

  3. Verifikasi bahwa halaman kesalahan dirender. Anda akan melihat teks berikut:

    Sorry, this page is not available.
Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Menyebarkan micro-frontend.

  1. Di Amplify CLI, navigasikan ke folder root aplikasi micro-frontend.

  2. Masukkan perintah berikut untuk menginisialisasi Amplify:

    amplify init

  3. Ketika Anda diminta untuk memasukkan nama untuk proyek Amplify Anda, tekan Enter. Ini menggunakan kembali nama dari file package.json.

  4. Ketika Anda diminta untuk menginisialisasi proyek dengan konfigurasi di atas, masukkan. Yes

  5. Ketika Anda diminta untuk memilih metode otentikasi, pilih. AWS Profile

  6. Pilih profil yang ingin Anda gunakan.

  7. Tunggu Amplify untuk menginisialisasi proyek. Ketika proses ini selesai, Anda menerima pesan konfirmasi di terminal.

  8. Masukkan perintah berikut untuk menambahkan kategori Amplify hosting ke micro-frontend:

    amplify add hosting

  9. Ketika Anda diminta untuk memilih modul plugin, pilihHosting with Amplify Console.

  10. Ketika Anda diminta untuk memilih jenis, pilihManual deployment.

  11. Instal dependensi proyek npm dengan memasukkan perintah berikut:

    npm install

  12. Publikasikan aplikasi ke konsol Amplify dengan memasukkan perintah berikut:

    amplify publish -y

    Saat penerbitan selesai, Amplify mengembalikan URL micro-frontend.

  13. Salin URL. Anda memerlukan nilai ini untuk memperbarui aplikasi shell.

Pengembang aplikasi, AWS DevOps

Menyebarkan aplikasi shell.

  1. Di src/app/environmentsfolder, buka file environments.prod.ts.

  2. Ganti mfe1URL nilainya dengan URL micro-frontend yang digunakan:

    export const environment = {  
   production: true, 
   mfe1URL: 'https://<env>.<Amplify-app-ID>.amplifyapp.com'
 };

  3. Simpan dan tutup file environments.prod.ts.

  4. Di Amplify CLI, navigasikan ke folder root aplikasi shell.

  5. Masukkan perintah berikut untuk menginisialisasi Amplify:

    amplify init

  6. Ketika Anda diminta untuk memasukkan nama untuk proyek Amplify Anda, tekan Enter. Ini menggunakan kembali nama dari file package.json.

  7. Ketika Anda diminta untuk menginisialisasi proyek dengan konfigurasi di atas, masukkan. Yes

  8. Ketika Anda diminta untuk memilih metode otentikasi, pilih. AWS Profile

  9. Pilih profil yang ingin Anda gunakan.

  10. Tunggu Amplify untuk menginisialisasi proyek. Ketika proses ini selesai, Anda menerima pesan konfirmasi di terminal.

  11. Tambahkan kategori hosting Amplify ke aplikasi shell:

    amplify add hosting

  12. Ketika Anda diminta untuk memilih modul plugin, pilihHosting with Amplify Console.

  13. Ketika Anda diminta untuk memilih jenis, pilihManual deployment.

  14. Instal dependensi proyek npm dengan memasukkan perintah berikut:

    npm install

  15. Publikasikan aplikasi shell ke konsol Amplify dengan memasukkan perintah berikut:

    amplify publish -y

    Saat penerbitan selesai, Amplify mengembalikan URL aplikasi shell yang digunakan.

  16. Catat URL untuk aplikasi shell.

Pengembang aplikasi, Pemilik aplikasi

Aktifkan CORS.

Karena aplikasi shell dan micro-frontend di-host secara independen pada domain yang berbeda, Anda harus mengaktifkan cross-origin resource sharing (CORS) di micro-frontend. Hal ini memungkinkan aplikasi shell untuk memuat konten dari asal yang berbeda. Untuk mengaktifkan CORS, Anda menambahkan header khusus.

  1. Di Amplify CLI, navigasikan ke folder root dari micro-frontend.

  2. Masukkan perintah berikut:

    amplify configure hosting

  3. Saat Anda diminta untuk mengonfigurasi pengaturan khusus, masukkanY.

  4. Masuk ke AWS Management Console, lalu buka konsol Amplify.

  5. Pilih micro-frontend.

  6. Di panel navigasi, pilih Hosting, lalu pilih Header khusus.

  7. Pilih Edit.

  8. Di jendela Edit header khusus, masukkan yang berikut ini:

    customHeaders:
  - pattern: '*.js'
    headers:
      - key: Access-Control-Allow-Origin
        value: '*'
      - key: Access-Control-Allow-Methods
        value: 'GET, OPTIONS'
      - key: Access-Control-Allow-Headers
        value: '*'

  9. Pilih Simpan.

  10. Menerapkan ulang micro-frontend untuk menerapkan header kustom baru.

Pengembang aplikasi, AWS DevOps

Buat aturan penulisan ulang pada aplikasi shell.

Aplikasi shell Angular dikonfigurasi untuk menggunakan HTML5 routing. Jika pengguna melakukan penyegaran keras, Amplify mencoba memuat halaman dari URL saat ini. Ini menghasilkan kesalahan 403. Untuk menghindari hal ini, Anda menambahkan aturan penulisan ulang di konsol Amplify.

Untuk membuat aturan penulisan ulang, ikuti langkah-langkah ini:

  1. Di Amplify CLI, navigasikan ke folder root aplikasi shell.

  2. Masukkan perintah berikut:

    amplify configure hosting

  3. Saat Anda diminta untuk mengonfigurasi pengaturan khusus, masukkanY.

  4. Buka konsol Amplify.

  5. Pilih aplikasi shell.

  6. Di panel navigasi, pilih Hosting, lalu pilih Menulis ulang dan mengarahkan ulang.

  7. Pada halaman Menulis ulang dan mengarahkan ulang, pilih Kelola pengalihan.

  8. Pilih Buka editor teks.

  9. Di editor JSON, masukkan pengalihan berikut:

    [
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

  10. Pilih Simpan.

Pengembang aplikasi, AWS DevOps

Uji portal web.

  1. Di browser web, masukkan URL aplikasi shell yang digunakan.

  2. Verifikasi bahwa aplikasi shell dan micro-frontend dimuat dengan benar.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Hapus aplikasi.

Jika Anda tidak lagi membutuhkan aplikasi shell dan micro-frontend, hapuslah. Ini membantu mencegah biaya untuk sumber daya yang tidak Anda gunakan.

  1. Masuk ke AWS Management Console, lalu buka konsol Amplify.

  2. Pilih micro-frontend.

  3. Di panel navigasi, pilih Pengaturan aplikasi, lalu pilih Pengaturan umum.

  4. Pilih Hapus aplikasi.

  5. Di jendela konfirmasi, masukkandelete, lalu pilih Hapus aplikasi.

  6. Ulangi langkah-langkah ini untuk menghapus aplikasi shell.

AWS Umum

Pemecahan Masalah

IsuSolusi

Tidak ada AWS profil yang tersedia saat menjalankan amplify init perintah

Jika Anda tidak memiliki AWS profil yang dikonfigurasi, Anda masih dapat melanjutkan dengan amplify init perintah. Namun, Anda harus memilih AWS access keys opsi ketika Anda diminta untuk metode otentikasi. Sediakan kunci AWS akses dan kunci rahasia Anda.

Atau, Anda dapat mengonfigurasi profil bernama untuk file AWS CLI. Untuk petunjuknya, lihat Pengaturan konfigurasi dan file kredensi dalam AWS CLI dokumentasi.

Kesalahan saat memuat entri jarak jauh

Jika Anda mengalami kesalahan saat memuat entri jarak jauh di file main.ts dari aplikasi shell, pastikan environment.mfe1URL variabel disetel dengan benar. Nilai variabel ini harus URL dari micro-frontend.

Kesalahan 404 saat mengakses micro-frontend

Jika Anda mendapatkan kesalahan 404 saat mencoba mengakses micro-frontend lokal, seperti athttp://localhost:4200/mfe1, periksa hal berikut:

  • Untuk aplikasi shell, pastikan bahwa konfigurasi routing dalam file app-routing.module.ts diatur dengan benar, dan pastikan bahwa fungsi tersebut memanggil micro-frontend dengan benar. loadRemoteModule

  • Untuk micro-frontend, verifikasi bahwa file webpack.config.js memiliki exposes konfigurasi yang benar, dan pastikan bahwa file remoteEntry.js sedang dibuat dengan benar.

Informasi tambahan

AWS dokumentasi

Referensi lainnya