Skapa en Node.js-webbapp i Azure

Artikel
11/25/2021
11 minuter för att läsa

I den här snabbstarten lär du dig att skapa och distribuera din första Node.js(Express)webbapp till Azure App Service. App Service stöder olika versioner av Node.js på både Linux och Windows.

Den här snabbstarten konfigurerar App Service app på den kostnadsfria nivån och medför ingen kostnad för din Azure-prenumeration.

Konfigurera din första miljö

Ha ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
Installera Node.js och npm. Kör kommandot node --version för att verifiera att Node.js har installerats.
Installera Visual Studio Code.
Azure App Service-tillägget för Visual Studio Code.

Ha ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
Installera Node.js och npm. Kör kommandot node --version för att verifiera att Node.js har installerats.
Installera Azure CLI, med vilket du kör kommandon i alla gränssnitt för att etablera och konfigurera Azure-resurser.

Ha ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
Installera Node.js och npm. Kör kommandot node --version för att verifiera att Node.js har installerats.
Ha en FTP-klient (till exempel FileZilla) för att ansluta till din app.

Skapa ditt Node.js-program

I det här steget skapar du ett startprogram Node.js och kontrollerar att det körs på datorn.

Tips

Om du redan har slutfört Node.js-självstudien kan du gå vidare till Distribuera till Azure.

Skapa ett enkelt Node.js med expressgeneratorn, som installeras som standard med Node.js och NPM.
```
npx express-generator myExpressApp --view pug
```
Ändra till programmets katalog och installera NPM-paketen.
```
cd myExpressApp
npm install
```
Starta utvecklingsservern.
```
npm start
```
Navigera till i en http://localhost:3000 webbläsare. Du bör se något som liknar följande:

Jag stötte på ett problem

Distribuera till Azure

Kontrollera att allt som krävs är installerat och konfigurerat innan du fortsätter.

Anteckning

För att Node.js ska köras i Azure måste det lyssna på porten som tillhandahålls av PORT miljövariabeln. I din genererade Express-app används den här miljövariabeln redan i bin/www för startskriptet (sök efter process.env.PORT ).

I terminalen kontrollerar du att du är i katalogen myExpressApp och börjar Visual Studio Code med följande kommando:
```
code .
```
I Visual Studio Code går du till aktivitetsfältetoch väljer Azure-logotypen.
I App Service väljer du Logga in på Azure... och följer instruktionerna.

I Visual Studio Code bör du se din Azure-e-postadress i statusfältet och din prenumeration i AZURE APP SERVICE Explorer.

Jag stötte på ett problem

Konfigurera App Service och distribuera kod

I App Service explorer väljer du ikonen Distribuera till webbapp.
Välj mappen myExpressApp.

Distribuera till Linux
Distribuera till Windows

Välj Skapa ny webbapp. En Linux-container används som standard.
Ange ett globalt unikt namn för webbappen och tryck på Retur. Namnet måste vara unikt i hela Azure och endast använda alfanumeriska tecken (A–Z, a–z och 0–9) och bindestreck (-).
I Välj en körningsstack väljer du den Node.js version som du vill använda. Vi rekommenderar en LTS-version.
I Välj en prisnivå väljer du Kostnadsfri (F1) och väntar tills resurserna har etablerats i Azure.
I popup-rutan Distribuera alltid arbetsytan "myExpressApp" till <app-name> " väljer du Ja. Så länge du är på samma arbetsyta distribueras Visual Studio Code till samma App Service app varje gång.

Medan Visual Studio Code tillhandahåller Azure-resurserna och distribuerar koden visas förloppsmeddelanden.
När distributionen är klar väljer du Bläddra på webbplatsen i popup-meddelandet. Webbläsaren bör visa Standardsidan för Express.

Välj Skapa ny webbapp... Avancerat.
Ange ett globalt unikt namn för webbappen och tryck på Retur. Namnet måste vara unikt i hela Azure och endast använda alfanumeriska tecken (A–Z, a–z och 0–9) och bindestreck (-).
Välj Skapa en ny resursgrupp och ange sedan ett namn för resursgruppen, till exempel AppServiceQS-rg.
Välj den Node.js du vill använda. Vi rekommenderar en LTS-version.
Välj Windows som operativsystem.
Välj den plats som du vill visa din app från. Till exempel Europa, västra.
Välj Skapa App Service plan och ange sedan ett namn för planen (till exempel AppServiceQS-plan) och välj sedan F1 Kostnadsfritt som prisnivå.
För Välj en programresurs Insights din app väljer du Hoppa över tills vidare och väntar på att resurserna ska etableras i Azure.
I popup-rutan Distribuera alltid arbetsytan "myExpressApp" till <app-name> " väljer du Ja. Så länge du är på samma arbetsyta distribueras Visual Studio Code till samma App Service app varje gång.

