Vytvoření webové aplikace Node.js ve službě AzureCreate a Node.js web app in Azure

Azure App Service poskytuje vysoce škálovatelnou službu s automatickými opravami pro hostování webů.Azure App Service provides a highly scalable, self-patching web hosting service. V tomto rychlém startu se dozvíte, jak nasadit aplikaci Node. js do Azure App Service.This quickstart shows how to deploy a Node.js app to Azure App Service.

PředpokladyPrerequisites

Pokud nemáte účet Azure, Zaregistrujte si ještě dnes bezplatný účet s $200 v kreditech Azure, abyste si vyzkoušeli libovolnou kombinaci služeb.If you don't have an Azure account, sign up today for a free account with $200 in Azure credits to try out any combination of services.

Potřebujete Visual Studio Code nainstalovat spolu s Node. js a npm, správce balíčků Node. js.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

Budete taky muset nainstalovat rozšíření Azure App Service, které můžete použít k vytvoření, správě a nasazení Web Apps pro Linux na platformě Azure jako službu (PaaS).You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

Přihlásit seSign in

Po instalaci rozšíření se přihlaste ke svému účtu Azure.Once the extension is installed, log into your Azure account. V řádku aktivity vyberte na logo Azure, kde se zobrazí Průzkumník služby Azure App Service .In the Activity Bar, select on the Azure logo to show the AZURE APP SERVICE explorer. Vyberte Přihlásit se k Azure... a postupujte podle pokynů.Select Sign in to Azure... and follow the instructions.

Přihlaste se k Azure

Řešení potížíTroubleshooting

Pokud se zobrazí chyba "nelze najít předplatné s názvem [ID předplatného]" , může to být způsobeno tím, že jste za proxy serverem a nemůžete získat přístup k rozhraní API Azure.If you see the error "Cannot find subscription with name [subscription ID]", it might be because you're behind a proxy and unable to reach the Azure API. Nakonfigurujte HTTP_PROXY a HTTPS_PROXY proměnné prostředí pomocí informací o proxy serveru v terminálu pomocí export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Pokud nastavení proměnných prostředí problém nevyřeší, kontaktujte nás tak, že vyberete níže uvedené tlačítko problému .If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Kontrola požadovaných součástíPrerequisite check

Než budete pokračovat, ujistěte se, že máte nainstalované a nakonfigurované všechny požadavky.Before you continue, ensure that you have all the prerequisites installed and configured.

V VS Code byste měli na stavovém řádku a v rámci vašeho předplatného v Průzkumníkovi služby Azure App Service vidět vaši e-mailovou adresu Azure.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Vytvoření aplikace Node. jsCreate your Node.js application

Dále vytvořte aplikaci Node. js, která může být nasazena do cloudu.Next, create a Node.js application that can be deployed to the Cloud. V tomto rychlém startu se používá generátor aplikace k rychlému vytvoření uživatelského rozhraní aplikace z terminálu.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Tip

Pokud jste už dokončili kurz k Node. js, můžete přeskočit k části nasazení do Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Generování nové aplikace pomocí generátoru ExpressScaffold a new application with the Express Generator

Express je oblíbená architektura pro sestavování a spouštění aplikací v Node. js.Express is a popular framework for building and running Node.js applications. Pomocí nástroje expresního generátoru můžete vytvořit novou aplikaci Express.You can scaffold (create) a new Express application using the Express Generator tool. Generátor Express se dodává jako modul npm a dá se spustit přímo (bez instalace) pomocí nástroje příkazového řádku npm npx.The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

Parametry --view pug --git informují generátoru, aby používal modul šablon Pug (dříve označovaný jako jade) a vytvořil soubor .gitignore.The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

Chcete-li nainstalovat všechny závislosti aplikace, otevřete složku nová a spusťte npm install.To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Spuštění aplikaceRun the application

Dále zkontrolujte, zda je aplikace spuštěna.Next, ensure that the application runs. Z terminálu spusťte aplikaci pomocí příkazu npm start a spusťte server.From the terminal, start the application using the npm start command to start the server.

npm start

Nyní otevřete prohlížeč a přejděte na http://localhost:3000, kde by se měla zobrazit něco podobného:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Spuštění expresní aplikace

Nasadit do AzureDeploy to Azure

V této části nasadíte aplikaci Node. js pomocí VS Code a rozšíření Azure App Service.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. V tomto rychlém startu se používá základní model nasazení, ve kterém je vaše aplikace zip a nasazená do Azure Web App on Linux.This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Nasazení pomocí Azure App ServiceDeploy using Azure App Service

Nejprve otevřete složku aplikace v VS Code.First, open your application folder in VS Code.

code .

V Průzkumníku Azure App Service vyberte ikonu modré šipky nahoru a nasaďte aplikaci do Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Nasazení do webové aplikace

Tip

