Kurz: Vytvoření Node.js webové aplikace pomocí sady JavaScript SDK pro správu účtu rozhraní API pro NoSQL ve službě Azure Cosmos DB

  • Článek

PLATÍ PRO: NoSQL

Jako vývojář můžete mít aplikace, které používají data dokumentů NoSQL. K ukládání a přístupu k datům tohoto dokumentu můžete použít účet ROZHRANÍ API pro NoSQL ve službě Azure Cosmos DB. V tomto Node.js kurzu se dozvíte, jak ukládat data a přistupovat k datům z účtu rozhraní API pro NoSQL ve službě Azure Cosmos DB. V tomto kurzu se používá aplikace Node.js Express hostovaná ve funkci Web Apps Microsoft Azure App Service. V tomto kurzu vytvoříte webovou aplikaci (aplikaci Úkolů), která vám umožní vytvářet, načítat a dokončovat úkoly. Úkoly se ve službě Azure Cosmos DB ukládají jako dokumenty JSON.

Tento kurz ukazuje, jak vytvořit účet rozhraní API pro NoSQL ve službě Azure Cosmos DB pomocí Azure Portal. Bez platební karty nebo předplatného Azure můžete:

  • Nastavte si bezplatný účet Vyzkoušet službu Azure Cosmos DB.
  • Sestavte a spusťte webovou aplikaci, která je založená na sadě Node.js SDK, a vytvořte databázi a kontejner.
  • Přidejte položky do kontejneru.

Tento kurz používá sadu JavaScript SDK verze 3.0 a zabývá se následujícími úlohami:

  • Vytvoření účtu služby Azure Cosmos DB
  • Vytvoření nové aplikace Node.js
  • Připojení aplikace ke službě Azure Cosmos DB
  • Spuštění a nasazení aplikace v Azure

Požadavky

Než budete postupovat podle pokynů v tomto článku, ujistěte se, že máte následující prostředky:

Vytvoření účtu služby Azure Cosmos DB

