Tutorial ini menjelaskan cara mengonfigurasi aplikasi MERN agar berfungsi di Azure Web Services dan cara menyebarkannya melalui GitHub + integrasi berkelanjutan. Tutorial ini bekerja dari aplikasi MERN siap pakai berwarna biru yang telah saya buat.
Catatan: Tutorial ini tidak membahas cara menyiapkan aplikasi CRUD MERN secara lengkap atau cara mengembangkannya di React. Satu-satunya data yang akan kami kirim dari backend ke frontend adalah objek kamus kecil.
Sumber Daya Tambahan yang Hebat
Jika Anda ingin mempelajari cara membuat aplikasi CRUD MERN lengkap atau mengembangkannya di React, saya merekomendasikan sumber daya berikut. Jika tidak, lewati ke bagian berikutnya.
Artikel yang sangat luar biasa tentang penerapan aplikasi MERN ke Azure melalui CI (mencakup lebih dari artikel ini tetapi sedikit berbeda)
Tutorial MERN Azure milik Microsoft
Untuk aplikasi React yang siap produksi penuh
Mari kita mulai
Prasyarat
- akun Azure
- Akun Git + GitHub (untuk integrasi berkelanjutan)
- Akun MongoDB Atlas (tingkat gratis) (Anda juga dapat menggunakan CosmosDB milik Azure alih-alih MongoDB Atlas tetapi tutorial ini tidak membahasnya)
Langkah Pertama
- Kloning repo di [https://github.com/Sogutt/Azure-MERN-Boilerplate]. Ini adalah boilerplate aplikasi MERN siap pakai Azure.
- Jalankan "npm install" di direktori root.
- Jalankan "yarn install" di direktori klien.
- Sesuaikan URL koneksi MongoDB di new-index.js dengan URL koneksi yang Anda dapatkan dari MongoDB Atlas. Jika Anda tidak tahu cara melakukannya, buka cluster Anda di MongoDB Atlas, klik tombol “sambungkan” dan ikuti langkah-langkah di bawah ini.
Item MongoDB terakhir yang diubah adalah nama database pada baris 12.
Setelah Anda memodifikasi URL MongoDB + nama database, dan menginstal paket di direktori root dan klien, Anda siap untuk mengembangkan template ini. Pastikan untuk menjalankan "npm run build" setelah perubahan apa pun di direktori klien sebelum Anda menyebarkan ke Azure. Jika tidak, perubahan tidak akan terlihat di Azure.
1. Struktur & Logika Proyek
Strukturnya hanyalah satu aplikasi (frontend-React) di dalam aplikasi lain (backend-Node/Express). Direktori root berisi logika backend kami bersama dengan semua modul yang diperlukan. Direktori klien berisi seluruh aplikasi frontend dengan semua paket yang diperlukan untuk menjalankan aplikasi React kita. Untuk menekankan bahwa ini pada dasarnya adalah dua proyek terpisah, saya menggunakan npm untuk mengelola aplikasi backend dan benang untuk mengelola aplikasi reaksi.
Karena nilai tambah templat ini menyediakan lingkungan siap pakai Azure, logika API (komunikasi backend-frontend) sangat mudah. MongoDB kami berisi kamus sederhana (seperti yang terlihat di bawah). Kami mengambil data ini dan mengirimkannya ke aplikasi React frontend kami untuk merendernya.
2. Lingkungan Pengembang vs Prod
Ada 3 perbedaan utama antara lingkungan pengembangan lokal dan lingkungan produksi Azure.
Pertama, kita perlu memastikan bahwa kita tidak melakukan hard coding port kita di server.js, karena ini tidak akan berfungsi di Azure. Sebagai gantinya, kami menentukan port dengan cara berikut.
app.set('port', process.env.PORT || 5000);
console.log("++++++++++++++++" + app.get('port'));
Perbedaan kedua adalah di Azure, frontend kami disajikan sebagai build React statis. Ini berarti kita perlu menjalankan “npm run build” di direktori klien kita dan kemudian memasukkan baris kode berikut di server.js kita. Hal ini memungkinkan Express untuk menyajikan build yang baru saja kami buat, yang merupakan cara kami menyajikan frontend kami di Azure.
app.use(express.static('./client/build'));
Ketiga, kita perlu mengarahkan rute GET/ kita di server.js ke index.html di build kita.
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build",
"index.html"));
});
Sekarang kita bisa menyebarkannya.
3. Menyiapkan Integrasi Berkelanjutan
Catatan: Anda perlu menyiapkan Aplikasi Web Azure sebelum langkah ini. Ini adalah proses yang sangat mudah, jadi menurut saya tidak banyak yang perlu dibahas. Namun, pastikan runtime Anda adalah Node 12.0 LTS. Jika Anda sudah menyiapkan aplikasi web dengan runtime berbeda, Anda dapat mengubahnya di Konfigurasi -› Pengaturan Umum.
Setelah Anda menyiapkan aplikasi web, navigasikan ke "Pusat Penerapan".
Setelah kolom Status bertuliskan “Sukses (Aktif)”, penerapan selesai. Anda dapat menavigasi ke situs web melalui tombol Telusuri di kiri atas. Anda akan melihat halaman web yang sangat sederhana di mana kami hanya mencantumkan elemen dalam objek kamus yang kami dapatkan dari MongoDB.
Mari lakukan demo singkat untuk menguji CI kita. Kami akan menambahkan sedikit teks, “Demo Integrasi Berkelanjutan Pertama”, pada baris 40 di App.js. Karena kita telah mengubah aplikasi reaksi, kita perlu menjalankan “npm run build” di dalam direktori klien kita. Jika Anda ingat, build statis inilah yang kami sajikan dengan Express di Azure.
Setelah kita memiliki build baru, kita dapat melakukan push ke repo seperti biasa. Setelah push selesai, Azure akan secara otomatis menyebarkan ulang aplikasi (meskipun Anda mungkin melakukan refresh untuk melihat perubahannya). Dalam dua tangkapan layar di bawah ini Anda dapat melihat bagaimana halaman Azure Deployment Center disinkronkan dengan repo GitHub kami. Pesan yang kami berikan, “demo integrasi berkelanjutan”, ditampilkan sehingga kami dapat melacak versi terbaru aplikasi kami yang diterapkan dan aktif di Azure.
Terakhir, kami melihat bahwa perubahan kami telah tercermin dalam aplikasi kami yang sebenarnya!
Saya harap tutorial ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan, beri tahu saya di komentar!
