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](https://docs.amplify.aws/gen1/angular/), framework frontend [Angular, dan Module](https://angular.dev/overview) Federation.](https://webpack.js.org/concepts/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](https://www.npmjs.com/package/@angular-architects/module-federation) 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** + Aktif Akun AWS + [Node.js dan npm, diinstal](https://nodejs.org/en/download/) + [Amplify CLI, diinstal](https://docs.amplify.aws/gen1/angular/tools/cli/) + [CLI sudut, dipasang](https://angular.io/cli) + [Izin](https://docs.aws.amazon.com/service-authorization/latest/reference/list_awsamplify.html) untuk digunakan AWS Amplify + Keakraban dengan Angular **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](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html) 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.\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/images/pattern-img/ddf82a69-bf1b-4ad1-8e60-3dd375699936/images/cf045bf1-11ea-46d9-93cb-3c603122450d.png) 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. 1. 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. 1. Pengguna akhir mengautentikasi dengan menggunakan Amazon Cognito. 1. 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 Amplify](https://docs.amplify.aws/angular/start/)adalah 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)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) adalah alat open source yang membantu Anda berinteraksi Layanan AWS melalui perintah di shell baris perintah Anda. **Alat lainnya** + [@angular -architects/module-federation adalah plugin yang mengintegrasikan Angular dengan Federasi](https://github.com/angular-architects/module-federation-plugin) Modul. + [Angular](https://angular.dev/overview) 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](https://nodejs.org/en/docs/) adalah lingkungan JavaScript runtime berbasis peristiwa yang dirancang untuk membangun aplikasi jaringan yang dapat diskalakan. + [npm](https://docs.npmjs.com/about-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](https://webpack.js.org/concepts/module-federation/) 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](https://github.com/aws-samples/angular-module-federation-mfe). GitHub Repositori ini berisi dua folder berikut: + `shell-app`berisi kode untuk aplikasi shell. + `feature1-app`berisi 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 memungkinkan pengembangan dan penyebaran independen, setiap frontend mikro 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 ### Buat aplikasi shell | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat aplikasi shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Instal plugin. | Di CLI Angular, masukkan perintah berikut untuk menginstal plugin [@angular -architects/module-federation](https://www.npmjs.com/package/@angular-architects/module-federation):
ng add @angular-architects/module-federation --project shell --port 4200
| Pengembang aplikasi | | Tambahkan URL micro-frontend sebagai variabel lingkungan. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Tentukan routing. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Deklarasikan modul. `mfe1` | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Siapkan preloading untuk micro-frontend. | Memuat pramuat micro-frontend membantu webpack menegosiasikan pustaka dan paket bersama dengan benar.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Sesuaikan konten HTML. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | ### Buat aplikasi micro-frontend | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Buat micro-frontend. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 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. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Tambahkan `mfe1` rute. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Edit file **webpack.config.js**. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Sesuaikan konten HTML. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | ### Jalankan aplikasi secara lokal | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Jalankan `mfe1` aplikasi. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Jalankan aplikasi shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | ### Memfaktorkan ulang aplikasi shell untuk menangani kesalahan pemuatan frontend mikro | Tugas | Deskripsi | Keterampilan 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. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Mengatur jalur routing default. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Buat fungsi untuk memuat mikro-frontend. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | | Uji penanganan kesalahan. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | ### Menyebarkan aplikasi dengan menggunakan AWS Amplify | Tugas | Deskripsi | Keterampilan yang dibutuhkan | | --- | --- | --- | | Menyebarkan micro-frontend. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi, AWS DevOps | | Menyebarkan aplikasi shell. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 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. Ini memungkinkan aplikasi shell memuat konten dari asal yang berbeda. Untuk mengaktifkan CORS, Anda menambahkan header khusus.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | 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:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi, AWS DevOps | | Uji portal web. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | Pengembang aplikasi | ### Pembersihan sumber daya | Tugas | Deskripsi | Keterampilan 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.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | AWS Umum | ## Pemecahan masalah | Isu | Solusi | | --- | --- | | 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 petunjuk, lihat [Pengaturan konfigurasi dan file kredensi](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) 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 at`http://localhost:4200/mfe1`, periksa hal berikut:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-amplify-micro-frontend-portal.html) | ## Informasi tambahan **AWS dokumentasi** + [Memahami dan menerapkan frontend mikro pada AWS(Panduan Preskriptif](https://docs.aws.amazon.com/prescriptive-guidance/latest/micro-frontends-aws/introduction.html))AWS + [Amplify CLI (Amplify](https://docs.amplify.aws/gen1/angular/tools/cli/) dokumentasi) + [Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) (Amplify dokumentasi) **Referensi lainnya** + [Federasi Modul](https://webpack.js.org/concepts/module-federation/) + [Node.js](https://nodejs.org/en/) + [Sudut](https://angular.io/) + [@angular -architects/modul-federasi](https://www.npmjs.com/package/@angular-architects/module-federation)