Začněte vytvořením účtu služby Azure Cosmos DB. Pokud už účet máte nebo pokud pro účely tohoto kurzu používáte emulátor služby Azure Cosmos DB, můžete přeskočit k části Vytvoření nové Node.js aplikace.

  1. V nabídce Azure Portal nebo na domovské stránce vyberte Vytvořit prostředek.

  2. Vyhledejte Azure Cosmos DB. Vyberte Vytvořit>Azure Cosmos DB.

  3. Na stránce Vytvořit účet služby Azure Cosmos DB vyberte možnost Vytvořit v části Azure Cosmos DB for NoSQL .

    Azure Cosmos DB poskytuje několik rozhraní API:

    • NoSQL pro data dokumentů
    • PostgreSQL
    • MongoDB – pro data dokumentů
    • Apache Cassandra
    • Tabulka
    • Apache Gremlin pro data grafu

    Další informace o rozhraní API pro NoSQL najdete v tématu Vítá vás Azure Cosmos DB.

  4. Na stránce Vytvořit účet služby Azure Cosmos DB zadejte základní nastavení nového účtu služby Azure Cosmos DB.

    Nastavení Hodnota Popis
    Předplatné Název předplatného Vyberte předplatné Azure, které chcete pro tento účet služby Azure Cosmos DB použít.
    Skupina prostředků Název skupiny prostředků Vyberte skupinu prostředků nebo vyberte Vytvořit novou a pak zadejte jedinečný název nové skupiny prostředků.
    Account Name Jedinečný název Zadejte název pro identifikaci účtu služby Azure Cosmos DB. Vzhledem k tomu , že documents.azure.com je připojen k názvu, který zadáte k vytvoření identifikátoru URI, použijte jedinečný název. Název může obsahovat pouze malá písmena, číslice a znak spojovníku (-). Musí mít 3 až 44 znaků.
    Umístění Oblast nejbližší vašim uživatelům Vyberte zeměpisné umístění, ve kterém chcete účet služby Azure Cosmos DB hostovat. Použijte umístění, které je nejblíže vašim uživatelům, abyste jim poskytli nejrychlejší přístup k datům.
    Režim kapacity Zřízená propustnost nebo bezserverová Vyberte Zřízená propustnost a vytvořte účet v režimu zřízené propustnosti . Výběrem možnosti Bezserverový vytvořte účet v bezserverovém režimu.
    Uplatnění slevy na úrovni Free služby Azure Cosmos DB Použít nebo Neaplikovat S úrovní Free služby Azure Cosmos DB získáte v účtu zdarma prvních 1 000 RU/s a 25 GB úložiště. Přečtěte si další informace o úrovni Free.
    Omezení celkové propustnosti účtu Vybráno nebo ne Omezte celkovou propustnost, kterou je možné pro tento účet zřídit. Tento limit zabraňuje neočekávaným poplatkům souvisejícím se zřízenou propustností. Po vytvoření účtu můžete tento limit aktualizovat nebo odebrat.

    Pro každé předplatné Azure můžete mít až jeden účet služby Azure Cosmos DB úrovně Free a při vytváření účtu musíte vyjádřit výslovný souhlas. Pokud možnost uplatnění slevy na úrovni Free nevidíte, už má jiný účet v předplatném povolenou úroveň Free.

    Snímek obrazovky se stránkou Vytvoření účtu služby Azure Cosmos DB

    Poznámka

    Následující možnosti nejsou k dispozici, pokud jako režim kapacity vyberete bezserverový režim:

    • Použít slevu založenou na bezplatné úrovni
    • Omezení celkové propustnosti účtu

  5. Na kartě Globální distribuce nakonfigurujte následující podrobnosti. Pro tento rychlý start můžete ponechat výchozí hodnoty:

    Nastavení Hodnota Popis
    Geografická redundance Zakázat Povolte nebo zakažte globální distribuci ve svém účtu spárováním oblasti s párovací oblastí. Později můžete ke svému účtu přidat další oblasti.
    Zápisy do více oblastí Zakázat Funkce zápisu do více oblastí umožňuje využívat zřízenou propustnost pro vaše databáze a kontejnery po celém světě.
    Zóny dostupnosti Zakázat Zóny dostupnosti vám pomůžou dále zlepšit dostupnost a odolnost vaší aplikace.

    Poznámka

    Následující možnosti nejsou k dispozici, pokud na předchozí stránce Základy jako režim kapacity vyberete bezserverový režim:

    • Geografická redundance
    • Zápisy do více oblastí

  6. Volitelně můžete nakonfigurovat další podrobnosti na následujících kartách:

    • Sítě. Nakonfigurujte přístup z virtuální sítě.
    • Zásady zálohování. Nakonfigurujte zásady pravidelného nebo průběžného zálohování.
    • Šifrování. Použijte buď klíč spravovaný službou, nebo klíč spravovaný zákazníkem.
    • Značky. Značky jsou páry název/hodnota, které umožňují kategorizovat prostředky a zobrazit konsolidovanou fakturaci použitím stejné značky na více prostředků a skupin prostředků.

  7. Vyberte Zkontrolovat a vytvořit.

  8. Zkontrolujte nastavení účtu a pak vyberte Vytvořit. Vytvoření účtu trvá několik minut. Počkejte, až se na stránce portálu zobrazí Vaše nasazení je dokončené.

    Snímek obrazovky ukazuje, že vaše nasazení je dokončené.

  9. Výběrem možnosti Přejít k prostředku přejděte na stránku účtu služby Azure Cosmos DB.

    Snímek obrazovky se stránkou účtu služby Azure Cosmos DB

Přejděte na stránku účtu služby Azure Cosmos DB a vyberte Klíče. Zkopírujte hodnoty, které chcete použít ve webové aplikaci, kterou vytvoříte jako další.

Snímek obrazovky Azure Portal se zvýrazněným tlačítkem Klíče na stránce účtu služby Azure Cosmos DB

Vytvoření nové aplikace Node.js

