Tutorial: Menyambungkan aplikasi web Node.js dengan Azure Cosmos DB for MongoDB (vCore)

BERLAKU UNTUK: MongoDB vCore

Dalam tutorial ini, Anda membangun aplikasi web Node.js yang terhubung ke Azure Cosmos DB untuk MongoDB dalam arsitektur vCore. Tumpukan MongoDB, Express, React.js, Node.js (MERN) adalah kumpulan teknologi populer yang digunakan untuk membangun banyak aplikasi web modern. Dengan Azure Cosmos DB for MongoDB (vCore), Anda dapat membangun aplikasi web baru atau memigrasikan aplikasi yang ada menggunakan driver MongoDB yang sudah Anda kenal. Di tutorial ini, Anda akan:

• Menyiapkan lingkungan Anda
• Menguji aplikasi MERN dengan kontainer MongoDB lokal
• Menguji aplikasi MERN dengan kluster vCore
• Menyebarkan aplikasi MERN ke Azure App Service

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan sumber daya berikut:

• Kluster vCore yang ada.
• Akun GitHub.
  • GitHub dilengkapi dengan jam Codespace gratis untuk semua pengguna.

Mengonfigurasi lingkungan pengembangan

Lingkungan kontainer pengembangan tersedia dengan semua dependensi yang diperlukan untuk menyelesaikan setiap latihan dalam proyek ini. Anda dapat menjalankan kontainer pengembangan di GitHub Codespaces atau secara lokal menggunakan Visual Studio Code.

GitHub Codespaces

GitHub Codespaces menjalankan kontainer pengembangan yang dikelola oleh GitHub dengan Visual Studio Code untuk Web sebagai antarmuka pengguna. Untuk lingkungan pengembangan yang paling mudah, gunakan GitHub Codespaces sehingga Anda memiliki alat dan dependensi pengembang yang benar yang telah diinstal sebelumnya untuk menyelesaikan modul pelatihan ini.

Penting

Semua akun GitHub dapat menggunakan Codespace hingga 60 jam gratis setiap bulan dengan 2 instans inti.

1. Mulai proses untuk membuat GitHub Codespace baru di main cabang azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app repositori GitHub.

   

2. Pada halaman Buat codespace , tinjau pengaturan konfigurasi codespace, lalu pilih Buat codespace baru

   

3. Tunggu hingga codespace dimulai. Proses startup ini dapat memakan waktu beberapa menit.

4. Buka terminal baru di codespace.

   Tips

   Anda dapat menggunakan menu utama untuk menavigasi ke opsi menu Terminal lalu pilih opsi Terminal Baru.

   

5. Periksa versi alat yang Anda gunakan dalam tutorial ini.

   docker --version
   
   node --version
   
   npm --version
   
   az --version
   

   Catatan

   Tutorial ini memerlukan versi berikut dari setiap alat yang telah diinstal sebelumnya di lingkungan Anda:

   Alat	Versi
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

6. Tutup terminal.

7. Langkah-langkah yang tersisa dalam tutorial ini berlangsung dalam konteks kontainer pengembangan ini.

Visual Studio Code

Ekstensi Kontainer Dev untuk Visual Studio Code mengharuskan Docker diinstal pada komputer lokal Anda. Ekstensi menghosting kontainer pengembangan secara lokal menggunakan host Docker dengan alat pengembang dan dependensi yang benar yang telah diinstal sebelumnya untuk menyelesaikan modul pelatihan ini.

1. Buka Visual Studio Code dalam konteks direktori kosong.

2. Pastikan Anda memiliki ekstensi Kontainer Dev yang terinstal di Visual Studio Code.

3. Buka terminal baru di editor.

   Petunjuk

   Anda dapat menggunakan menu utama untuk menavigasi ke opsi menu Terminal lalu pilih opsi Terminal Baru.

   

4. azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app Kloning repositori GitHub ke direktori saat ini.

   git clone https://github.com/azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app.git .
   

5. Buka Palet Perintah, cari perintah Dev Containers, lalu pilih Dev Containers: Buka Kembali di Kontainer.

   

   Kiat

   Visual Studio Code dapat secara otomatis meminta Anda untuk membuka kembali folder yang ada dalam kontainer pengembangan. Ini secara fungsional setara dengan menggunakan palet perintah untuk membuka kembali ruang kerja saat ini dalam kontainer.

   

