Menyebarkan aplikasi web Node.js + MongoDB ke Azure

  • Artikel

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.

Diagram yang menunjukkan cara aplikasi Express.js akan disebarkan ke Azure App Service, lalu data MongoDB akan dihosting di dalam Azure Cosmos DB.

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:

  1. Masukkan "database apl web" di bilah pencarian di bagian atas portal Azure.
  2. Pilih item berlabel Apl Web + Database di bawah judul Marketplace. Anda juga dapat menavigasi ke wizard pembuatan secara langsung.

Cuplikan layar yang menunjukkan cara menggunakan kotak pencarian di bilah alat atas untuk menemukan wizard pembuatan Apl Web + Database.

Langkah 2: Di halaman Buat Aplikasi Web + Database , isi formulir sebagai berikut.

  1. Grup Sumber Daya → Pilih Buat baru dan gunakan nama msdocs-expressjs-mongodb-tutorial.
  2. Wilayah → Wilayah Azure di dekat Anda.
  3. Nama → msdocs-expressjs-mongodb-XYZ di mana XYZ adalah tiga karakter acak. Nama ini harus unik di seluruh Azure.
  4. Tumpukan runtime → Node 16 LTS.
  5. Paket hosting → Dasar. Setelah siap, Anda dapat melakukan peningkatan ke tingkat harga produksi nanti.
  6. 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.
  7. Pilih Tinjau + buat.
  8. Setelah validasi selesai, pilih Buat.

Cuplikan layar yang menampilkan cara mengonfigurasi apl dan database baru di wizard Apl Web + Database.

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.

Cuplikan layar menunjukkan proses penyebaran selesai.

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.

Cuplikan layar yang menampilkan cara membuka halaman konfigurasi di App Service.

Langkah 2: Di tab Pengaturan aplikasi di halaman Konfigurasi , buat DATABASE_NAME pengaturan:

  1. Pilih Pengaturan aplikasi baru.
  2. Di bidang Nama, masukkan DATABASE_NAME.
  3. Di bidang Nilai, masukkan nama database yang dihasilkan secara otomatis dari wizard pembuatan, yang terlihat seperti msdocs-expressjs-mongodb-XYZ-database.
  4. PilihOK.

Cuplikan layar menampilkan cara melihat string koneksi yang dihasilkan secara otomatis.

Langkah 3:

  1. Gulir ke bagian bawah halaman dan pilih string koneksi MONGODB_URI. Ini dihasilkan oleh wizard pembuatan.
  2. Di bidang Nilai, pilih tombol Salin dan tempelkan nilainya dalam file teks untuk langkah selanjutnya. Ini dalam format URI string koneksi MongoDB.
  3. Pilih Batalkan.

Cuplikan layar menampilkan cara membuat pengaturan aplikasi.