Medan Visual Studio Code tillhandahåller Azure-resurserna och distribuerar koden visas förloppsmeddelanden.

Anteckning

När distributionen är klar körs inte Azure-appen ännu eftersom projektroten inte har någon web.config. Följ de återstående stegen för att generera den automatiskt. Mer information finns i Du har inte behörighet att visa den här katalogen eller sidan.
I App Service explorer i Visual Studio kod expanderar du noden för den nya appen, högerklickar på Application Inställningar och väljer Lägg till ny inställning:
Ange SCM_DO_BUILD_DURING_DEPLOYMENT som inställningsnyckel.
Ange true som inställningsvärde.

Den här appinställningen möjliggör byggautomatisering vid distribution, som automatiskt identifierar startskriptet och genererarweb.config med den.
I App Service väljer du ikonen Distribuera till webbapp igen. Bekräfta genom att klicka på Distribuera igen.
Vänta tills distributionen är klar och välj sedan Bläddra på webbplatsen i popup-meddelandet. Webbläsaren bör visa Standardsidan för Express.

Jag stötte på ett problem

Kontrollera att du är i katalogen myExpressApp i terminalen och distribuera koden i den lokala mappen (myExpressApp) med hjälp av az webapp up kommandot :

Distribuera till Linux
Distribuera till Windows

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

az webapp up --sku F1 --name <app-name> --os-type Windows

Om kommandot inte känns igen kontrollerar du att du har Installerat Azure CLI enligt az beskrivningen i Konfigurera din första miljö.
Ersätt <app_name> med ett namn som är unikt för hela Azure ( giltiga tecken är ,a-z 0-9 och -). Ett bra mönster är att använda en kombination av företagets namn och en appidentifierare.
Argumentet --sku F1 skapar webbappen på prisnivån Kostnadsfri, vilket medför en kostnad utan kostnad.
Du kan också inkludera argumentet där är --location <location-name> <location_name> en tillgänglig Azure-region. Du kan hämta en lista över tillåtna regioner för ditt Azure-konto genom att köra az account list-locations kommandot .
Kommandot skapar en Linux-app för Node.js som standard. Om du vill Windows en app i stället använder du --os-type argumentet .
Om du ser felet "Det gick inte att automatiskt identifiera körningsstacken för din app" kontrollerar du att du kör kommandot i katalogen myExpressApp (se Felsöka problem med automatisk identifiering med az webapp up).

Det kan ta några minuter att slutföra kommandot. När den körs visas meddelanden om hur du skapar resursgruppen, App Service plan och appresursen, konfigurerar loggning och utför ZIP-distribution. Sedan visas meddelandet "Du kan starta appen på http:// < appnamn .azurewebsites.net", som är > appens URL på 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"
}

Anteckning

Kommandot az webapp up utför följande åtgärder:

Skapa en standardresursgrupp.
Skapa en standardinställning App Service plan.
Skapa en app med det angivna namnet.
Zip-distribuera alla filer från den aktuella arbetskatalogen med byggautomatisering aktiverat.
Cachelagra parametrarna lokalt i .azure/config-filen så att du inte behöver ange dem igen vid senare distribution med az webapp up eller andra Azure CLI-kommandon. Cachelagrade värden används automatiskt som standard.

Logga in på Azure Portal på https://portal.azure.com.

Skapa Azure-resurser

Skriv apptjänster i sökningen. Under Tjänster väljer du App Services.
På sidan App Services väljer du Skapa.
På fliken Grundläggande inställningar går du till Projektinformation, kontrollerar att korrekt prenumeration har valts och väljer sedan Skapa ny för resursgruppen. Skriv myResourceGroup som namn.
Under Instansinformation skriver du ett globalt unikt namn för webbappen och väljer Kod. Välj Nod 14 LTS-körningsstack, ett operativsystem och en region som du vill betjäna din app från.
Under App Service plan väljer du Skapa ny App Service plan. Skriv myAppServicePlan som namn. Om du vill ändra till den kostnadsfria nivån klickar du på Ändra storlek, väljer fliken Dev/Test, väljer F1 och väljer knappen Tillämpa längst ned på sidan.
Välj knappen Granska + skapa längst ned på sidan.
När valideringen har körs väljer du knappen Skapa längst ned på sidan.
När distributionen är klar väljer du Gå till resurs.

Hämta FTP-autentiseringsuppgifter

Azure App Service stöder två typer av autentiseringsuppgifter för FTP/S-distribution. Dessa autentiseringsuppgifter är inte samma som autentiseringsuppgifterna för din Azure-prenumeration. I det här avsnittet får du autentiseringsuppgifterna för programomfång som ska användas med FileZilla.

På App Service app klickar du på Distributionscenter på menyn till vänster och väljer fliken FTPS-autentiseringsuppgifter.
Öppna FileZilla och skapa en ny plats.
På fliken FTPS-autentiseringsuppgifter kopierar du FTPS-slutpunkten, användarnamnet och lösenordet till FileZilla.
Klicka Anslut i FileZilla.

