Vytvoření webové aplikace Node.js ve službě Azure

V tomto rychlém startu se dozvíte, jak vytvořit a nasadit první webovou aplikaci Node.js (Express) do Azure App Service. App Service podporuje různé verze Node.js v Linuxu i Windows.

Tento rychlý start nakonfiguruje aplikaci App Service na úrovni Free a za vaše předplatné Azure se neúčtují žádné poplatky.

Nastavení počátečního prostředí

  • Mít účet Azure s aktivním předplatným. Vytvořte si účet zdarma.
  • Nainstalujte Node.js LTS a npm. Spuštěním příkazu node --version ověřte, že je nainstalovaná Node.js.
  • Nainstalujte Azure CLI, pomocí kterého spustíte příkazy v libovolném prostředí pro zřízení a konfiguraci prostředků Azure.

Vytvoření aplikace Node.js

V tomto kroku vytvoříte základní Node.js aplikaci a zajistíte, aby běžela na vašem počítači.

Tip

Pokud jste už dokončili kurzNode.js, můžete přeskočit na nasazení do Azure.

  1. Vytvořte Node.js aplikaci pomocí generátoru Express, který je ve výchozím nastavení nainstalovaný s Node.js a NPM.

    npx express-generator myExpressApp --view ejs
    
  2. Přejděte do adresáře aplikace a nainstalujte balíčky NPM.

    cd myExpressApp && npm install
    
  3. Spusťte vývojový server s informacemi o ladění.

    DEBUG=myexpressapp:* npm start
    
  4. V prohlížeči přejděte na http://localhost:3000. Měli byste vidět přibližně toto:

    Spuštění aplikace Express

Nasazení do Azure

Než budete pokračovat, ujistěte se, že máte nainstalované a nakonfigurované všechny požadavky.

Poznámka

Aby vaše aplikace Node.js běžela v Azure, musí naslouchat na portu, který PORT poskytuje proměnná prostředí. Ve vygenerované aplikaci Express se tato proměnná prostředí už používá ve spouštěcím skriptu bin/www (vyhledejte process.env.PORT).

Přihlášení k Azure

  1. V terminálu se ujistěte, že jste v adresáři myExpressApp , a spusťte Visual Studio Code pomocí následujícího příkazu:

    code .
    
  2. V editoru Visual Studio Code na panelu aktivit vyberte logo Azure .

  3. V průzkumníku App Service vyberte Přihlásit se k Azure... a postupujte podle pokynů.

    V editoru Visual Studio Code byste měli vidět svoji e-mailovou adresu Azure na stavovém řádku a vaše předplatné v průzkumníku služby AZURE APP SERVICE .

    přihlášení k Azure

Konfigurace aplikace App Service a nasazení kódu

  1. Vyberte složku myExpressApp .
  1. Klikněte pravým tlačítkem na App Services a vyberte Vytvořit novou webovou aplikaci. Ve výchozím nastavení se používá kontejner Linuxu.

  2. Zadejte globálně jedinečný název vaší webové aplikace a stiskněte Enter. Název musí být jedinečný ve všech službách Azure a musí používat pouze alfanumerické znaky (A–Z, a-z a 0-9) a spojovníky (-).

  3. V části Vyberte zásobník modulu runtime vyberte požadovanou verzi Node.js. Doporučuje se verze LTS .

  4. V části Vybrat cenovou úroveň vyberte Free (F1) a počkejte, až se prostředky zřídí v Azure.

  5. V automaticky otevírané nabídce Vždy nasazovat pracovní prostor myExpressApp na <název> aplikace vyberte Ano. Pokud jste tak ve stejném pracovním prostoru, visual Studio Code se pokaždé nasadí do stejné aplikace App Service.

    Visual Studio Code sice zřídí prostředky Azure a nasadí kód, ale zobrazuje oznámení o průběhu.

  6. Po dokončení nasazení v automaticky otevírané nabídce oznámení vyberte Procházet web . V prohlížeči by se měla zobrazit výchozí stránka Expressu.

