Skapa en Node.js-webbapp i AzureCreate a Node.js web app in Azure

Kom igång med Azure App Service genom att skapa en Node.js/Express-app lokalt med Visual Studio Code och sedan distribuera appen till molnet.Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. Eftersom du använder en kostnads fri App Service nivå debiteras du inga kostnader för att slutföra den här snabb starten.Because you use a free App Service tier, you incur no costs to complete this quickstart.

FörutsättningarPrerequisites

Klona och köra ett lokalt Node.js programClone and run a local Node.js application

  1. Öppna en terminal på den lokala datorn och klona exempel lagrings platsen:On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. Navigera till den nya mappen app:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Starta appen för att testa den lokalt:Start the app to test it locally:

    npm start
    
  4. Öppna webbläsaren och gå till http://localhost:1337 .Open your browser and navigate to http://localhost:1337. Webbläsaren ska Visa "Hello World!".The browser should display "Hello World!".

  5. Tryck på CTRL + C i terminalen för att stoppa servern.Press Ctrl+C in the terminal to stop the server.

distribuera appen till AzureDeploy the app to Azure

I det här avsnittet ska du distribuera din Node.js-app till Azure med VS Code och Azure App Service tillägget.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. I terminalen kontrollerar du att du är i mappen NodeJS-dok-Hello-World och startar sedan Visual Studio Code med följande kommando:In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. I aktivitets fältet VS Code väljer du Azure-logotypen för att visa Azure App Service Explorer.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Välj Logga in på Azure... och följ instruktionerna.Select Sign in to Azure... and follow the instructions. (Mer information finns i fel sökning av Azure-inloggning nedan om du stöter på fel.) När du har loggat in ska Explorer Visa namnet på din Azure-prenumeration.(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    Logga in på Azure

  3. I Azure App Service Explorer med vs Code väljer du ikonen blå UPPIL för att distribuera appen till Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (Du kan också anropa samma kommando från kommando rads verktyget ( CTRL + Shift + P ) genom att skriva "distribuera till webbapp" och välja Azure App Service: distribuera till Web App ).(You can also invoke the same command from the Command Palette ( Ctrl+Shift+P ) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App ).

    Skärm bild av Azure App tjänsten i VS Code som visar den blå pilens ikon vald.

  4. Välj mappen NodeJS-dok-Hello-World .Choose the nodejs-docs-hello-world folder.

  5. Välj ett alternativ för att skapa baserat på det operativ system som du vill distribuera till:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: Välj Skapa ny webbappLinux: Choose Create new Web App
    • Windows: Välj Skapa ny webbapp... AvanceradWindows: Choose Create new Web App... Advanced
  6. Ange ett globalt unikt namn för din webbapp och tryck på RETUR.Type a globally unique name for your web app and press Enter. Namnet måste vara unikt för alla Azure och använder endast alfanumeriska tecken ("A-Z", "a-z" och "0-9") och bindestreck (-).The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. Om du anger Linux-mål väljer du en Node.js version när du uppmanas till det.If targeting Linux, select a Node.js version when prompted. En LTS -version rekommenderas.An LTS version is recommended.

  8. Om du riktar in dig på Windows följer du ytterligare prompter:If targeting Windows, follow the additional prompts:

    1. Välj skapa en ny resurs grupp och ange sedan ett namn för resurs gruppen, till exempel AppServiceQS-rg .Select Create a new resource group , then enter a name for the resource group, such as AppServiceQS-rg.
    2. Välj Windows för operativ systemet.Select Windows for the operating system.
    3. Välj Skapa ny app service plan och ange sedan ett namn för planen (till exempel AppServiceQS-plan ) och välj F1 kostnads fritt för pris nivån.Select Create new App Service plan , then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    4. Välj hoppa över för tillfället när du tillfrågas om Application Insights.Choose Skip for now when prompted about Application Insights.
    5. Välj en region nära dig eller nära resurser som du vill ha åtkomst till.Choose a region near you or near resources you wish to access.
  9. När du har svarat på alla prompter visar VS Code de Azure-resurser som skapas för din app i popup-fönstret för meddelanden.After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    När du distribuerar till Linux väljer du Ja när du uppmanas att uppdatera konfigurationen så att den körs npm install på mål-Linux-servern.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Prompt för att uppdatera konfigurationen på mål servern för Linux

  10. Välj Ja när du uppmanas att alltid distribuera arbets ytan "NodeJS-dok-Hello-World" till (App Name) ".Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". Välj Ja om du vill att vs-kod automatiskt ska rikta in samma app service-webbapp med efterföljande distributioner.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Om du distribuerar till Linux väljer du Bläddra på webbplats i prompten för att visa din nyligen distribuerade webbapp när distributionen är klar.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. Webbläsaren ska Visa "Hello World!"The browser should display "Hello World!"

  12. Om du distribuerar till Windows måste du först ange Node.js versions nummer för webbappen:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. I VS Code expanderar du noden för den nya app service, högerklickar på program inställningar och väljer Lägg till ny inställning... :In VS Code, expand the node for the new app service, right-click Application Settings , and select Add New Setting... :

      Lägg till app Setting-kommando

    2. Ange WEBSITE_NODE_DEFAULT_VERSION för inställnings nyckeln.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Ange 10.15.2 som inställnings värde.Enter 10.15.2 for the setting value.

    4. Högerklicka på noden för app service och välj starta omRight-click the node for the app service and select Restart

      Starta om App Service-kommando

    5. Högerklicka på noden för App Service en gång till och välj Bläddra webbplats.Right-click the node for the app service once more and select Browse Website.

Felsöka Azure-inloggningTroubleshooting Azure sign-in

Om du ser felet "det går inte att hitta en prenumeration med namnet [prenumerations-ID]" när du loggar in på Azure kan det bero på att du är bakom en proxyserver och inte kan komma åt Azure-API: et.If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, it might be because you're behind a proxy and unable to reach the Azure API. Konfigurera HTTP_PROXY och HTTPS_PROXY miljövariabler med din proxyinformation i terminalen med hjälp av 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

Om du ställer in miljövariablerna inte löser problemet kan du kontakta oss genom att välja knappen jag körde i ett ärende ovan.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button above.

Uppdatera appenUpdate the app

Du kan distribuera ändringar i den här appen genom att göra redigeringar i VS Code, spara filer och sedan använda samma process som innan du väljer den befintliga appen i stället för att skapa en ny.You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

Visa loggarViewing Logs

Du kan visa loggens utdata (anrop till console.log ) från appen direkt i fönstret vs-kod.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. I Azure App Service Explorer högerklickar du på noden app och väljer Starta strömmande loggar.In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Starta strömmande loggar

  2. När du uppmanas väljer du att aktivera loggning och starta om programmet.When prompted, choose to enable logging and restart the application. När appen har startats om öppnas VS Code-utdatafönstret med en anslutning till logg strömmen.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Skärm bild av Visual Studio Code-prompten för att aktivera loggning och starta om programmet med knappen Ja markerat.

  3. Efter några sekunder visar utdatafönstret ett meddelande som anger att du är ansluten till logg strömnings tjänsten.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Du kan generera fler utdata-aktiviteter genom att uppdatera sidan i webbläsaren.You can generate more output activity by refreshing the page in the browser.

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

Nästa stegNext steps

Grattis, du har slutfört den här snabb starten!Congratulations, you've successfully completed this quickstart!

Kolla in de andra Azure-tilläggen.Check out the other Azure extensions.

Eller hämta dem genom att installera Node Pack för Azure Extension Pack.Or get them all by installing the Node Pack for Azure extension pack.

FörutsättningarPrerequisites

Om du inte har ett Azure-konto kan du Registrera dig för ett kostnads fritt konto med $200 i Azure-krediter för att testa en kombination av tjänster.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.

Du behöver Visual Studio Code installerat tillsammans med Node.js och NPM, Node.js Package Manager.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

Du måste också installera Azure App Service tillägget, som du kan använda för att skapa, hantera och distribuera Linux-Web Apps på Azure-plattformen som en tjänst (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).

Logga inSign in

När tillägget har installerats loggar du in på ditt Azure-konto.Once the extension is installed, log into your Azure account. I aktivitets fältet väljer du Azure-logotypen för att visa Azure App Service Explorer.In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. Välj Logga in på Azure... och följ instruktionerna.Select Sign in to Azure... and follow the instructions.

Logga in på Azure

FelsökningTroubleshooting

Om du ser felet "det går inte att hitta prenumerationen med namnet [prenumerations-ID]" kan det bero på att du är bakom en proxyserver och inte kan komma åt Azure-API: et.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. Konfigurera HTTP_PROXY och HTTPS_PROXY miljövariabler med din proxyinformation i terminalen med hjälp av 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

Om du ställer in miljövariablerna inte löser problemet kan du kontakta oss genom att välja knappen jag körde i ett ärende nedan.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Krav kontrollPrerequisite check

Innan du fortsätter måste du kontrol lera att alla nödvändiga komponenter är installerade och konfigurerade.Before you continue, ensure that you have all the prerequisites installed and configured.

I VS Code bör du se din Azure-e-postadress i statusfältet och din prenumeration i Azure App Service Explorer.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Skapa ditt Node.js programCreate your Node.js application

Skapa sedan ett Node.js-program som kan distribueras till molnet.Next, create a Node.js application that can be deployed to the Cloud. Den här snabb starten använder en program generator för att snabbt Autogenerera ut programmet från en Terminal.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Tips

Om du redan har slutfört guidenNode.jskan du gå vidare till distribuera till Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Autogenerera ett nytt program med Express generatornScaffold a new application with the Express Generator

Express är ett populärt ramverk för att skapa och köra Node.js program.Express is a popular framework for building and running Node.js applications. Du kan Autogenerera (skapa) ett nytt Express-program med hjälp av verktyget Express Generator .You can scaffold (create) a new Express application using the Express Generator tool. Express generatorn levereras som en NPM-modul och kan köras direkt (utan installation) med hjälp av kommando rads verktyget 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

--view pug --gitParametrarna anger att generatorn ska använda pug -mall (tidigare kallat jade ) och för att skapa en .gitignore fil.The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

Om du vill installera alla program beroenden går du till den nya mappen och kör npm install .To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Kör programmetRun the application

Se sedan till att programmet körs.Next, ensure that the application runs. Starta-programmet från terminalen med hjälp av npm start kommandot för att starta servern.From the terminal, start the application using the npm start command to start the server.

npm start

Öppna din webbläsare och gå till http://localhost:3000 , där du bör se något som liknar detta:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Kör Express-program

Distribuera till AzureDeploy to Azure

I det här avsnittet ska du distribuera din Node.js-app med VS Code och Azure App Service tillägget.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. Den här snabb starten använder den mest grundläggande distributions modellen där appen är zippad och distribuerad till en 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.

Distribuera med Azure App ServiceDeploy using Azure App Service

Öppna först mappen Application i VS Code.First, open your application folder in VS Code.

code .

I Azure App Service Explorer väljer du ikonen blå UPPIL för att distribuera appen till Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Skärm bild av Azure App Service menyn i Visual Studio Code med pilen blå distribution vald.

Tips

Du kan också distribuera från kommando paletten (Ctrl + Shift + P) genom att skriva "distribuera till webbapp" och köra kommandot Azure App Service: distribuera till webbapp.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. Välj den katalog som för närvarande är öppen myExpressApp .Choose the directory that you currently have open, myExpressApp.

  2. Välj Skapa ny webbapp , som distribueras till App Service på Linux som standard.Choose Create new Web App , which deploys to App Service on Linux by default.

  3. Ange ett globalt unikt namn för din webbapp och tryck på RETUR.Type a globally unique name for your Web App and press ENTER. Giltiga tecken för ett app-namn är "a-z", "0-9" och "-".Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Välj din Node.js-version , LTS rekommenderas.Choose your Node.js version , LTS is recommended.

    Meddelande kanalen visar de Azure-resurser som skapas för din app.The notification channel shows the Azure resources that are being created for your app.

  5. Välj Ja när du uppmanas att uppdatera konfigurationen så att den körs npm install på mål servern.Select Yes when prompted to update your configuration to run npm install on the target server. Din app distribueras sedan.Your app is then deployed.

    Skärm bild av prompten för att uppdatera konfigurationen på mål servern med knappen Ja markerad.

  6. När distributionen startar uppmanas du att uppdatera arbets ytan så att senare distributioner automatiskt riktar sig till samma App Service-webbapp.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Välj Ja för att se till att ändringarna distribueras till rätt app.Choose Yes to ensure your changes are deployed to the correct app.

    Skärm bild av prompten för att uppdatera din arbets yta med knappen Ja markerad.

Tips

Se till att ditt program lyssnar på porten som tillhandahålls av PORT miljö variabeln: process.env.PORT .Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Bläddra i appen i AzureBrowse the app in Azure

När distributionen är klar väljer du Bläddra webbplats i prompten för att visa din nyligen distribuerade webbapp.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

FelsökningTroubleshooting

Om du ser felet "du har inte behörighet att visa den här katalogen eller sidan." , kunde programmet antagligen inte starta korrekt.If you see the error "You do not have permission to view this directory or page." , then the application probably failed to start correctly. Gå till nästa avsnitt och Visa loggens utdata för att hitta och åtgärda felet.Head to the next section and view the log output to find and fix the error. Om du inte kan åtgärda det, kontakta oss genom att välja knappen jag körde i ett ärende nedan.If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Vi är glada att hjälpa!We're happy to help!

Uppdatera appenUpdate the app

Du kan distribuera ändringar i den här appen genom att använda samma process och välja den befintliga appen i stället för att skapa en ny.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Visa loggarViewing Logs

I det här avsnittet får du lära dig att visa (eller "pilslut") loggarna från den App Service appen som körs.In this section, you learn how to view (or "tail") the logs from the running App Service app. Alla anrop till console.log i appen visas i fönstret utdata i Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Hitta appen i Azure App Service Explorer, högerklicka på appen och välj Visa strömmande loggar.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

Fönstret VS Code output öppnas med en anslutning till logg strömmen.The VS Code output window opens with a connection to the log stream.

Visa strömmande loggar

Skärm bild av VS Code-prompten för att aktivera fil loggning och starta om webbappen med knappen Ja markerat.

Efter några sekunder visas ett meddelande som anger att du är ansluten till logg strömnings tjänsten.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Uppdatera sidan några gånger för att se mer aktivitet.Refresh the page a few times to see more activity.

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

Nästa stegNext steps

Grattis, du har slutfört den här snabb starten!Congratulations, you've successfully completed this quickstart!

Kolla sedan in de andra Azure-tilläggen.Next, check out the other Azure extensions.

Eller hämta dem genom att installera Node Pack för Azure Extension Pack.Or get them all by installing the Node Pack for Azure extension pack.