Teď se dozvíte, jak vytvořit základní projekt Hello World Node.js pomocí rozhraní Express.

  1. Otevřete svůj oblíbený terminál, jako je třeba příkazový řádek Node.js.

  2. Přejděte do adresáře, do kterého chcete novou aplikaci uložit.

  3. Pomocí generátoru Express vygenerujte novou aplikaci s názvem todo.

    express todo

  4. Otevřete adresář todo a nainstalujte závislosti.

    cd todo
npm install

  5. Spusťte novou aplikaci.

    npm start

  6. Pokud chcete novou aplikaci zobrazit v prohlížeči, přejděte na http://localhost:3000.

    Snímek obrazovky aplikace Hello World v okně prohlížeče

    Zastavte aplikaci pomocí kombinace kláves CTRL+C v okně terminálu a výběrem y ukončete dávkovou úlohu.

Instalace požadovaných modulů

Soubor package.json je jedním ze souborů vytvořených v kořenu projektu. Tento soubor obsahuje seznam dalších modulů, které jsou vyžadovány pro vaši aplikaci Node.js. Až budete tuto aplikaci nasazovat v Azure, tento soubor se použije k vyhodnocení, které moduly se musí v Azure pro podporu vaší aplikace nainstalovat. Pro účely tohoto kurzu nainstalujte další dva balíčky.

  1. Nainstalujte modul @azure/cosmos přes npm.

    npm install @azure/cosmos

Připojení aplikace Node.js ke službě Azure Cosmos DB

Po dokončení počátečního nastavení a konfigurace se dozvíte, jak napsat kód, který aplikace seznamu úkolů vyžaduje ke komunikaci se službou Azure Cosmos DB.

Vytvoření modelu

  1. V kořenovém adresáři projektu vytvořte nový adresář s názvem models.

  2. V adresáři models vytvořte nový soubor s názvem taskDao.js. Tento soubor obsahuje kód potřebný k vytvoření databáze a kontejneru. Definuje také metody čtení, aktualizace, vytváření a hledání úloh ve službě Azure Cosmos DB.

  3. Do souborutaskDao.js zkopírujte následující kód:

     // @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 Azure 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

  4. Uložte a zavřete soubor taskDao.js.

Vytvoření kontroleru

  1. V adresáři routes projektu vytvořte nový soubor s názvem tasklist.js.

  2. Do souboru tasklist.js přidejte následující kód: Tento kód načte moduly CosmosClient a async, které se používají v souboru tasklist.js. Tento kód také definuje třídu TaskList, která se předává jako instance objektu TaskDao, který jsme definovali dříve:

     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;

  3. Uložte a zavřete soubor tasklist.js.

Přidání souboru config.js

  1. V kořenovém adresáři projektu vytvořte nový soubor config.js.

  2. Do souboru config.js přidejte následující kód. Tento kód definuje nastavení konfigurace a hodnoty, které aplikace potřebuje.

    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;

  3. V souboruconfig.js aktualizujte hodnoty HOST a AUTH_KEY pomocí hodnot na stránce Klíče vašeho účtu služby Azure Cosmos DB na Azure Portal.

  4. Uložte a zavřete soubor config.js.

Úprava souboru app.js

  1. V adresáři projektu otevřete soubor app.js. Tento soubor byl vytvořen již dříve, při vytváření webové aplikace Express.

  2. Do souboru app.js přidejte následující kód. Tento kód definuje konfigurační soubor, který se má použít, a načte hodnoty do některých proměnných, které použijete v dalších částech.

     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

  3. Nakonec soubor app.js uložte a zavřete.

Vytvoření uživatelského rozhraní

Teď sestavte uživatelské rozhraní, aby uživatel mohl s aplikací pracovat. Aplikace Express, kterou jste vytvořili v předchozích částech, používá jade jako modul zobrazení.

  1. Soubor layout.jade v adresáři views slouží jako globální šablona pro ostatní soubory .jade. V tomto kroku ho upravíte tak, aby používal Twitter Bootstrap, což je sada nástrojů sloužící k návrhu webu.

  2. Otevřete soubor layout.jade umístěný ve složce views a nahraďte jeho obsah následujícím kódem:

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

    Tento kód řekne modulu Jade , aby vykresloval určité kódy HTML pro aplikaci, a vytvoří blok s názvem content , kde můžete zadat rozložení pro stránky obsahu. Uložte a zavřete soubor layout.jade.

  3. Otevřete soubor index.jade , zobrazení používané aplikací. Obsah souboru nahraďte následujícím kódem:

    extends layout
