Menyebarkan aplikasi web Node.js + MongoDB ke Azure
Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch mandiri menggunakan sistem operasi Linux. Tutorial ini menunjukkan cara membuat aplikasi Node.js aman di Azure App Service yang terhubung ke database Azure Cosmos DB for MongoDB. Setelah selesai, Anda akan memiliki aplikasi Express.js yang berjalan di Azure App Service di Linux.
Artikel ini mengasumsikan Anda sudah terbiasa dengan pengembangan Node.js dan telah menginstal Node dan MongoDB secara lokal. Anda juga akan membutuhkan akun Azure dengan langganan aktif. Jika Anda tidak memiliki akun Azure, Anda dapat membuat akun secara gratis.
Aplikasi sampel
Untuk mengikuti tutorial ini, klon atau unduh aplikasi sampel dari repositori https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git
Jika Anda ingin menjalankan aplikasi secara lokal, lakukan hal berikut:
- Instal dependensi paket dengan menjalankan
npm install
. - Salin
.env.sample
file ke.env
dan isi nilai DATABASE_URL dengan URL MongoDB Anda (misalnya mongodb://localhost:27017/). - Mulai aplikasi menggunakan
npm start
. - Untuk melihat aplikasi, telusuri ke
http://localhost:3000
.
1. Buat App Service dan Azure Cosmos DB
Dalam langkah ini, Anda membuat sumber daya Azure. Langkah-langkah yang digunakan dalam tutorial ini membuat sekumpulan sumber daya aman secara default yang mencakup App Service dan Azure Cosmos DB untuk MongoDB. Untuk proses pembuatan, Anda akan menentukan:
- Nama untuk aplikasi web. Ini adalah nama yang digunakan sebagai bagian dari nama DNS untuk aplikasi web Anda dalam bentuk
https://<app-name>.azurewebsites.net
. - Wilayah tempat menjalankan aplikasi secara fisik di dunia.
- Tumpukan runtime untuk aplikasi. Di situlah Anda memilih versi Node yang digunakan untuk aplikasi Anda.
- Paket hosting untuk aplikasi. Ini adalah tingkat harga yang mencakup serangkaian fitur dan kapasitas penskalaan untuk aplikasi Anda.
- Resource Group untuk aplikasi. Grup sumber daya memungkinkan Anda mengelompokkan (dalam kontainer logika) semua sumber daya Azure yang diperlukan untuk aplikasi.
Masuk ke portal Azure dan ikuti langkah-langkah ini untuk membuat sumber daya Layanan Aplikasi Azure Anda.
Langkah 1: Di portal Azure:
- Masukkan "database apl web" di bilah pencarian di bagian atas portal Azure.
- Pilih item berlabel Apl Web + Database di bawah judul Marketplace. Anda juga dapat menavigasi ke wizard pembuatan secara langsung.
Langkah 2: Di halaman Buat Aplikasi Web + Database , isi formulir sebagai berikut.
- Grup Sumber Daya → Pilih Buat baru dan gunakan nama msdocs-expressjs-mongodb-tutorial.
- Wilayah → Wilayah Azure di dekat Anda.
- Nama → msdocs-expressjs-mongodb-XYZ di mana XYZ adalah tiga karakter acak. Nama ini harus unik di seluruh Azure.
- Tumpukan runtime → Node 16 LTS.
- Paket hosting → Dasar. Setelah siap, Anda dapat melakukan peningkatan ke tingkat harga produksi nanti.
- Azure Cosmos DB untuk MongoDB dipilih secara default sebagai mesin database. Azure Cosmos DB adalah database cloud native yang menawarkan API yang 100% kompatibel dengan MongoDB. Perhatikan nama database yang dihasilkan untuk Anda (<app-name>-database). Anda akan membutuhkannya nanti.
- Pilih Tinjau + buat.
- Setelah validasi selesai, pilih Buat.
Langkah 3: Penyebaran membutuhkan waktu beberapa menit untuk diselesaikan. Setelah penyebaran selesai, pilih tombol Buka sumber daya. Anda diarahkan ke aplikasi App Service, tetapi sumber daya berikut dibuat:
- Grup sumber daya → Kontainer untuk semua sumber daya yang dibuat.
- App Service → Menentukan sumber daya komputasi untuk App Service. Paket Linux di tingkat Dasar dibuat.
- App Service → Mewakili aplikasi Anda dan berjalan dalam paket App Service.
- Jaringan virtual → Terintegrasi dengan aplikasi App Service dan mengisolasi lalu lintas jaringan back-end.
- Titik akhir privat → Titik akhir akses untuk sumber daya database di jaringan virtual.
- Antarmuka jaringan → Mewakili alamat IP privat untuk titik akhir privat.
- Azure Cosmos DB for MongoDB → Hanya dapat diakses dari belakang titik akhir privat. Database dan pengguna dibuat untuk Anda di server.
- Zona DNS privat → Memungkinkan resolusi DNS server Azure Cosmos DB di jaringan virtual.
2. Menyiapkan konektivitas database
Wizard pembuatan menghasilkan URI MongoDB untuk Anda, tetapi aplikasi Anda memerlukan variabel DATABASE_URL
dan DATABASE_NAME
. Dalam langkah ini, Anda membuat pengaturan aplikasi dengan format yang dibutuhkan aplikasi Anda.
Langkah 1: Di halaman App Service, di menu sebelah kiri, pilih Konfigurasi.
Langkah 2: Di tab Pengaturan aplikasi di halaman Konfigurasi , buat DATABASE_NAME
pengaturan:
- Pilih Pengaturan aplikasi baru.
- Di bidang Nama, masukkan DATABASE_NAME.
- Di bidang Nilai, masukkan nama database yang dihasilkan secara otomatis dari wizard pembuatan, yang terlihat seperti msdocs-expressjs-mongodb-XYZ-database.
- PilihOK.
Langkah 3:
- Gulir ke bagian bawah halaman dan pilih string koneksi MONGODB_URI. Ini dihasilkan oleh wizard pembuatan.
- Di bidang Nilai, pilih tombol Salin dan tempelkan nilainya dalam file teks untuk langkah selanjutnya. Ini dalam format URI string koneksi MongoDB.
- Pilih Batalkan.
Langkah 4:
- Dengan menggunakan langkah yang sama di Langkah 2, buat pengaturan aplikasi bernama DATABASE_URL dan atur nilai ke nilai yang Anda salin dari
MONGODB_URI
string koneksi (yaitumongodb://...
). - Di bilah menu di bagian atas, pilih Simpan.
- Saat diminta, pilih Lanjutkan.
3. Menyebarkan kode sampel
Dalam langkah ini, Anda akan mengonfigurasi penyebaran GitHub menggunakan GitHub Actions. Ini hanya salah satu dari banyak cara untuk menyebarkan ke App Service, tetapi juga cara yang bagus untuk memiliki integrasi berkelanjutan dalam proses penyebaran Anda. Secara default, setiap git push
repositori GitHub Anda akan memulai tindakan build dan deploy.
Langkah 1: Di jendela browser baru:
- Masuk ke akun GitHub Anda.
- Navigasikan ke https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
- Pilih Fork.
- Pilih Buat fork.
Langkah 2: Di halaman GitHub, buka Visual Studio Code di browser dengan menekan tombol .
.
Langkah 3: Di Visual Studio Code di browser, buka config/connection.js di explorer.
Dalam fungsi getConnectionInfo
, lihat bahwa pengaturan aplikasi yang Anda buat sebelumnya untuk koneksi MongoDB digunakan (DATABASE_URL
dan DATABASE_NAME
).
Langkah 4: Kembali ke halaman App Service, di menu sebelah kiri, pilih Pusat Penyebaran.
Langkah 5: Di halaman Pusat Penyebaran:
- Di Sumber, pilih GitHub. Secara default, GitHub Actions dipilih sebagai penyedia build.
- Masuk ke akun GitHub Anda dan ikuti perintah untuk mengotorisasi Azure.
- Di Organisasi, pilih akun Anda.
- Di Repositori, pilih msdocs-nodejs-mongodb-azure-sample-app.
- Di Cabang, pilih utama.
- Di menu atas, pilih Simpan. App Service menerapkan file alur kerja ke dalam repositori GitHub yang dipilih, di direktori
.github/workflows
.
Langkah 6: Di halaman Pusat Penyebaran:
- Pilih Log. Eksekusi penyebaran sudah dimulai.
- Di item log untuk eksekusi penyebaran, pilih Build/Sebarkan Log.
Langkah 7: Anda dibawa ke repositori GitHub Anda dan melihat bahwa tindakan GitHub sedang berjalan. File alur kerja menentukan dua tahap terpisah, mem-build dan menyebarkan. Tunggu hingga eksekusi GitHub menampilkan status Selesai. Memakan waktu 15 menit.
4. Menelusuri aplikasi
Langkah 1: Di halaman App Service:
- Dari menu kiri, pilih Ringkasan.
- Pilih URL aplikasi Anda. Anda juga dapat menavigasi langsung ke
https://<app-name>.azurewebsites.net
.
Langkah 2: Tambahkan beberapa tugas ke daftar. Selamat, Anda menjalankan aplikasi Node.js berbasis data di Azure App Service.
5. Mengalirkan log diagnostik
Azure App Service menangkap semua pesan yang masuk ke konsol untuk membantu Anda mendiagnosis masalah dengan aplikasi Anda. Aplikasi sampel mengeluarkan pesan log konsol dalam setiap titik akhirnya untuk menunjukkan kemampuan ini. Misalnya, get
titik akhir mengeluarkan pesan tentang jumlah tugas yang diambil dari database dan pesan kesalahan muncul jika terjadi kesalahan.
router.get('/', function(req, res, next) {
Task.find()
.then((tasks) => {
const currentTasks = tasks.filter(task => !task.completed);
const completedTasks = tasks.filter(task => task.completed === true);
console.log(`Total tasks: ${tasks.length} Current tasks: ${currentTasks.length} Completed tasks: ${completedTasks.length}`)
res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
})
.catch((err) => {
console.log(err);
res.send('Sorry! Something went wrong.');
});
});
Langkah 1: Di halaman App Service:
- Dari menu kiri, pilih Log App Service.
- Di Pengelogan aplikasi, pilih Sistem File.
Langkah 2: Dari menu sebelah kiri, pilih Aliran log. Anda melihat log untuk aplikasi Anda, termasuk log platform dan log dari dalam kontainer.
6. Memeriksa file yang disebarkan menggunakan Kudu
Azure App Service menyediakan konsol diagnostik berbasis web bernama Kudu yang memungkinkan Anda memeriksa lingkungan hosting server untuk aplikasi web Anda. Menggunakan Kudu, Anda dapat melihat file yang disebarkan ke Azure, meninjau riwayat penyebaran aplikasi, dan bahkan membuka sesi SSH ke lingkungan hosting.
Langkah 1: Di halaman App Service:
- Dari menu kiri, pilih Alat Tingkat Lanjut.
- Pilih Buka. Anda juga dapat menavigasi langsung ke
https://<app-name>.scm.azurewebsites.net
.
Langkah 2: Di halaman Kudu, pilih Penyebaran.
Jika Anda telah menyebarkan kode untuk App Service menggunakan Git atau penyebaran zip, Anda akan melihat riwayat penyebaran aplikasi web Anda.
Langkah 3: Kembali ke beranda Kudu dan pilih Situs wwwroot.
Anda dapat melihat struktur folder yang disebarkan dan mengklik untuk menelusuri dan melihat file.
7. Membersihkan sumber daya
Setelah selesai, Anda dapat menghapus semua sumber daya dari langganan Azure dengan menghapus grup sumber daya.
Langkah 1: Di bilah pencarian di bagian atas portal Azure:
- Masukkan nama grup sumber daya.
- Pilih grup sumber daya.
Langkah 2: Di halaman grup sumber daya, pilih Hapus grup sumber daya.
Langkah 3:
- Masukkan nama grup sumber daya untuk mengonfirmasi penghapusan Anda.
- Pilih Hapus.
Tanya jawab umum
- Berapa biaya untuk penyiapan ini?
- Bagaimana cara menyambungkan ke server Azure Cosmos DB yang diamankan di belakang jaringan virtual dengan alat lain?
- Bagaimana cara kerja pengembangan aplikasi lokal dengan GitHub Actions?
- Mengapa penyebaran GitHub Actions begitu lambat?
Berapa biaya untuk penyiapan ini?
Harga untuk buat sumber daya adalah sebagai berikut:
- Paket App Service dibuat di tingkat Dasar dan dapat ditingkatkan atau diturunkan. Lihat Harga App Service.
- Server Azure Cosmos DB dibuat dalam satu wilayah dan dapat didistribusikan ke wilayah lain. Lihat Harga Azure Cosmos DB.
- Jaringan virtual tidak dikenakan biaya kecuali Anda mengonfigurasi fungsionalitas tambahan, seperti peering. Lihat Harga Azure Virtual Network.
- Zona DNS privat dikenakan biaya kecil. Lihat Harga Azure DNS.
Bagaimana cara menyambungkan ke server Azure Cosmos DB yang diamankan di belakang jaringan virtual dengan alat lain?
- Untuk akses dasar dari alat baris perintah, Anda dapat menjalankan
mongosh
dari terminal SSH aplikasi. Kontainer aplikasi tidak disertakan denganmongosh
, jadi Anda harus menginstalnya secara manual. Ingat bahwa klien yang diinstal tidak bertahan di seluruh mulai ulang aplikasi. - Untuk terhubung dari klien GUI MongoDB, komputer Anda harus berada dalam jaringan virtual. Misalnya, itu bisa berupa Azure VM yang terhubung ke salah satu subnet, atau komputer di jaringan lokal yang memiliki koneksi VPN situs-ke-situs dengan jaringan virtual Azure.
- Untuk terhubung dari shell MongoDB dari halaman manajemen Azure Cosmos DB di portal, komputer Anda juga harus berada dalam jaringan virtual. Anda dapat membuka firewall server Azure Cosmos DB untuk alamat IP komputer lokal Anda, tetapi meningkatkan permukaan serangan untuk konfigurasi Anda.
Bagaimana cara kerja pengembangan aplikasi lokal dengan GitHub Actions?
Ambil file alur kerja yang dibuat secara otomatis dari App Service sebagai contoh, masing-masing git push
memulai eksekusi build dan penyebaran baru. Dari klon lokal repositori GitHub, Anda membuat pembaruan yang diinginkan mendorongnya ke GitHub. Contohnya:
git add .
git commit -m "<some-message>"
git push origin main
Mengapa penyebaran GitHub Actions begitu lambat?
File alur kerja yang dibuat secara otomatis dari App Service mendefinisikan eksekusi dua pekerjaan, build-then-deploy. Karena setiap pekerjaan berjalan di lingkungannya sendiri yang bersih, file alur kerja memastikan bahwa pekerjaan deploy
memiliki akses ke file dari pekerjaan build
:
- Di akhir pekerjaan
build
, unggah file sebagai artefak. - Di awal pekerjaan
deploy
, unduh artefak.
Sebagian besar waktu yang dibutuhkan oleh proses dua pekerjaan dihabiskan untuk mengunggah dan mengunduh artefak. Jika mau, Anda dapat menyederhanakan file alur kerja dengan menggabungkan dua pekerjaan menjadi satu, yang menghilangkan kebutuhan untuk langkah-langkah pengunggahan dan pengunduhan.