Tutorial: Menyambungkan aplikasi web Node.js dengan Azure DocumentDB

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

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

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan sumber daya berikut:

• Langganan Azure

  • Jika Anda tidak memiliki langganan Azure, buat akun gratis

• Kluster Azure DocumentDB yang sudah ada

  • Jika Anda tidak memiliki kluster, buat kluster baru

• Akun GitHub dengan hak GitHub Codespaces

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 dua instans inti.

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

   

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

   Cuplikan layar dari layar konfirmasi sebelum membuat codespace baru.

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

4. Buka terminal baru di codespace.

   Petunjuk / Saran

   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
   

   Nota

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

   Tool	Versi
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure CLI (antarmuka baris perintah Azure)	≥ 2.46.0

6. Tutup terminal.

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

Visual Studio Code

Ekstensi Dev Containers 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 / Saran

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

   Cuplikan layar opsi menu untuk membuka 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 Kontainer Dev, lalu pilih Kontainer Dev: Buka Kembali di Kontainer.

   

   Petunjuk / Saran

   Visual Studio Code mungkin secara otomatis meminta Anda untuk membuka kembali folder yang ada dalam kontainer pengembangan. Langkah 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
   

   Nota

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

   Tool	Versi
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure CLI (antarmuka baris perintah Azure)	≥ 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. Pengoperasian pengujian 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
     },
     ...
   ]
   

   Nota

   Pengidentifikasi objek (_id) dihasilkan secara acak dan 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 DocumentDB. 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. Pasang 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 DocumentDB

Sekarang, mari kita validasi bahwa aplikasi bekerja dengan mulus dengan Azure DocumentDB. 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. Navigasikan ke halaman kluster Azure DocumentDB yang sudah ada.

3. Dari halaman kluster Azure DocumentDB, pilih opsi menu navigasi String koneksi .

   

4. Catat nilai dari bidang String koneksi.

   

   Penting

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

5. Buka terminal baru dalam lingkungan pengembangan terintegrasi (IDE) Anda.

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

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

   Nota

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

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

7. Di dalam shell, jalankan perintah berikut untuk membuat database Anda, membuat koleksi data Anda, dan menyisipkan data awal.

   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 hasil yang telah dipangkas.

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

   Nota

   Pengidentifikasi objek (_id) dihasilkan secara acak dan 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 koneksi ke kluster Azure DocumentDB. Gunakan string koneksi yang sama dengan yang Anda gunakan dengan shell mongo.

    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 sebuah array dokumen produk.

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

Menyebarkan aplikasi MERN ke Azure App Service

Buktikan bahwa aplikasi berfungsi secara end-to-end dengan menyebarkan layanan dan klien ke Azure App Service. 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 az login --use-device-code perintah .

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.

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

   Petunjuk / Saran

   Terkadang penyebaran bisa selesai 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 / Saran

    Terkadang pengembangan 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 milik Anda sendiri, di akhir proyek, sebaiknya hapus sumber daya yang tidak lagi Anda butuhkan. Sumber daya yang dibiarkan tetap aktif dapat merugikan Anda secara finansial. Anda dapat menghapus sumber daya satu per satu atau menghapus grup sumber daya untuk menghapus seluruh kumpulan 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 jumlah pemberian izin per jam inti gratis yang Anda dapatkan untuk akun Anda.

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

2. Temukan kontainer pengembangan yang sedang berjalan yang bersumber dari azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app repositori GitHub.

   

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

   Cuplikan layar menu konteks untuk satu codespace dengan opsi hapus yang disorot.

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 Dev Containers, lalu pilih Dev Containers: Buka Kembali Folder Secara Lokal.

   

Petunjuk / Saran

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

Langkah selanjutnya

Memigrasikan data Anda