6. Periksa versi alat yang Anda gunakan dalam tutorial ini.

   docker --version
   
   node --version
   
   npm --version
   
   az --version
   

   Catatan

   Tutorial ini memerlukan versi berikut dari setiap alat yang telah diinstal sebelumnya di lingkungan Anda:

   Perangkat	Versi
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

7. Tutup terminal.

8. Langkah-langkah yang tersisa dalam tutorial ini berlangsung dalam konteks kontainer pengembangan ini.

Menguji API aplikasi MERN dengan kontainer MongoDB

Mulailah dengan menjalankan API aplikasi sampel dengan kontainer MongoDB lokal untuk memvalidasi bahwa aplikasi berfungsi.

1. Jalankan kontainer MongoDB menggunakan Docker dan terbitkan port MongoDB umum (27017).

   docker pull mongo:6.0
   
   docker run --detach --publish 27017:27017 mongo:6.0
   

2. Di bilah samping, pilih ekstensi MongoDB.

   

3. Tambahkan koneksi baru ke ekstensi MongoDB menggunakan string koneksi mongodb://localhost.

   

4. Setelah koneksi berhasil, buka file playground data/products.mongodb .

5. Pilih ikon Jalankan semua untuk menjalankan skrip.

   

6. Pelaksanaan ruang uji coba harus menghasilkan daftar dokumen dalam koleksi MongoDB lokal. Berikut adalah contoh output yang dipotong.

   [
     {
       "_id": { "$oid": "640a146e89286b79b6628eef" },
       "name": "Confira Watch",
       "category": "watches",
       "price": 105
     },
     {
       "_id": { "$oid": "640a146e89286b79b6628ef0" },
       "name": "Diannis Watch",
       "category": "watches",
       "price": 98,
       "sale": true
     },
     ...
   ]
   

   Catatan

   Id objek (_id) dihasilkan secara acak dan akan berbeda dari output contoh terpotong ini.

7. Di server/direktori, buat file .env baru.

8. Dalam file server/.env, tambahkan variabel lingkungan untuk nilai ini:

   Variabel lingkungan	Nilai
   CONNECTION_STRING	String koneksi ke kluster Azure Cosmos DB untuk MongoDB (vCore). Untuk saat ini, gunakan mongodb://localhost:27017?directConnection=true.

   CONNECTION_STRING=mongodb://localhost:27017?directConnection=true
   

9. Ubah konteks terminal ke server/ folder.

   cd server
   

10. Instal dependensi dari Node Package Manager (npm).

    npm install
    

11. Mulai aplikasi Node.js & Express.

    npm start
    

12. API secara otomatis membuka jendela browser untuk memverifikasi bahwa API mengembalikan array dokumen produk.

13. Tutup tab/jendela browser tambahan.

14. Tutup terminal.

Menguji aplikasi MERN dengan kluster Azure Cosmos DB for MongoDB (vCore)

Sekarang, mari kita validasi bahwa aplikasi bekerja dengan mulus dengan Azure Cosmos DB untuk MongoDB (vCore). Untuk tugas ini, isi kluster yang sudah ada sebelumnya dengan data benih menggunakan shell MongoDB lalu perbarui string koneksi API.