V terminálu se ujistěte, že jste v adresáři myExpressApp , a nasaďte kód do místní složky (myExpressApp) pomocí příkazu az webapp up :

az webapp up --sku F1 --name <app-name>
  • Pokud příkaz az není rozpoznán, ujistěte se, že máte nainstalované Rozhraní příkazového řádku Azure, jak je popsáno v tématu Nastavení počátečního prostředí.
  • Nahraďte <app_name> názvem, který je jedinečný ve všech službách Azure (platné znaky jsou a-z, 0-9a -). Dobrým vzorem je použít kombinaci názvu vaší společnosti a identifikátoru aplikace.
  • Argument --sku F1 vytvoří webovou aplikaci na cenové úrovni Free, za kterou se neúčtují žádné náklady.
  • Volitelně můžete zahrnout argument --location <location-name> , ve kterém <location_name> je dostupná oblast Azure. Seznam povolených oblastí pro váš účet Azure můžete načíst spuštěním az account list-locations příkazu .
  • Příkaz ve výchozím nastavení vytvoří linuxovou aplikaci pro Node.js. Pokud chcete místo toho vytvořit aplikaci pro Windows, použijte --os-type argument .
  • Pokud se zobrazí chyba "Nepodařilo se automaticky rozpoznat zásobník modulu runtime vaší aplikace", ujistěte se, že spouštíte příkaz v adresáři myExpressApp (viz Řešení potíží s automatickým zjišťováním pomocí příkazu az webapp up).

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

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Poznámka

Příkaz az webapp up provádí tyto akce:

  • Vytvořte výchozí skupinu prostředků.

  • Vytvořte výchozí plán App Service.

  • Vytvořte aplikaci se zadaným názvem.

  • Zip nasaďte všechny soubory z aktuálního pracovního adresáře s povolenou automatizací sestavení.

  • Uložte parametry do mezipaměti místně v souboru .azure/config , abyste je nemuseli znovu zadávat při pozdějším nasazení pomocí az webapp up nebo jiných az webapp příkazů ze složky projektu. Hodnoty uložené v mezipaměti se ve výchozím nastavení používají automaticky.

Přihlášení k webu Azure Portal

Přihlaste se k webu Azure Portal na adrese https://portal.azure.com.

Vytvoření prostředků Azure

  1. Do vyhledávacího pole zadejte aplikační služby . V části Služby vyberte App Services.

    Snímek obrazovky s vyhledáváním na portálu

  2. Na stránce App Services vyberte Vytvořit.

  3. Na kartě Základy v části Podrobnosti projektu zkontrolujte, že je vybrané správné předplatné, a pak vyberte Vytvořit novou skupinu prostředků. Jako název zadejte myResourceGroup .

    Snímek obrazovky s částí Podrobnosti o projektu znázorňující, kde vyberete předplatné Azure a skupinu prostředků pro webovou aplikaci

  4. V části Podrobnosti o instanci zadejte globálně jedinečný název webové aplikace a vyberte Kód. Vyberte Node 14 LTSRuntime stack, operační systém a oblast , ze které chcete aplikaci obsluhovat.

    Snímek obrazovky s částí Podrobnosti o instanci, kde zadáte název virtuálního počítače a vyberete jeho oblast, image a velikost.

  5. V části plán App Service vyberte Vytvořit nový plán App Service. Jako název zadejte myAppServicePlan . Pokud chcete přejít na úroveň Free, vyberte Změnit velikost, vyberte kartu Vývoj/testování , vyberte F1 a v dolní části stránky vyberte tlačítko Použít .

    Snímek obrazovky s částí Účet správce, kde zadáte uživatelské jméno a heslo správce

  6. V dolní části stránky vyberte tlačítko Zkontrolovat a vytvořit .

    Snímek obrazovky s tlačítkem Zkontrolovat a vytvořit v dolní části stránky

  7. Po spuštění ověření vyberte tlačítko Vytvořit v dolní části stránky.

  8. Po dokončení nasazení vyberte Přejít k prostředku.

    Snímek obrazovky znázorňující další krok přechodu k prostředku

