Mutakhirkan ke Microsoft Edge untuk memanfaatkan fitur, pembaruan keamanan, dan dukungan teknis terkini.
Tutorial: Bangun aplikasi web Node.js menggunakan JavaScript SDK untuk mengelola akun SQL API di Azure Cosmos DB
Artikel
09/02/2022
13 menit untuk membaca
Dalam artikel ini
BERLAKU UNTUK:
SQL API
.NET
Java
Node.js
Python
Sebagai pengembang, Anda mungkin
memiliki aplikasi yang menggunakan data dokumen NoSQL. Anda dapat menggunakan akun SQL API di Azure Cosmos DB untuk menyimpan dan mengakses data dokumen ini. Tutorial Node.js ini menunjukkan kepada Anda cara menyimpan dan mengakses data dari akun SQL API di Azure Cosmos DB dengan menggunakan aplikasi Node.js Express yang dihosting di fitur Web Apps Microsoft Azure App Service. Dalam tutorial ini, Anda akan membangun aplikasi berbasis web (aplikasi Todo) yang memungkinkan Anda untuk membuat,
mengambil, dan menyelesaikan tugas. Tugas disimpan sebagai dokumen JSON di Azure Cosmos DB.
Tutorial ini menunjukkan cara membuat akun SQL API di Azure Cosmos DB dengan menggunakan portal Microsoft Azure. Tanpa kartu kredit atau langganan Azure, Anda dapat menyiapkan Coba akun Azure Cosmos DB gratis. Anda kemudian membuat dan menjalankan aplikasi web yang dibangun di Node.js SDK untuk membuat database dan
kontainer, dan menambahkan item ke kontainer. Tutorial ini menggunakan JavaScript SDK versi 3.0.
Tutorial ini mencakup tugas-tugas berikut:
Membuat akun Azure Cosmos DB
Buat aplikasi Node.js baru
Menghubungkan aplikasi MongoDB ke Azure Cosmos DB
Menjalankan dan menerapkan aplikasi ke Azure
Prasyarat
Sebelum mengikuti instruksi dalam artikel ini, pastikan Anda melakukan langkah-langkah berikut:
Jika Anda tidak memiliki langganan Azure, tanpa kartu kredit atau langganan Azure, Anda dapat menyiapkan akun Coba Azure Cosmos DB gratis.
Anda dapat mencoba Azure Cosmos DB secara gratis, tanpa langganan Azure, dan tanpa komitmen. Atau, Anda dapat membuat
akun tingkat gratis Azure Cosmos DB dengan 1000 RU/dtk dan penyimpanan 25 GB pertama secara gratis. Anda juga dapat menggunakan emulator Azure Cosmos DB dengan URI https://localhost:8081. Agar kunci dapat digunakan dengan emulator, lihat
Mengautentikasi permintaan.
Node.js versi 6.10 atau lebih tinggi.
Generator ekspres (Anda dapat menginstal Express melalui npm install express-generator -g)
Instal Git di stasiun kerja lokal Anda.
Membuat akun Azure Cosmos DB
Mari kita mulai dengan membuat akun Azure Cosmos DB. Jika Anda sudah memiliki akun atau jika Anda menggunakan Azure Cosmos DB Emulator untuk tutorial ini, Anda dapat melompat ke
Langkah 2: Membuat aplikasi Node.js baru.
Dari menu portal Microsoft Azure atau Beranda, pilih Buat sumber daya.
Pada halaman Baru, cari dan pilih Azure Cosmos DB.
Di halaman Pilih opsi API, pilih opsi
Buat di bagian Inti (SQL) - Disarankan. Azure Cosmos DB menyediakan lima API: Core (SQL) dan MongoDB untuk data dokumen, Gremlin untuk data grafik, Azure Table, dan Cassandra. Saat ini, Anda harus membuat akun terpisah untuk setiap API. Pelajari lebih lanjut tentang API SQL.
Pada halaman Buat Akun Azure Cosmos
DB, masukkan pengaturan dasar untuk akun Azure Cosmos yang baru.
Pengaturan
Nilai
Deskripsi
Langganan
Nama langganan
Pilih langganan Azure yang ingin Anda gunakan untuk akun Azure Cosmos ini.
Grup Sumber Daya
Nama grup sumber daya
Pilih grup sumber daya, atau pilih Buat baru, lalu masukkan nama unik untuk grup sumber daya baru.
Nama Akun
Nama yang unik
Masukkan nama untuk mengidentifikasi akun Azure Cosmos Anda. Karena documents.azure.com ditambahkan ke nama yang Anda berikan untuk membuat URI Anda, gunakan nama yang unik.
Nama hanya bisa berisi huruf kecil, angka, dan karakter tanda hubung (-). Panjangnya harus antara 3-44 karakter.
Lokasi
Wilayah yang paling dekat dengan pengguna Anda
Pilih lokasi geografis untuk menghosting akun Azure Cosmos DB Anda. Gunakan lokasi yang paling dekat dengan pengguna Anda untuk memberi mereka akses tercepat ke data.
Mode kapasitas
Throughput yang disediakan atau Tanpa Server
Pilih Throughput yang disediakan untuk membuat akun dalam mode throughput yang disediakan. Pilih Tanpa server untuk membuat akun dalam mode tanpa server.
Terapkan diskon tingkat gratis Azure Cosmos DB
Terapkan atau Jangan terapkan
Dengan Azure Cosmos DB tingkat gratis, Anda akan mendapatkan 1000 RU/dtk pertama dan penyimpanan 25 GB secara gratis pada akun. Pelajari lebih lanjut tentang tingkat gratis.
Catatan
Anda dapat memiliki hingga satu akun Azure Cosmos DB tingkat gratis per langganan Azure dan harus ikut serta saat membuat akun. Jika Anda tidak melihat opsi untuk menerapkan diskon tingkat gratis, ini berarti akun lain dalam langganan telah diaktifkan dengan tingkat gratis.
Pada tab Distribusi Global, konfigurasikan detail berikut. Anda dapat menggunakan nilai default untuk mulai cepat ini:
Pengaturan
Nilai
Deskripsi
Redundansi Geografis
Nonaktifkan
Aktifkan atau nonaktifkan distribusi global di akun Anda dengan memasangkan wilayah Anda dengan wilayah pasangan. Anda dapat menambahkan lebih banyak wilayah ke akun Anda nanti.
Tulisan Multiwilayah
Nonaktifkan
Kemampuan tulisan multiwilayah memungkinkan Anda untuk mengambil keuntungan dari throughput terprovisi untuk database dan kontainer Anda di seluruh dunia.
Catatan
Opsi berikut ini tidak tersedia jika Anda memilih Tanpa Server sebagai mode Kapasitas:
Terapkan Diskon Tingkat Gratis
Redundansi Geografis
Tulisan Multiwilayah
Secara opsional, Anda dapat mengonfigurasi detail selengkapnya di tab berikut:
Jaringan - Konfigurasikan
akses dari jaringan virtual.
Kebijakan Pencadangan - Konfigurasikan kebijakan pencadangan berkala atau
berkelanjutan.
Enkripsi - Gunakan kunci yang dikelola layanan atau kunci yang dikelola pelanggan.
Tag - Tag adalah pasangan nama/nilai yang
memungkinkan Anda mengategorikan sumber daya dan melihat tagihan gabungan dengan menerapkan tag yang sama ke beberapa sumber daya dan grup sumber daya.
Pilih Tinjau + buat.
Ulas pengaturan akun, lalu pilih Buat. Dibutuhkan beberapa menit untuk membuat akun. Tunggu halaman portal untuk menampilkan Penyebaran Anda selesai.
Pilih Buka sumber daya untuk masuk ke halaman akun Azure Cosmos DB.
Buka halaman akun Azure Cosmos DB, dan pilih Kunci. Salin nilai yang akan digunakan dalam aplikasi web yang Anda buat berikutnya.
Buat aplikasi Node.js baru
Sekarang mari kita belajar untuk membuat proyek dasar Halo Dunia Node.js menggunakan kerangka kerja Express.
Buka terminal favorit Anda, seperti prompt Node.js anda.
Navigasi
ke direktori tempat Anda ingin menyimpan aplikasi baru.
Gunakan generator ekspres untuk menghasilkan aplikasi baru yang disebut todo.
express todo
Buka direktori todo dan instal dependensi.
cd todo
npm install
Jalankan aplikasi baru.
npm start
Anda dapat melihat aplikasi baru Anda dengan menavigasi browser Anda ke http://localhost:3000.
Hentikan aplikasi dengan menggunakan CTRL+C di jendela terminal, dan pilih y untuk mengakhiri pekerjaan batch.
Menginstal modul yang diperlukan
Berkas package.json adalah salah
satu berkas yang dibuat di akar proyek. File ini memuat daftar modul lain yang diperlukan untuk aplikasi Node.js Anda. Saat Anda menyebarkan aplikasi ini ke Azure, file ini digunakan untuk menentukan modul mana yang harus diinstal di Azure untuk mendukung aplikasi Anda. Instal dua paket lagi untuk tutorial ini.
Pasang modul @azure/cosmos melalui npm.
npm install @azure/cosmos
Menghubungkan aplikasi MongoDB ke Azure Cosmos DB
Sekarang
setelah Anda menyelesaikan pengaturan dan konfigurasi awal, selanjutnya Anda akan menulis kode yang diperlukan oleh aplikasi todo untuk berkomunikasi dengan Azure Cosmos DB.
Membuat model
Di akar direktori proyek Anda, buat direktori baru bernama model.
Di direktori model, buat file baru bernama taskDao.js. Berkas ini memuat kode yang diperlukan untuk membuat basis data dan kontainer.
Ini juga mendefinisikan metode untuk membaca, memperbarui, membuat, dan menemukan tugas di Azure Cosmos DB.
Salin kode berikut ke dalam file taskDao.js:
// @ts-check
const CosmosClient = require('@azure/cosmos').CosmosClient
const debug = require('debug')('todo:taskDao')
// For simplicity we'll set a constant partition key
const partitionKey = undefined
class TaskDao {
/**
* Manages reading, adding, and updating Tasks in Cosmos DB
* @param {CosmosClient} cosmosClient
* @param {string} databaseId
* @param {string} containerId
*/
constructor(cosmosClient, databaseId, containerId) {
this.client = cosmosClient
this.databaseId = databaseId
this.collectionId = containerId
this.database = null
this.container = null
}
async init() {
debug('Setting up the database...')
const dbResponse = await this.client.databases.createIfNotExists({
id: this.databaseId
})
this.database = dbResponse.database
debug('Setting up the database...done!')
debug('Setting up the container...')
const coResponse = await this.database.containers.createIfNotExists({
id: this.collectionId
})
this.container = coResponse.container
debug('Setting up the container...done!')
}
async find(querySpec) {
debug('Querying for items from the database')
if (!this.container) {
throw new Error('Collection is not initialized.')
}
const { resources } = await this.container.items.query(querySpec).fetchAll()
return resources
}
async addItem(item) {
debug('Adding an item to the database')
item.date = Date.now()
item.completed = false
const { resource: doc } = await this.container.items.create(item)
return doc
}
async updateItem(itemId) {
debug('Update an item in the database')
const doc = await this.getItem(itemId)
doc.completed = true
const { resource: replaced } = await this.container
.item(itemId, partitionKey)
.replace(doc)
return replaced
}
async getItem(itemId) {
debug('Getting an item from the database')
const { resource } = await this.container.item(itemId, partitionKey).read()
return resource
}
}
module.exports = TaskDao
Simpan dan tutup file taskDao.js ini.
Buat pengontrol
Di direktori rute proyek Anda, buat file baru bernama tasklist.js.
Tambahkan kode berikut ke
tasklist.js. Kode ini memuat modul CosmosClient dan async, yang digunakan oleh tasklist.js. Kode ini juga mendefinisikan kelas TaskList, yang disahkan sebagai contoh objek TaskDao yang kami tentukan sebelumnya:
const TaskDao = require("../models/TaskDao");
class TaskList {
/**
* Handles the various APIs for displaying and managing tasks
* @param {TaskDao} taskDao
*/
constructor(taskDao) {
this.taskDao = taskDao;
}
async showTasks(req, res) {
const querySpec = {
query: "SELECT * FROM root r WHERE r.completed=@completed",
parameters: [
{
name: "@completed",
value: false
}
]
};
const items = await this.taskDao.find(querySpec);
res.render("index", {
title: "My ToDo List ",
tasks: items
});
}
async addTask(req, res) {
const item = req.body;
await this.taskDao.addItem(item);
res.redirect("/");
}
async completeTask(req, res) {
const completedTasks = Object.keys(req.body);
const tasks = [];
completedTasks.forEach(task => {
tasks.push(this.taskDao.updateItem(task));
});
await Promise.all(tasks);
res.redirect("/");
}
}
module.exports = TaskList;
Simpan dan tutup file taskDao.js ini.
Tambah config.js
Di akar direktori proyek Anda, buat file baru bernama
config.js.
Tambahkan kode berikut ke file config.js. Kode ini mendefinisikan pengaturan konfigurasi dan nilai yang diperlukan untuk aplikasi kami.
const config = {};
config.host = process.env.HOST || "[the endpoint URI of your Azure Cosmos DB account]";
config.authKey =
process.env.AUTH_KEY || "[the PRIMARY KEY value of your Azure Cosmos DB account";
config.databaseId = "ToDoList";
config.containerId = "Items";
if (config.host.includes("https://localhost:")) {
console.log("Local environment detected");
console.log("WARNING: Disabled checking of self-signed certs. Do not have this code in production.");
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
console.log(`Go to http://localhost:${process.env.PORT || '3000'} to try the sample.`);
}
module.exports = config;
Dalam file config.js, perbarui nilai HOST dan AUTH_KEY menggunakan nilai yang ditemukan di halaman Kunci akun Azure Cosmos DB Anda di portal Microsoft Azure.
Simpan dan
tutup file config.js ini.
Ubah app.js
Dalam direktori proyek, buka fileapp.js. Berkas ini dibuat sebelumnya ketika aplikasi web Express dibuat.
Tambahkan kode berikut ke file app.js berikut. Kode ini mendefinisikan file konfigurasi yang akan digunakan, dan memuat nilai ke beberapa variabel yang akan Anda gunakan di bagian berikutnya.
const CosmosClient = require('@azure/cosmos').CosmosClient
const config = require('./config')
const TaskList = require('./routes/tasklist')
const TaskDao = require('./models/taskDao')
const express = require('express')
const path = require('path')
const logger = require('morgan')
const cookieParser = require('cookie-parser')
const bodyParser = require('body-parser')
const app = express()
// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))
//Todo App:
const cosmosClient = new CosmosClient({
endpoint: config.host,
key: config.authKey
})
const taskDao = new TaskDao(cosmosClient, config.databaseId, config.containerId)
const taskList = new TaskList(taskDao)
taskDao
.init(err => {
console.error(err)
})
.catch(err => {
console.error(err)
console.error(
'Shutting down because there was an error settinig up the database.'
)
process.exit(1)
})
app.get('/', (req, res, next) => taskList.showTasks(req, res).catch(next))
app.post('/addtask', (req, res, next) => taskList.addTask(req, res).catch(next))
app.post('/completetask', (req, res, next) =>
taskList.completeTask(req, res).catch(next)
)
app.set('view engine', 'jade')
// catch 404 and forward to error handler
app.use(function(req, res, next) {
const err = new Error('Not Found')
err.status = 404
next(err)
})
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message
res.locals.error = req.app.get('env') === 'development' ? err : {}
// render the error page
res.status(err.status || 500)
res.render('error')
})
module.exports = app
Akhirnya, simpan dan tutup
file app.js.
Membangun antarmuka pengguna
Sekarang mari kita membangun antarmuka pengguna sehingga pengguna dapat berinteraksi dengan aplikasi. Aplikasi Express yang kami buat di bagian sebelumnya menggunakan Jade sebagai mesin view.
File layout.jade dalam direktori tampilan digunakan sebagai template global untuk file .jade lainnya. Dalam langkah ini Anda akan
memodifikasinya untuk menggunakan Twitter Bootstrap, yang merupakan toolkit yang digunakan untuk merancang situs web.
Buka file layout.jade yang ditemukan di folder tampilan dan ganti konten dengan kode berikut:
doctype html
html
head
title= title
link(rel='stylesheet', href='//ajax.aspnetcdn.com/ajax/bootstrap/3.3.2/css/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
nav.navbar.navbar-inverse.navbar-fixed-top
div.navbar-header
a.navbar-brand(href='#') My Tasks
block content
script(src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js')
script(src='//ajax.aspnetcdn.com/ajax/bootstrap/3.3.2/bootstrap.min.js')
Kode ini memberi tahu mesin Jade untuk merender beberapa HTML untuk aplikasi kami, dan membuat blok yang disebut konten di mana kami dapat menyediakan tata letak untuk halaman
konten kami. Simpan dan tutup file layout.jade.
Sekarang buka file index.jade, tampilan yang akan digunakan oleh aplikasi kami, dan ganti konten file dengan kode berikut:
extends layout
block content
h2 #{title}
br
form(action="/completetask", method="post")
table.table.table-striped.table-bordered
tr
td Name
td Category
td Date
td Complete
if (typeof tasks === "undefined")
tr
td
else
each task in tasks
tr
td #{task.name}
td #{task.category}
- var date = new Date(task.date);
- var day = date.getDate();
- var month = date.getMonth() + 1;
- var year = date.getFullYear();
td #{month + "/" + day + "/" + year}
td
if(task.completed)
input(type="checkbox", name="#{task.id}", value="#{!task.completed}", checked=task.completed)
else
input(type="checkbox", name="#{task.id}", value="#{!task.completed}", checked=task.completed)
button.btn.btn-primary(type="submit") Update tasks
hr
form.well(action="/addtask", method="post")
label Item Name:
input(name="name", type="textbox")
label Item Category:
input(name="category", type="textbox")
br
button.btn(type="submit") Add item
Kode ini memperluas tata letak, dan menyediakan konten untuk tempat penampung konten yang kami lihat di file layout.jade sebelumnya. Dalam tata letak ini, kami membuat dua formulir HTML.
Formulir pertama berisi tabel
untuk data Anda dan tombol yang memungkinkan Anda memperbarui item dengan memposting ke metode /completeTask pengontrol.
Formulir kedua berisi dua kolom masukan dan tombol yang memungkinkan Anda membuat item baru dengan memposting ke metode / addtask pengontrol. Hanya itu yang kita butuhkan agar aplikasinya berfungsi.
Jalankan aplikasi Anda secara lokal
Sekarang setelah Anda membangun aplikasi, Anda dapat menjalankannya
secara lokal dengan menggunakan langkah-langkah berikut:
Untuk menguji aplikasi pada mesin lokal Anda, jalankan npm start di terminal untuk memulai aplikasi Anda, lalu refresh http://localhost:3000 halaman browser. Halaman sekarang akan terlihat seperti yang diperlihatkan dalam tangkapan layar berikut:
Tip
Jika Anda menerima kesalahan tentang inden dalam file layout.jade atau file index.jade, pastikan bahwa dua baris pertama di kedua file dibenarkan kiri, tanpa spasi. Jika ada spasi sebelum dua baris pertama, hapus, simpan kedua file, lalu refresh jendela browser Anda.
Gunakan bidang Item, Nama Item, dan Kategori untuk memasukkan tugas baru, lalu pilih Tambahkan Item. Ini membuat dokumen di
Azure Cosmos DB dengan properti tersebut.
Halaman harus diperbarui untuk menampilkan item yang baru dibuat di daftar ToDo.
Untuk menyelesaikan tugas, pilih kotak centang di kolom Selesai, lalu pilih Perbarui
tugas. Ini memperbarui dokumen yang sudah Anda buat dan menghapusnya dari tampilan.
Hentikan aplikasi dengan menggunakan CTRL+C di jendela terminal, dan pilih y untuk mengakhiri pekerjaan batch.
Menyebarkan aplikasi Anda ke App Service
Setelah aplikasi berhasil disebarkan secara lokal, Anda bisa menyebarkannya ke Azure App Service. Di terminal, pastikan bahwa Anda berada di direktori aplikasi todo. Sebarkan
kode di folder lokal Anda (todo) dengan menggunakan perintah az webapp up berikut:
az webapp up --sku F1 --name
Ganti dengan nama yang unik di seluruh Azure (karakter yang valid adalah a-z, 0-9, dan -). Pola yang baik adalah menggunakan kombinasi nama perusahaan Anda dan pengidentifikasi aplikasi. Untuk mempelajari penyebaran aplikasi lebih lanjut, lihat Artikel penyebaran aplikasi Node.js di Azure.
Perintah ini mungkin perlu waktu beberapa menit untuk diselesaikan. Saat berjalan, perintah ini memberikan pesan tentang membuat grup sumber daya, paket App Service dan aplikasi hosting, mengonfigurasi pengelogan, lalu melakukan penyebaran ZIP. Perintah ini kemudian memberi
Anda URL untuk meluncurkan aplikasi pada http://.azurewebsites.net yang merupakan URL aplikasi di Azure.
Membersihkan sumber daya
Saat sumber daya tidak lagi diperlukan, Anda dapat menghapus grup sumber daya, akun Azure Cosmos DB, dan semua sumber daya terkait. Untuk melakukannya, pilih grup sumber daya yang Anda gunakan untuk akun Microsoft Azure Cosmos DB, pilih Hapus, lalu konfirmasi nama grup sumber daya yang akan dihapus.
Langkah
berikutnya
Mencoba melakukan perencanaan kapasitas untuk migrasi ke Azure Cosmos DB? Anda dapat menggunakan informasi tentang kluster database Anda yang ada saat ini untuk perencanaan kapasitas.
Jika Anda hanya mengetahui jumlah vcore dan server di kluster database yang ada, baca tentang memperkirakan unit permintaan menggunakan vCore atau
vCPU
Jika Anda mengetahui rasio permintaan umum untuk beban kerja database Anda saat ini, baca memperkirakan unit permintaan menggunakan perencana kapasitas Azure Cosmos DB