Z palety příkazů (CTRL + SHIFT + P) se dá nasadit taky tak, že zadáte ' nasadit do webové aplikace ' a spustíte příkaz Azure App Service: nasadit do webové aplikace .You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. Vyberte adresář, který máte v současnosti otevřený myExpressApp.Choose the directory that you currently have open, myExpressApp.

  2. Vyberte možnost vytvoření v závislosti na operačním systému, do kterého chcete nasadit:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: vyberte vytvořit novou webovou aplikaci.Linux: Choose Create new Web App.
    • Windows: zvolte vytvořit novou webovou aplikaci a vyberte možnost Upřesnit .Windows: Choose Create new Web App and select the Advanced option.
  3. Zadejte globálně jedinečný název vaší webové aplikace a stiskněte klávesu ENTER.Type a globally unique name for your Web App and press ENTER. Platnými znaky pro název aplikace jsou "a-z", "0-9" a "-".Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Pokud se zaměřujete na Linux, po zobrazení výzvy vyberte verzi Node. js.If targeting Linux, select a Node.js version when prompted. Doporučuje se verze LTS .An LTS version is recommended.

  5. Pokud cílíte na systém Windows pomocí možnosti Upřesnit , postupujte podle dalších pokynů:If targeting Windows using the Advanced option, follow the additional prompts:

    1. Vyberte vytvořit novou skupinu prostředkůa potom zadejte název skupiny prostředků.Select Create a new resource group, then enter a name for the resource group.
    2. Pro operační systém vyberte systém Windows .Select Windows for the operating system.
    3. Vyberte existující plán App Service nebo vytvořte nový.Select an existing App Service Plan or create a new one. Při vytváření nového plánu můžete vybrat cenovou úroveň.You can select a pricing tier when creating a new plan.
    4. Po zobrazení výzvy k Application Insights Nyní vyberte Přeskočit .Choose Skip for now when prompted about Application Insights.
    5. Vyberte oblast poblíž nebo poblíž zdrojů, ke kterým chcete získat přístup.Choose a region near you or near resources you wish to access.
  6. Až odpovíte na všechny výzvy, kanál oznámení zobrazuje prostředky Azure, které se vytvářejí pro vaši aplikaci.After you respond to all the prompts, the notification channel shows the Azure resources that are being created for your app.

  7. Po zobrazení výzvy k aktualizaci konfigurace pro spuštění npm install na cílovém serveru vyberte Ano .Select Yes when prompted to update your configuration to run npm install on the target server. Vaše aplikace se pak nasadí.Your app is then deployed.

    Nakonfigurované nasazení

  8. Po zahájení nasazení se zobrazí výzva, abyste aktualizovali pracovní prostor tak, aby se později v nasazeních automaticky nacílena na stejnou App Service webovou aplikaci.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Pokud chcete zajistit, aby se vaše změny nasadily do správné aplikace, klikněte na Ano .Choose Yes to ensure your changes are deployed to the correct app.

    Nakonfigurované nasazení

Tip

Ujistěte se, že aplikace naslouchá na portu poskytnutém proměnnou prostředí portu: process.env.PORT.Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Procházení aplikace v AzureBrowse the app in Azure

Až se nasazení dokončí, vyberte Procházet web v příkazovém řádku a zobrazte svou čerstvou nasazenou webovou aplikaci.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

Řešení potížíTroubleshooting

Pokud se zobrazí chyba "nemáte oprávnění k zobrazení tohoto adresáře nebo stránky." , aplikace se pravděpodobně nespustila správně.If you see the error "You do not have permission to view this directory or page.", then the application probably failed to start correctly. Přejděte k další části a podívejte se na výstup protokolu, který vyhledá a opraví chybu.Head to the next section and view the log output to find and fix the error. Pokud ji nemůžete opravit, kontaktujte nás tak, že vyberete níže uvedené tlačítko problému .If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Rádi vám pomůžeme!We're happy to help!

Aktualizace aplikaceUpdate the app

Změny v této aplikaci můžete nasadit pomocí stejného procesu a volbou existující aplikace namísto vytváření nového.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Zobrazení protokolůViewing Logs

V této části se dozvíte, jak zobrazit (neboli "koncová") protokoly z běžící aplikace App Service.In this section, you learn how to view (or "tail") the logs from the running App Service app. Všechna volání console.log v aplikaci se zobrazí v okně výstup v Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Najděte aplikaci v Průzkumníkovi služby Azure App Service , klikněte pravým tlačítkem na aplikaci a vyberte Zobrazit protokoly streamování.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

Po zobrazení výzvy vyberte možnost povolit protokolování a restartovat aplikaci.When prompted, choose to enable logging and restart the application. Po restartování aplikace se otevře okno VS Code výstup s připojením k datovému proudu protokolu.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

Zobrazit protokoly streamování

Povolit protokolování a restartování

Po několika sekundách se zobrazí zpráva oznamující, že jste připojeni ke službě streamování protokolů.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Několikrát aktualizujte stránku, aby se zobrazila více aktivit.Refresh the page a few times to see more activity.

```bash
2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None
```

Další krokyNext steps

Blahopřejeme, úspěšně jste dokončili tento rychlý Start.Congratulations, you've successfully completed this quickstart!

Pak se podívejte na další rozšíření Azure.Next, check out the other Azure extensions.

Nebo si je můžete stáhnout instalací sady Node Pack pro rozšíření Azure Extension Pack.Or get them all by installing the Node Pack for Azure extension pack.