Nasazení webové aplikace Node.js a MongoDB do Azure

Azure App Service poskytuje vysoce škálovatelnou službu hostování webů s automatickými opravami pomocí operačního systému Linux. V tomto kurzu se dozvíte, jak vytvořit zabezpečenou aplikaci Node.js v Azure App Service, která je připojená k databázi Azure Cosmos DB for MongoDB. Až budete hotovi, budete mít Express.js aplikaci spuštěnou na Azure App Service v Linuxu.

Diagram znázorňující, jak se aplikace Express.js nasadí do Azure App Service a data MongoDB budou hostovaná ve službě Azure Cosmos DB.

Tento článek předpokládá, že už máte zkušenosti s vývojemNode.js a máte místně nainstalované Node a MongoDB. Budete také potřebovat účet Azure s aktivním předplatným. Pokud účet Azure nemáte, můžete si ho zdarma vytvořit.

Ukázková aplikace

Pokud chcete postupovat podle tohoto kurzu, naklonujte nebo stáhněte ukázkovou aplikaci z úložiště https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Pokud chcete aplikaci spustit místně, postupujte takto:

  • Nainstalujte závislosti balíčků spuštěním příkazu npm install.
  • .env.sample Zkopírujte soubor do .env a naplňte hodnotu DATABASE_URL adresou URL MongoDB (například mongodb://localhost:27017/).
  • Spusťte aplikaci pomocí příkazu npm start.
  • Aplikaci zobrazíte tak, že přejdete na http://localhost:3000.

1. Vytvoření App Service a Azure Cosmos DB

V tomto kroku vytvoříte prostředky Azure. Kroky použité v tomto kurzu vytvoří sadu výchozích zabezpečených prostředků, mezi které patří App Service a Azure Cosmos DB pro MongoDB. Pro proces vytváření zadáte:

  • Název webové aplikace. Je to název, který se používá jako součást názvu DNS pro webovou aplikaci ve tvaru https://<app-name>.azurewebsites.net.
  • Oblast, která má aplikaci fyzicky spustit na světě.
  • Zásobník modulu runtime pro aplikaci. Tady vyberete verzi node, která se má použít pro vaši aplikaci.
  • Plán hostování pro aplikaci. Jedná se o cenovou úroveň, která zahrnuje sadu funkcí a kapacitu škálování pro vaši aplikaci.
  • Skupina prostředků pro aplikaci. Skupina prostředků umožňuje seskupovat (v logickém kontejneru) všechny prostředky Azure potřebné pro aplikaci.

Přihlaste se k Azure Portal a podle těchto kroků vytvořte prostředky Azure App Service.

Krok 1: V Azure Portal:

  1. Do vyhledávacího panelu v horní části Azure Portal zadejte "databáze webové aplikace".
  2. Pod nadpisem Marketplace vyberte položku Web App + Database (Webová aplikace a databáze). Můžete také přejít přímo na průvodce vytvořením .

Snímek obrazovky znázorňující, jak pomocí vyhledávacího pole v horním panelu nástrojů najít průvodce vytvořením webové aplikace a databáze

Krok 2: Na stránce Vytvořit webovou aplikaci a databázi vyplňte formulář následujícím způsobem.

  1. Skupina prostředků → Vyberte Vytvořit nový a použijte název msdocs-expressjs-mongodb-tutorial.
  2. Oblast → Libovolná oblast Azure ve vaší blízkosti.
  3. Názevmsdocs-expressjs-mongodb-XYZ , kde XYZ je libovolný tři náhodné znaky. Tento název musí být v rámci služby Azure jedinečný.
  4. Zásobník modulu runtimeNode 16 LTS.
  5. Plán hostováníBasic. Až budete připraveni, můžete později vertikálně navýšit kapacitu na produkční cenovou úroveň.
  6. Jako databázový stroj je ve výchozím nastavení vybraná služba Azure Cosmos DB pro MongoDB. Azure Cosmos DB je nativní cloudová databáze, která nabízí 100% kompatibilní rozhraní API mongoDB. Poznamenejte si název databáze, který je pro vás vygenerovaný (<název_aplikace-databáze>). Budete ho potřebovat později.
  7. Vyberte Zkontrolovat a vytvořit.
  8. Po dokončení ověření vyberte Vytvořit.

Snímek obrazovky znázorňující, jak nakonfigurovat novou aplikaci a databázi v průvodci webovou aplikací a databází

Krok 3: Dokončení nasazení trvá několik minut. Po dokončení nasazení vyberte tlačítko Přejít k prostředku . Přejdete přímo do aplikace App Service, ale vytvoří se následující prostředky:

  • Skupina prostředků → Kontejner pro všechny vytvořené prostředky.
  • App Service plán → Definuje výpočetní prostředky pro App Service. Vytvoří se plán Linuxu na úrovni Basic .
  • App Service → Představuje vaši aplikaci a běží v plánu App Service.
  • Virtuální síť → integrovaná s aplikací App Service a izoluje back-endový síťový provoz.
  • Privátní koncový bod → koncový bod accessu pro prostředek databáze ve virtuální síti.
  • Síťové rozhraní → Představuje privátní IP adresu privátního koncového bodu.
  • Azure Cosmos DB pro MongoDB → Přístupná jenom z privátního koncového bodu. Na serveru se pro vás vytvoří databáze a uživatel.
  • Privátní DNS zóna → Povolí překlad DNS serveru Azure Cosmos DB ve virtuální síti.

Snímek obrazovky znázorňující dokončení procesu nasazení

2. Nastavení připojení k databázi

Průvodce vytvořením už pro vás vygeneroval identifikátor URI MongoDB, ale vaše aplikace potřebuje proměnnou DATABASE_URL a proměnnou DATABASE_NAME . V tomto kroku vytvoříte nastavení aplikace ve formátu, který vaše aplikace potřebuje.

Krok 1: Na stránce App Service v nabídce vlevo vyberte Konfigurace.

Snímek obrazovky znázorňující, jak otevřít konfigurační stránku v App Service

Krok 2: Na kartě Nastavení aplikace na stránce Konfigurace vytvořte DATABASE_NAME nastavení:

  1. Vyberte Nové nastavení aplikace.
  2. Do pole Název zadejte DATABASE_NAME.
  3. Do pole Hodnota zadejte automaticky vygenerovaný název databáze z průvodce vytvořením, který vypadá jako msdocs-expressjs-mongodb-XYZ-database.
  4. Vyberte OK.

Snímek obrazovky znázorňující, jak zobrazit automaticky vygenerovaný připojovací řetězec

Krok 3:

  1. Posuňte se do dolní části stránky a vyberte připojovací řetězec MONGODB_URI. Vygeneroval ho průvodce vytvořením.
  2. V poli Hodnota vyberte tlačítko Kopírovat a vložte hodnotu do textového souboru pro další krok. Je ve formátu identifikátoru URI připojovacího řetězce MongoDB.
  3. Vyberte Zrušit.

Snímek obrazovky znázorňující, jak vytvořit nastavení aplikace

Krok 4:

  1. Pomocí stejného postupu v kroku 2 vytvořte nastavení aplikace s názvem DATABASE_URL a nastavte hodnotu na hodnotu, kterou jste zkopírovali z připojovacího MONGODB_URI řetězce (tj. mongodb://...).
  2. V řádku nabídek v horní části vyberte Uložit.
  3. Po zobrazení výzvy vyberte Pokračovat.

Snímek obrazovky ukazující, jak uložit nastavení na stránce konfigurace

3. Nasazení ukázkového kódu

V tomto kroku nakonfigurujete nasazení GitHubu pomocí GitHub Actions. Je to jen jeden z mnoha způsobů nasazení do App Service, ale také skvělý způsob, jak mít v procesu nasazení kontinuální integraci. Ve výchozím nastavení git push každý do úložiště GitHub spustí akci sestavení a nasazení.

Krok 1: V novém okně prohlížeče:

  1. Přihlaste se ke svému účtu GitHub.
  2. Přejděte na adresu https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Vyberte Fork.
  4. Vyberte Vytvořit fork.

Snímek obrazovky znázorňující, jak vytvořit fork ukázkového úložiště GitHub

Krok 2: Na stránce GitHubu otevřete visual Studio Code v prohlížeči stisknutím klávesy . .

Snímek obrazovky znázorňující, jak otevřít prostředí prohlížeče Visual Studio Code na GitHubu

Krok 3: V editoru Visual Studio Code v prohlížeči otevřete soubor config/connection.js v průzkumníku. getConnectionInfo Ve funkci se podívejte, že se používá nastavení aplikace, které jste vytvořili dříve pro připojení MongoDB (DATABASE_URL a DATABASE_NAME).

Snímek obrazovky se sadou Visual Studio Code v prohlížeči a otevřeným souborem

Krok 4: Zpět na stránce App Service v nabídce vlevo vyberte Deployment Center.

Snímek obrazovky znázorňující, jak otevřít centrum nasazení v App Service

Krok 5: Na stránce Deployment Center:

  1. V části Zdroj vyberte GitHub. Ve výchozím nastavení je jako zprostředkovatel sestavení vybraný GitHub Actions.
  2. Přihlaste se ke svému účtu GitHub a postupujte podle pokynů k autorizaci Azure.
  3. V části Organizace vyberte svůj účet.
  4. V části Úložiště vyberte msdocs-nodejs-mongodb-azure-sample-app.
  5. V části Větev vyberte main.
  6. V horní nabídce vyberte Uložit. App Service potvrdí soubor pracovního postupu do zvoleného úložiště GitHub v adresáři .github/workflows .

Snímek obrazovky znázorňující, jak nakonfigurovat CI/CD pomocí GitHub Actions

Krok 6: Na stránce Deployment Center:

  1. Vyberte Protokoly. Spuštění nasazení je již spuštěno.
  2. V položce protokolu pro spuštění nasazení vyberte Build/Deploy Logs (Sestavit/nasadit protokoly).

Snímek obrazovky znázorňující, jak otevřít protokoly nasazení v centru pro nasazení

Krok 7: Přejdete do úložiště GitHub a uvidíte, že akce GitHubu je spuštěná. Soubor pracovního postupu definuje dvě samostatné fáze– sestavení a nasazení. Počkejte, až spuštění GitHubu zobrazí stav Dokončeno. Trvá to asi 15 minut.

Snímek obrazovky znázorňující probíhající spuštění GitHubu

4. Přejděte do aplikace.

Krok 1: Na stránce App Service:

  1. V nabídce vlevo vyberte Přehled.
  2. Vyberte adresu URL vaší aplikace. Můžete také přejít přímo na https://<app-name>.azurewebsites.netadresu .

Snímek obrazovky znázorňující, jak spustit App Service z Azure Portal

Krok 2: Přidejte do seznamu několik úkolů. Blahopřejeme, v Azure App Service používáte zabezpečenou aplikaci pro Node.js řízenou daty.

Snímek obrazovky aplikace Express.js spuštěné v App Service

5. Streamování diagnostických protokolů

Azure App Service zachytává všechny zprávy zaprotokolované do konzoly nástroje a pomáhá při diagnostice problémů s aplikací. Ukázková aplikace vypíše zprávy protokolu konzoly ve všech svých koncových bodech, aby tuto funkci předvedla. Koncový bod například get vypíše zprávu o počtu úloh načtených z databáze, a pokud se něco nepovede, zobrazí se chybová zpráva.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Krok 1: Na stránce App Service:

  1. V nabídce vlevo vyberte protokoly App Service.
  2. V části Protokolování aplikace vyberte Systém souborů.

Snímek obrazovky znázorňující povolení nativních protokolů v App Service v Azure Portal

Krok 2: V nabídce vlevo vyberte Stream protokolu. Zobrazí se protokoly vaší aplikace, včetně protokolů platformy a protokolů z kontejneru.

Snímek obrazovky znázorňující, jak zobrazit stream protokolu v Azure Portal

6. Kontrola nasazených souborů pomocí Kudu

Azure App Service poskytuje webovou konzolu diagnostiky s názvem Kudu, která umožňuje prozkoumat hostitelské prostředí serveru pro vaši webovou aplikaci. Pomocí Kudu můžete zobrazit soubory nasazené do Azure, zkontrolovat historii nasazení aplikace a dokonce otevřít relaci SSH v hostitelském prostředí.

Krok 1: Na stránce App Service:

  1. V nabídce vlevo vyberte Rozšířené nástroje.
  2. Vyberte Přejít. Můžete také přejít přímo na https://<app-name>.scm.azurewebsites.netadresu .

Snímek obrazovky ukazující, jak přejít na stránku App Service Kudu

Krok 2: Na stránce Kudu vyberte Nasazení.

Snímek obrazovky hlavní stránky v aplikaci Kudu SCM zobrazující různé dostupné informace o hostitelském prostředí

Pokud jste nasadili kód pro App Service nasazení pomocí Gitu nebo zipu, zobrazí se historie nasazení vaší webové aplikace.

Snímek obrazovky s historií nasazení aplikace App Service ve formátu JSON

Krok 3: Zpět na domovskou stránku Kudu a vyberte Web wwwroot.

Snímek obrazovky s vybraným webem wwwroot

Můžete zobrazit strukturu nasazených složek a kliknutím soubory procházet a zobrazit.

Snímek obrazovky s nasazenými soubory v adresáři wwwroot

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

Jakmile budete hotovi, můžete odstranit všechny prostředky z předplatného Azure odstraněním skupiny prostředků.

Krok 1: Na panelu hledání v horní části Azure Portal:

  1. Zadejte název skupiny prostředků.
  2. Vyberte tuto skupinu prostředků.

Snímek obrazovky znázorňující, jak vyhledat skupinu prostředků a přejít do této skupiny prostředků v Azure Portal

Krok 2: Na stránce skupiny prostředků vyberte Odstranit skupinu prostředků.

Snímek obrazovky znázorňující umístění tlačítka Odstranit skupinu prostředků v Azure Portal

Krok 3:

  1. Potvrďte odstranění zadáním názvu skupiny prostředků.
  2. Vyberte Odstranit.

Snímek obrazovky s potvrzovacím dialogovým oknem pro odstranění skupiny prostředků v Azure Portal:

Nejčastější dotazy

Kolik toto nastavení stojí?

Ceny za vytváření prostředků jsou následující:

  • Plán App Service se vytváří na úrovni Basic a je možné ho vertikálně navýšit nebo snížit. Projděte si ceny App Service.
  • Server Azure Cosmos DB je vytvořený v jedné oblasti a dá se distribuovat do jiných oblastí. Viz Ceny služby Azure Cosmos DB.
  • Za virtuální síť se neúčtují žádné poplatky, pokud nenakonfigurujete další funkce, jako je partnerský vztah. Viz Ceny azure Virtual Network.
  • Za privátní zónu DNS se účtují malé poplatky. Viz Ceny Azure DNS.

Návody se připojit k serveru Azure Cosmos DB, který je zabezpečený za virtuální sítí pomocí jiných nástrojů?

  • Základní přístup z nástroje příkazového řádku získáte spuštěním mongosh příkazu z terminálu SSH aplikace. Kontejner aplikace není součástí mongosh, takže ho musíte nainstalovat ručně. Mějte na paměti, že nainstalovaný klient se nezachovává při restartování aplikace.
  • Pokud se chcete připojit z klienta s grafickým uživatelským rozhraním MongoDB, musí být váš počítač ve virtuální síti. Může to být například virtuální počítač Azure, který je připojený k jedné z podsítí, nebo počítač v místní síti, který má připojení site-to-site VPN k virtuální síti Azure.
  • Pokud se chcete připojit z prostředí MongoDB shell ze stránky správy služby Azure Cosmos DB na portálu, musí být váš počítač také ve virtuální síti. Místo toho můžete otevřít bránu firewall serveru Azure Cosmos DB pro IP adresu místního počítače, ale tím se zvětší prostor pro útoky na vaši konfiguraci.

Jak funguje vývoj místních aplikací s GitHub Actions?

Vezměte si například automaticky vygenerovaný soubor pracovního postupu z App Service každý z nich git push spustí nové sestavení a nasazení. Z místního klonu úložiště GitHub provedete požadované aktualizace a odešlete je do GitHubu. Příklad:

git add .
git commit -m "<some-message>"
git push origin main

Proč je nasazení GitHub Actions tak pomalé?

Automaticky vygenerovaný soubor pracovního postupu z App Service definuje sestavení a nasazení dvou úloh. Vzhledem k tomu, že každá úloha běží ve vlastním čistém prostředí, soubor pracovního postupu zajišťuje, že deploy má úloha přístup k souborům build z úlohy:

Většinu času, který proces dvou úloh zabere, se věnuje nahrávání a stahování artefaktů. Pokud chcete, můžete soubor pracovního postupu zjednodušit tím, že tyto dvě úlohy zkombinujete do jedné, což eliminuje potřebu kroků pro nahrání a stažení.

Další kroky