Získání přihlašovacích údajů FTP

Azure App Service podporuje dva typy přihlašovacích údajů pro nasazení FTP/S. Tyto přihlašovací údaje nejsou stejné jako přihlašovací údaje k vašemu předplatnému Azure. V této části získáte přihlašovací údaje oboru aplikace , které se mají použít se souborem FileZilla.

  1. Na stránce App Service aplikace v nabídce vlevo vyberte Deployment Center a vyberte kartu Přihlašovací údaje FTPS.

    Přihlašovací údaje pro nasazení FTPS

  2. Otevřete SouborZilla a vytvořte nový web.

  3. Na kartě přihlašovacích údajů FTPS zkopírujte koncový bod FTPS, uživatelské jméno a heslo do FileZilla.

    Podrobnosti o připojení FTPS

  4. Vyberte Připojit v SouboruZilla.

Nasazení souborů pomocí FTP

  1. Zkopírujte všechny soubory a soubory adresářů do adresáře /site/wwwroot v Azure.

    Nasazení souborů FileZilla

  2. Přejděte na adresu URL aplikace a ověřte, že aplikace funguje správně.

Opětovné nasazení aktualizací

Změny této aplikace můžete nasadit tak, že provedete úpravy v editoru Visual Studio Code, uložíte soubory a pak je znovu nasadíte do aplikace Azure. Příklad:

  1. V ukázkovém projektu otevřete views/index.ejs a změňte

    <p>Welcome to <%= title %></p>
    

    na

    <p>Welcome to Azure</p>
    
  1. V průzkumníku App Service znovu vyberte ikonu Nasadit do webové aplikace a potvrďte to opětovným kliknutím na Nasadit.

  2. Počkejte na dokončení nasazení a pak v automaticky otevírané nabídce oznámení vyberte Procházet web . Měli byste vidět, že zpráva Welcome to Express byla změněna na Welcome to Azure!.

  1. Uložte změny a pak aplikaci znovu nasaďte pomocí příkazu az webapp up bez argumentů pro Linux. Přidat --os-type Windows pro Windows:

    az webapp up
    

    Tento příkaz používá hodnoty, které jsou uloženy místně v mezipaměti v souboru .azure/config, jako je název aplikace, skupina prostředků a plán App Service.

  2. Po dokončení nasazení aktualizujte webovou stránku http://<app-name>.azurewebsites.net. Měli byste vidět, že zpráva Welcome to Express byla změněna na Welcome to Azure!.

  1. Uložte změny a pak aplikaci znovu nasaďte pomocí klienta FTP.

  2. Po dokončení nasazení aktualizujte webovou stránku http://<app-name>.azurewebsites.net. Měli byste vidět, že zpráva Welcome to Express byla změněna na Welcome to Azure!.

Streamování protokolů

Výstup protokolu (volání ) můžete streamovat console.log()z aplikace Azure přímo v okně výstupu editoru Visual Studio Code.

  1. V průzkumníku App Service klikněte pravým tlačítkem na uzel aplikace a vyberte Spustit protokoly streamování.

    Spuštění protokolů streamování

  2. Pokud se zobrazí výzva k restartování aplikace, vyberte Ano. Po restartování aplikace se otevře okno výstupu editoru Visual Studio Code s připojením k streamu protokolu.

  3. Po několika sekundách se v okně výstupu zobrazí zpráva, že jste připojení ke službě streamování protokolů. Další výstupní aktivitu můžete vygenerovat aktualizací stránky v prohlížeči.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