Distribuera filer med FTP

Kopiera alla filer och katalogfiler till katalogen /site/wwwroot i Azure.
Bläddra till appens URL för att kontrollera att appen körs korrekt.

Distribuera om uppdateringar

Du kan distribuera ändringar i den här appen genom att göra ändringar i Visual Studio Code, spara dina filer och sedan distribuera om till din Azure-app. Exempel:

Från exempelprojektet öppnar du views/index.pug och ändrar
```
p Welcome to #{title}
```
på
```
p Welcome to Azure!
```

I App Service väljer du ikonen Distribuera till webbapp igen. Bekräfta genom att klicka på Distribuera igen.
Vänta tills distributionen är klar och välj sedan Bläddra på webbplatsen i popup-meddelandet. Du bör se att Welcome to Express meddelandet har ändrats till Welcome to Azure! .

Spara ändringarna och distribuera sedan om appen med kommandot az webapp up igen utan argument:
```
az webapp up
```
Det här kommandot använder värden som cachelagras lokalt i .azure/config-filen, till exempel appnamn, resursgrupp och App Service plan.
När distributionen är klar uppdaterar du webbsidan http://<app-name>.azurewebsites.net . Du bör se att Welcome to Express meddelandet har ändrats till Welcome to Azure! .

Spara ändringarna och distribuera sedan appen igen med FTP-klienten.
När distributionen är klar uppdaterar du webbsidan http://<app-name>.azurewebsites.net . Du bör se att Welcome to Express meddelandet har ändrats till Welcome to Azure! .

Strömma loggar

Du kan strömma loggutdata (anrop console.log() till ) från Azure-appen direkt i Visual Studio Code-utdatafönstret.

Högerklicka på App Service appnoden i utforskaren och välj Starta strömningsloggar.
Om du uppmanas att starta om appen klickar du på Ja. När appen har startats om öppnas Visual Studio Code-utdata med en anslutning till loggströmmen.

Efter några sekunder visar utdatafönstret ett meddelande som anger att du är ansluten till loggströmningstjänsten. Du kan generera mer utdata genom att uppdatera sidan i webbläsaren.

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

Jag stötte på ett problem

Du kan komma åt konsolloggarna som genereras inifrån appen och containern där den körs. Loggar innehåller alla utdata som genereras av anrop till console.log() .

Om du vill strömma loggar kör du kommandot az webapp log tail:

az webapp log tail

Kommandot använder resursgruppens namn som cachelagras i .azure/config-filen.

Du kan också inkludera --logs parametern med kommandot az webapp up then för att automatiskt öppna loggströmmen vid distributionen.

Uppdatera appen i webbläsaren för att generera konsolloggar, som innehåller meddelanden som beskriver HTTP-begäranden till appen. Om inga utdata visas omedelbart kan du försöka igen om 30 sekunder.

Om du vill stoppa loggströmningen när som helst trycker du på Ctrl + C i terminalen.

Du kan komma åt konsolloggarna som genereras inifrån appen och containern där den körs. Du kan strömma loggutdata console.log() (anrop till ) Node.js appen direkt i Azure Portal.

På samma App Service för din app använder du den vänstra menyn för att bläddra till avsnittet Övervakning och klickar på Loggström.

Efter några sekunder visar utdatafönstret ett meddelande som anger att du är ansluten till loggströmningstjänsten. Du kan generera mer utdata genom att uppdatera sidan i webbläsaren.

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

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Stegen för att skapa i den här snabbstarten lägger alla resurser i den här resursgruppen. För att rensa behöver du bara ta bort resursgruppen.

I Azure-tillägget för Visual Studio expanderar du Resursgruppsutforskaren.
Expandera prenumerationen, högerklicka på resursgruppen som du skapade tidigare och välj Ta bort.
Bekräfta borttagningen när du uppmanas att göra det genom att ange namnet på den resursgrupp som du tar bort. När du har bekräftat tas resursgruppen bort och du får ett meddelande när den är klar.

Jag stötte på ett problem

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Resursgruppen har ett namn som "appsvc_rg_Linux_CentralUS" beroende på din plats.

Om du inte förväntar dig att behöva dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando:

az group delete --no-wait

Kommandot använder resursgruppens namn som cachelagras i .azure/config-filen.

Argumentet --no-wait gör att kommandot kan returnera innan åtgärden har slutförts.

När resursgruppen, App Service och alla relaterade resurser inte längre behövs kan du ta bort den.

Klicka på App Service resursgrupp som du skapade i steget Skapa Azure-resurser från översiktssidan.
På resursgruppssidan väljer du Ta bort resursgrupp. Bekräfta namnet på resursgruppen för att slutföra borttagningen av resurserna.