1. Masuk ke portal Azure (https://portal.azure.com).

2. Navigasi ke halaman kluster Azure Cosmos DB for MongoDB (vCore) yang ada.

3. Dari halaman kluster Azure Cosmos DB for MongoDB (vCore), pilih opsi menu navigasi String koneksi.

   

4. Rekam nilai dari bidang string koneksi.

   

   Penting

   string koneksi di portal tidak menyertakan nilai nama pengguna dan kata sandi. Anda harus mengganti placeholder <user> dan <password> dengan kredensial yang Anda gunakan saat Anda awalnya membuat kluster.

5. Kembali ke dalam lingkungan pengembangan terintegrasi (IDE), buka terminal baru.

6. Mulai MongoDB Shell menggunakan mongosh perintah dan string koneksi yang Anda rekam sebelumnya. Pastikan Anda mengganti <user> tempat penampung dan <password> dengan kredensial yang Anda gunakan saat awalnya membuat kluster.

   mongosh "<mongodb-cluster-connection-string>"
   

   Catatan

   Anda mungkin perlu mengodekan nilai tertentu untuk string koneksi. Dalam contoh ini, nama kluster adalah msdocs-cosmos-tutorial, nama penggunanya adalah clusteradmin, dan kata sandinya adalah P@ssw.rd. Dalam kata sandi @ , karakter harus dikodekan menggunakan %40. Contoh string koneksi disediakan di sini dengan pengodean kata sandi yang benar.

   CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-cosmos-tutorial.mongocluster.cosmos.azure.com/?tls=true&authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000
   

7. Dalam shell, jalankan perintah berikut untuk membuat database Anda, membuat koleksi Anda, dan seed dengan data pemula.

   use('cosmicworks');
   
   db.products.drop();
   
   db.products.insertMany([
     { name: "Confira Watch", category: "watches", price: 105.00 },
     { name: "Diannis Watch", category: "watches", price: 98.00, sale: true },
     { name: "Sterse Gloves", category: "gloves", price: 42.00 },
     { name: "Peache Sunglasses", category: "eyewear", price: 32.00, sale: false, sizes: [ "S", "M", "L" ] },
     { name: "Icento Pack", category: "bags", price: 58.00 },
     { name: "Iroowl Bracelet", category: "watches", price: 66.00 },
     { name: "Glaark Bag", category: "bags", price: 56.00, sale: true },
     { name: "Windry Mittens", category: "gloves", price: 35.00 },
     { name: "Tuvila Hat", category: "hats", price: 120.00 },
     { name: "Klinto Hat", category: "hats", subcategory: "hats-beanies", price: 65.00 }
   ]);
   
   db.products.find({});
   

8. Perintah harus menghasilkan daftar dokumen dalam koleksi MongoDB lokal. Berikut adalah contoh output yang dipotong.

   [
     {
       "_id": { "$oid": "640a146e89286b79b6628eef" },
       "name": "Confira Watch",
       "category": "watches",
       "price": 105
     },
     {
       "_id": { "$oid": "640a146e89286b79b6628ef0" },
       "name": "Diannis Watch",
       "category": "watches",
       "price": 98,
       "sale": true
     },
     ...
   ]
   

   Catatan

   Id objek (_id) dihasilkan secara acak dan akan berbeda dari output contoh terpotong ini.

9. Keluar dari shell MongoDB.

   exit
   

10. Di direktori klien/, buat file .env baru.

11. Dalam file client/.env, tambahkan variabel lingkungan untuk nilai ini:

    Variabel lingkungan	Nilai
    CONNECTION_STRING	string sambungan ke Kluster Azure Cosmos DB for MongoDB (vCore). Gunakan string koneksi yang sama yang Anda gunakan dengan mongo shell.

    CONNECTION_STRING=<your-connection-string>
    

12. Validasi bahwa aplikasi menggunakan layanan database dengan mengubah konteks terminal ke server/ folder, menginstal dependensi dari Node Package Manager (npm), lalu memulai aplikasi.

    cd server
    
    npm install
    
    npm start
    

13. API secara otomatis membuka jendela browser untuk memverifikasi bahwa itu mengembalikan array dokumen produk.

14. Tutup tab/jendela browser tambahan. Kemudian, tutup terminal.

Menyebarkan aplikasi MERN ke Azure App Service

Sebarkan layanan dan klien ke Azure App Service untuk membuktikan bahwa aplikasi berfungsi secara end-to-end. Gunakan rahasia di aplikasi web untuk menyimpan variabel lingkungan dengan kredensial dan titik akhir API.

1. Dalam lingkungan pengembangan terintegrasi (IDE) Anda, buka terminal baru.

2. Buat variabel shell untuk nama grup sumber daya yang sudah ada sebelumnya bernama resourceGroupName.

   # Variable for resource group name
   resourceGroupName="<existing-resource-group>"
   

3. Buat variabel shell untuk dua aplikasi web bernama serverAppName dan clientAppName.

   # Variable for randomnly generated suffix
   let suffix=$RANDOM*$RANDOM
   
   # Variable for web app names with a randomnly generated suffix
   serverAppName="server-app-$suffix"
   clientAppName="client-app-$suffix"
   

4. Jika Anda belum melakukannya, masuk ke Azure CLI menggunakan perintah az login --use-device-code.

5. Ubah direktori kerja saat ini ke jalur server/.

   cd server
   

6. Buat aplikasi web baru untuk komponen server aplikasi MERN dengan az webapp up.

   az webapp up \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --sku F1 \
       --runtime "NODE|18-lts"
   

7. Buat pengaturan string koneksi baru untuk aplikasi web server bernama CONNECTION_STRING dengan az webapp config connection-string set. Gunakan nilai yang sama untuk string koneksi yang Anda gunakan dengan shell MongoDB dan file .env sebelumnya dalam tutorial ini.

   az webapp config connection-string set \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --connection-string-type custom \
       --settings "CONNECTION_STRING=<mongodb-connection-string>"
   

8. Dapatkan URI untuk aplikasi web server dengan az webapp show dan simpan dalam nama variabel shell d serverUri.

   serverUri=$(az webapp show \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --query hostNames[0] \
       --output tsv)
   

9. open-cli Gunakan paket dan perintah dari NuGet dengan npx untuk membuka jendela browser menggunakan URI untuk aplikasi web server. Validasi bahwa aplikasi server mengembalikan data array JSON Anda dari kluster MongoDB (vCore).

   npx open-cli "https://$serverUri/products" --yes
   

   Petunjuk

   Terkadang penyebaran dapat diselesaikan secara asinkron. Jika Anda tidak melihat apa yang Anda harapkan, tunggu sebentar lagi dan refresh jendela browser Anda.

10. Ubah direktori kerja ke klien/ jalur.

    cd ../client
    

11. Buat aplikasi web baru untuk komponen klien aplikasi MERN dengan az webapp up.

    az webapp up \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --sku F1 \
        --runtime "NODE|18-lts"
    

12. Buat pengaturan aplikasi baru untuk aplikasi web klien bernama REACT_APP_API_ENDPOINT dengan az webapp config appsettings set. Gunakan titik akhir API server yang disimpan dalam variabel shell serverUri .

    az webapp config appsettings set \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --settings "REACT_APP_API_ENDPOINT=https://$serverUri"
    

13. Dapatkan URI untuk aplikasi web klien dengan az webapp show dan simpan dalam nama variabel shell d clientUri.

    clientUri=$(az webapp show \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --query hostNames[0] \
        --output tsv)
    

14. open-cli Gunakan paket dan perintah dari NuGet dengan npx untuk membuka jendela browser menggunakan URI untuk aplikasi web klien. Validasi bahwa aplikasi klien merender data dari API aplikasi server.

    npx open-cli "https://$clientUri" --yes
    

    Petunjuk

    Terkadang proses pengerjaan bisa selesai secara asinkron. Jika Anda tidak melihat apa yang Anda harapkan, tunggu sebentar lagi dan refresh jendela browser Anda.

15. Tutup terminal.

Membersihkan sumber daya

Saat Anda bekerja di langganan Anda sendiri, di akhir proyek, sebaiknya hapus sumber daya yang tidak lagi Anda butuhkan. Sumber daya yang dibiarkan berjalan dapat menghabiskan uang Anda. Anda dapat menghapus sumber daya satu per satu atau menghapus grup sumber daya untuk menghapus seluruh rangkaian sumber daya.

1. Untuk menghapus seluruh grup sumber daya, gunakan az group delete.

   az group delete \
       --name $resourceGroupName \
       --yes
   

2. Validasi bahwa grup sumber daya dihapus menggunakan az group list.

   az group list
   

Membersihkan lingkungan pengembangan

Anda mungkin juga ingin membersihkan lingkungan pengembangan Anda atau mengembalikannya ke keadaan khasnya.

GitHub Codespaces

Menghapus lingkungan GitHub Codespaces memastikan bahwa Anda dapat memaksimalkan kuota jam inti gratis yang Anda dapatkan untuk akun Anda.

1. Masuk ke dasbor GitHub Codespaces (https://github.com/codespaces).

2. Temukan codespaces yang saat ini sedang berjalan dan bersumber dari repositori GitHub azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app.

   

3. Buka menu konteks untuk codespace, lalu pilih Hapus.

   

Visual Studio Code

Anda tidak perlu membersihkan lingkungan lokal, tetapi Anda dapat menghentikan kontainer pengembangan yang sedang berjalan dan kembali menjalankan Visual Studio Code dalam konteks ruang kerja lokal.

1. Buka Palet Perintah, cari perintah Kontainer Dev, lalu pilih Kontainer Dev: Buka Kembali Folder Secara Lokal.

   

Tips

Visual Studio Code akan menghentikan kontainer pengembangan yang sedang berjalan, tetapi kontainer masih ada di Docker dalam status berhenti. Anda selalu memiliki opsi untuk menghapus instans kontainer, gambar kontainer, dan volume dari Docker untuk mengosongkan lebih banyak ruang di komputer lokal Anda.

Langkah selanjutnya

Sekarang setelah Anda membangun aplikasi pertama Anda untuk kluster MongoDB (vCore), pelajari cara memigrasikan data Anda ke Azure Cosmos DB.

Melakukan migrasi data Anda