Mengakses data di Azure Cosmos DB menggunakan Mongoose dengan Azure Static Web Apps

Mongoose adalah klien ODM (Pemetaan Objek Dokumen) paling populer untuk Node.js. Mongoose memungkinkan Anda merancang struktur data dan menerapkan validasi, dan menyediakan semua alat yang diperlukan untuk berinteraksi dengan database yang mendukung MONGODB API. Cosmos DB mendukung API MongoDB yang diperlukan dan tersedia sebagai opsi server back-end di Azure.

Prasyarat

• Akun Azure. Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis.
• Akun GitHub.
• Akun tanpa server Cosmos DB . Dengan akun tanpa server, Anda hanya membayar sumber daya saat digunakan dan menghindari kebutuhan untuk membuat infrastruktur penuh.

1. Membuat database tanpa server Cosmos DB

Selesaikan langkah-langkah berikut untuk membuat DB tanpa server Cosmos.

1. Masuk ke portal Azure.
2. Pilih Buat sumber daya.
3. Masukkan Azure Cosmos DB di kotak pencarian.
4. Pilih Azure Cosmos DB.
5. Pilih Buat.
6. Jika diminta, di bawah Azure Cosmos DB API untuk MongoDB pilih Buat.
7. Konfigurasikan Akun Azure Cosmos DB Anda dengan informasi berikut:
   • Langganan: Pilih langganan yang akan digunakan
   • Sumber Daya: Pilih Buat baru, dan atur nama ke aswa-mongoose
   • Nama akun: Nilai unik diperlukan
   • Lokasi: US Barat 2
   • Mode kapasitas: Tanpa server (pratinjau)
   • Versi: 4.0
8. Pilih Tinjau + buat.
9. Pilih Buat.

Proses pembuatan membutuhkan waktu beberapa menit. Kita akan kembali ke database untuk mengumpulkan string koneksi setelah kita membuat aplikasi web statis.

2. Membuat aplikasi web statis

Tutorial ini menggunakan repositori templat GitHub untuk membantu Anda membuat aplikasi Anda.

1. Buka templat pemula.

2. Pilih pemilik (jika menggunakan organisasi selain akun utama Anda).

3. Beri nama repositori Anda aswa-mongoose-tutorial.

4. Pilih Buat repositori dari templat.

5. Masuk ke portal Microsoft Azure.

6. Pilih Buat sumber daya.

7. Masukkan aplikasi web statis di kotak pencarian.

8. Pilih Aplikasi Web Statis.

9. Pilih Buat.

10. Konfigurasikan Azure Static Web App dengan informasi berikut:

    • Langganan: Memilih langganan yang sama seperti sebelumnya
    • Grup sumber daya: Pilih aswa-mongoose
    • Nama: aswa-mongoose-tutorial
    • Wilayah: US Barat 2
    • Pilih Masuk dengan GitHub
    • Pilih Otorisasi jika diminta untuk mengizinkan Azure Static Web Apps membuat GitHub Action untuk mengaktifkan penyebaran
    • Organisasi: Nama akun GitHub Anda
    • Repositori: aswa-mongoose-tutorial
    • Cabang: utama
    • Preset build: Pilih React
    • Lokasi aplikasi: /
    • Lokasi API: api
    • Lokasi output: build

11. Pilih Tinjau dan buat.

12. Pilih Buat.

13. Proses pembuatan membutuhkan waktu beberapa saat; pilih Buka sumber daya setelah aplikasi web statis disediakan.

3. Mengonfigurasi string koneksi database

Untuk memungkinkan aplikasi web berkomunikasi dengan database, string koneksi database disimpan sebagai pengaturan aplikasi. Nilai pengaturan dapat diakses di Node.js menggunakan objek process.env.

1. Pilih Beranda di sudut kiri atas portal Azure (atau kembali ke https://portal.azure.com).
2. Pilih Grup sumber daya.
3. Pilih aswa-mongoose.
4. Pilih nama akun database Anda - memiliki jenis Azure Cosmos DB API untuk Mongo DB.
5. Di bawah Pengaturan pilih String Koneksi.
6. Salin string koneksi yang tercantum di bawah STRING KONEKSI UTAMA.
7. Di remah roti, pilih aswa-mongoose.
8. Pilih aswa-mongoose-tutorial untuk kembali ke instans situs web.
9. Di bawah Pengaturan, pilih Konfigurasi.
10. Pilih Tambahkan dan buat Pengaturan Aplikasi baru dengan nilai berikut:
    • Nama: AZURE_COSMOS_CONNECTION_STRING
    • Nilai: <Tempel string koneksi yang Anda salin sebelumnya>
11. PilihOK.
12. Pilih Tambahkan dan buat Pengaturan Aplikasi baru dengan nilai berikut untuk nama database:
    • Nama: AZURE_COSMOS_DATABASE_NAME
    • Nilai: todo
13. PilihOK.
14. Pilih Simpan.

4. Buka situs Anda

Anda sekarang dapat menjelajahi aplikasi web statis.

1. Di portal Azure, pilih Gambaran Umum.
2. Pilih URL yang ditampilkan di kanan atas.
   1. Ini terlihat mirip https://calm-pond-05fcdb.azurestaticapps.netdengan .
3. Pilih Silakan masuk untuk melihat daftar tugas Anda.
4. Pilih Berikan persetujuan untuk mengakses aplikasi.
5. Buat daftar baru dengan memasukkan nama ke dalam kotak teks berlabel buat daftar baru dan pilih Simpan.
6. Buat tugas baru dengan mengetik judul di kotak teks berlabel buat item baru dan pilih Simpan.
7. Konfirmasikan bahwa tugas ditampilkan (mungkin perlu waktu sebentar).
8. Tandai tugas sebagai selesai dengan memilih pemeriksaan; tugas berpindah ke bagian Item selesai dari halaman.
9. Refresh halaman untuk mengonfirmasi bahwa database sedang digunakan.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, hapus grup sumber daya dengan langkah berikut:

1. Masuk ke portal Microsoft Azure.
2. Pilih Grup sumber daya.
3. Pilih aswa-mongoose.
4. Pilih Hapus grup sumber daya.
5. Masukkan aswa-mongoose ke dalam kotak teks.
6. Pilih Hapus.

Langkah berikutnya

Lanjutkan ke artikel berikutnya untuk mempelajari cara mengonfigurasi pengembangan lokal...

Menyiapkan pengembangan lokal