Langkah 4:

  1. 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 (yaitu mongodb://...).
  2. Di bilah menu di bagian atas, pilih Simpan.
  3. Saat diminta, pilih Lanjutkan.

Cuplikan layar yang menunjukkan cara menyimpan pengaturan di halaman konfigurasi.

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:

  1. Masuk ke akun GitHub Anda.
  2. Navigasikan ke https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Pilih Fork.
  4. Pilih Buat fork.

Cuplikan layar yang menampilkan cara membuat fork repositori GitHub sampel.

Langkah 2: Di halaman GitHub, buka Visual Studio Code di browser dengan menekan tombol . .

Cuplikan layar yang menampilkan cara membuka pengalaman browser Visual Studio Code di GitHub.

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

Cuplikan layar yang menampilkan Visual Studio Code di browser dan file yang terbuka.

Langkah 4: Kembali ke halaman App Service, di menu sebelah kiri, pilih Pusat Penyebaran.

Cuplikan layar yang menampilkan cara membuka pusat penyebaran di App Service.

Langkah 5: Di halaman Pusat Penyebaran:

  1. Di Sumber, pilih GitHub. Secara default, GitHub Actions dipilih sebagai penyedia build.
  2. Masuk ke akun GitHub Anda dan ikuti perintah untuk mengotorisasi Azure.
  3. Di Organisasi, pilih akun Anda.
  4. Di Repositori, pilih msdocs-nodejs-mongodb-azure-sample-app.
  5. Di Cabang, pilih utama.
  6. Di menu atas, pilih Simpan. App Service menerapkan file alur kerja ke dalam repositori GitHub yang dipilih, di direktori .github/workflows.

Cuplikan layar menampilkan cara mengonfigurasi CI/CD menggunakan GitHub Actions.

Langkah 6: Di halaman Pusat Penyebaran:

  1. Pilih Log. Eksekusi penyebaran sudah dimulai.
  2. Di item log untuk eksekusi penyebaran, pilih Build/Sebarkan Log.

Cuplikan layar yang menampilkan cara membuka log penyebaran di pusat penyebaran.

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.

Cuplikan layar menunjukkan eksekusi GitHub.

4. Menelusuri aplikasi

Langkah 1: Di halaman App Service:

  1. Dari menu kiri, pilih Ringkasan.
  2. Pilih URL aplikasi Anda. Anda juga dapat menavigasi langsung ke https://<app-name>.azurewebsites.net.

Cuplikan layar yang menampilkan cara meluncurkan App Service dari portal Azure.

Langkah 2: Tambahkan beberapa tugas ke daftar. Selamat, Anda menjalankan aplikasi Node.js berbasis data di Azure App Service.

Cuplikan layar aplikasi Express.js yang berjalan di 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:

  1. Dari menu kiri, pilih Log App Service.
  2. Di Pengelogan aplikasi, pilih Sistem File.

Cuplikan layar yang menampilkan cara mengaktifkan log asli di App Service di portal Azure.

Langkah 2: Dari menu sebelah kiri, pilih Aliran log. Anda melihat log untuk aplikasi Anda, termasuk log platform dan log dari dalam kontainer.

Cuplikan layar yang menampilkan cara melihat aliran log di porta Azure.

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:

  1. Dari menu kiri, pilih Alat Tingkat Lanjut.
  2. Pilih Buka. Anda juga dapat menavigasi langsung ke https://<app-name>.scm.azurewebsites.net.

Cuplikan layar menunjukkan cara membuka halaman App Service Kudu.

Langkah 2: Di halaman Kudu, pilih Penyebaran.

Cuplikan layar halaman utama di aplikasi Kudu SCM yang menunjukkan beragam informasi tentang lingkungan hosting.

Jika Anda telah menyebarkan kode untuk App Service menggunakan Git atau penyebaran zip, Anda akan melihat riwayat penyebaran aplikasi web Anda.

Cuplikan layar menunjukkan riwayat penyebaran aplikasi App Service dalam format JSON.

Langkah 3: Kembali ke beranda Kudu dan pilih Situs wwwroot.

Cuplikan layar menunjukkan situs wwwroot dipilih.

Anda dapat melihat struktur folder yang disebarkan dan mengklik untuk menelusuri dan melihat file.

Cuplikan layar file yang disebarkan di direktori wwwroot.

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:

  1. Masukkan nama grup sumber daya.
  2. Pilih grup sumber daya.

Cuplikan layar yang menunjukkan cara mencari dan menavigasi ke grup sumber daya di portal Azure.

Langkah 2: Di halaman grup sumber daya, pilih Hapus grup sumber daya.

Cuplikan layar yang menunjukkan letak tombol Hapus Grup Sumber Daya di portal Azure.

Langkah 3:

  1. Masukkan nama grup sumber daya untuk mengonfirmasi penghapusan Anda.
  2. Pilih Hapus.

Cuplikan layar dialog konfirmasi untuk menghapus grup sumber daya di portal Azure. :

Tanya jawab umum

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 dengan mongosh, 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:

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.

Langkah berikutnya

JavaScript di pusat pengembang Azure

Konfigurasikan aplikasi Node.js di App Service

 Amankan dengan domain dan sertifikat kustom