Můžete získat přístup k protokolům konzoly vygenerovaným uvnitř aplikace a kontejneru, ve kterém běží. Protokoly obsahují výstup vygenerovaný voláním .console.log()

Pokud chcete streamovat protokoly, spusťte příkaz az webapp log tail :

az webapp log tail

Příkaz použije název skupiny prostředků uložený v mezipaměti v souboru .azure/config .

Můžete také zahrnout --logs parametr s příkazem az webapp up , který automaticky otevře stream protokolu při nasazení.

Aktualizujte aplikaci v prohlížeči a vygenerujte protokoly konzoly, které obsahují zprávy popisující požadavky HTTP na aplikaci. Pokud se okamžitě nezobrazí žádný výstup, zkuste to znovu za 30 sekund.

Pokud chcete streamování protokolů kdykoli zastavit, stiskněte v terminálu klávesu Ctrl+C .

Můžete získat přístup k protokolům konzoly vygenerovaným uvnitř aplikace a kontejneru, ve kterém běží. Výstup protokolu (volání ) můžete streamovat console.log()z aplikace Node.js přímo v Azure Portal.

  1. Na stejné stránce App Service pro vaši aplikaci se pomocí nabídky vlevo posuňte do části Monitorování a vyberte Stream protokolu.

    Snímek obrazovky streamu protokolu ve službě Aplikace Azure

  2. Po několika sekundách se v okně výstupu zobrazí zpráva, že jste připojení ke službě streamování protokolů. Další výstupní aktivitu můžete vygenerovat aktualizací stránky v prohlížeči.

     Connecting...
     2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
     Starting Log Tail -n 10 of existing logs ----
     /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
     2021-10-26T21:04:08.614384810Z: [INFO]
     2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
     2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
     2021-10-26T21:04:08.614403210Z: [INFO]
     2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
     2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
     2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
     2021-10-26T21:04:08.614419610Z: [INFO]  fi
     2021-10-26T21:04:08.614423411Z: [INFO]
     2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
     Ending Log Tail of existing logs ---
     

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

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků. Postup vytvoření v tomto rychlém startu vložil všechny prostředky do této skupiny prostředků. Pokud chcete vyčistit, stačí odebrat skupinu prostředků.

  1. V rozšíření Azure sady Visual Studio rozbalte průzkumníka skupin prostředků .

  2. Rozbalte předplatné, klikněte pravým tlačítkem na skupinu prostředků, kterou jste vytvořili dříve, a vyberte Odstranit.

    Snímek obrazovky s navigačním panelem editoru Visual Studio Code pro odstranění prostředku, který obsahuje App Service prostředky

  3. Po zobrazení výzvy potvrďte odstranění zadáním názvu skupiny prostředků, kterou odstraňujete. Po potvrzení se skupina prostředků odstraní a po dokončení se zobrazí oznámení .

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků. Skupina prostředků má v závislosti na vaší poloze název jako "appsvc_rg_Linux_CentralUS".

Pokud neočekáváte, že tyto prostředky v budoucnu budete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu:

az group delete --no-wait

Příkaz použije název skupiny prostředků uložený v mezipaměti v souboru .azure/config .

Argument --no-wait umožňuje, aby se příkaz vrátil před dokončením operace.

Pokud už ji nepotřebujete, můžete odstranit skupinu prostředků, službu App Service a všechny související prostředky.

  1. Na stránce přehledu App Service vyberte skupinu prostředků, kterou jste vytvořili v kroku Vytvoření prostředků Azure.

    Skupina prostředků na stránce přehledu App Service

  2. Na stránce skupiny prostředků vyberte Odstranit skupinu prostředků. Potvrďte název skupiny prostředků a dokončete odstraňování prostředků.

    Odstranění skupiny prostředků

Další kroky

Blahopřejeme, úspěšně jste dokončili tento rychlý start!

Podívejte se na další rozšíření Azure.

Nebo je všechny získejte instalací sady Node Pack pro azure extension pack.