block content
     h1 #{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

Tento kód rozšiřuje rozložení a poskytuje obsah pro zástupný symbol obsahu , který jste viděli v souboru layout.jade . V takovém rozložení jste vytvořili dva formuláře HTML.

První formulář obsahuje tabulku pro vaše data a tlačítko, které umožňuje aktualizovat položky odesláním do metody /completeTask kontroleru.

Druhý formulář obsahuje dvě vstupní pole a tlačítko, které umožňuje vytvořit novou položku odesláním do metody kontroleru /addtask , což je vše, co potřebujete, aby aplikace fungovala.

Místní spuštění aplikace

Po vytvoření aplikace ji můžete spustit místně pomocí následujících kroků:

  1. Pokud chcete otestovat aplikaci na místním počítači, spusťte aplikaci spuštěním npm start příkazu v terminálu a aktualizujte http://localhost:3000 stránku. Stránka by teď měla vypadat jako na následujícím snímku obrazovky:

    Snímek obrazovky aplikace Seznam úkolů v prohlížeči

    Tip

    Pokud se zobrazí chyba týkající se odsazení v souboru layout.jade nebo index.jade , ujistěte se, že první dva řádky v obou souborech jsou zasaděné doleva a bez mezer. Pokud jsou před prvními dvěma řádky mezery, odeberte je, uložte oba soubory a pak aktualizujte okno prohlížeče.

  2. Pomocí polí Název položky a Kategorie položky zadejte nový úkol a pak vyberte Přidat položku a vytvořte ve službě Azure Cosmos DB dokument s těmito vlastnostmi.

  3. Stránka se aktualizuje a zobrazí nově vytvořenou položku v seznamu úkolů.

    Snímek obrazovky aplikace s novou položkou v seznamu úkolů

  4. Úkol dokončíte tak, že zaškrtnete políčko ve sloupci Dokončeno a pak vyberete Aktualizovat úkoly . Tím aktualizujete dokument, který jste už vytvořili, a odeberete ho ze zobrazení.

  5. Pokud chcete aplikaci zastavit, stiskněte ctrl+C v okně terminálu a pak výběrem y ukončete dávkovou úlohu.

Nasazení aplikace do App Service

Jakmile bude aplikace místně úspěšná, můžete ji nasadit do Azure App Service. V terminálu se ujistěte, že jste v adresáři aplikace todo . Nasaďte kód do místní složky (todo) pomocí následujícího příkazu az webapp up :

az webapp up --sku F1 --name <app-name>

Nahraďte <app_name> názvem, který je jedinečný ve všech službách Azure (platné znaky jsou a-z, 0-9 a -). Dobrým vzorem je použít kombinaci názvu vaší společnosti a identifikátoru aplikace. Další informace o nasazení aplikace najdete v tématu Node.js nasazení aplikace v Azure.

Dokončení příkazu může trvat několik minut. Příkaz poskytuje zprávy o vytvoření skupiny prostředků, plánu App Service a prostředku aplikace, konfiguraci protokolování a nasazení ZIP. Příkaz poskytuje tyto zprávy při spuštění. Pak vám poskytne adresu URL pro spuštění aplikace na adrese http://<app-name>.azurewebsites.net, což je adresa URL aplikace v Azure.

Vyčištění prostředků

Pokud už tyto prostředky nepotřebujete, můžete odstranit skupinu prostředků, účet služby Azure Cosmos DB a všechny související prostředky. Uděláte to tak, že vyberete skupinu prostředků, kterou jste použili pro účet služby Azure Cosmos DB, vyberte Odstranit a potvrďte název skupiny prostředků, kterou chcete odstranit.

Další kroky

Informace o existujícím databázovém clusteru můžete použít k plánování kapacity.

Vytváření mobilních aplikací s Xamarinem a Azure Cosmos DB