Distribuera en Node.js-webbapp i Azure

• 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 LTS och npm. Kör kommandot node --version för att verifiera att Node.js har installerats.
• Installera Azure CLI, där du kör kommandon i valfritt gränssnitt för att skapa och konfigurera Azure-resurser.

• Ha ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
• Installera Node.js LTS 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.

Logga in på Azure

1. Kontrollera att du är i katalogen myExpressApp i terminalen och starta sedan Visual Studio Code med följande kommando:

   code .
   

2. I Visual Studio Code går du till aktivitetsfältet och väljer Azure-logotypen.

3. I App Service-utforskaren väljer du Logga in på Azure... och följer anvisningarna.

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

   

Konfigurera App Service-appen och distribuera kod

1. Välj mappen myExpressApp.

I terminalen kontrollerar du att du är i katalogen myExpressApp och distribuerar koden i din lokala mapp (myExpressApp) med kommandot az webapp up :

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

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

• az Om kommandot inte känns igen kontrollerar du att Azure CLI är installerat enligt 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-9och -). 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.
• Du kan också inkludera argumentet --location <location-name> där <location_name> är en tillgänglig Azure-region. Du kan hämta en lista över tillåtna regioner för ditt Azure-konto genom att az account list-locations köra kommandot .
• Kommandot skapar en Linux-app för Node.js som standard. Använd argumentet för --os-type att skapa en Windows-app i stället.
• Om du ser felet "Det gick inte att identifiera körningsstacken för din app automatiskt" 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-planen och appresursen, konfigurerar loggning och utför ZIP-distribution. Meddelandet "Du kan starta appen på http://< app-name.azurewebsites.net>", som är appens URL i 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"
}

Logga in på Azure-portalen

Logga in på Azure-portalen.

Skapa Azure-resurser

1. Om du vill börja skapa en Node.js-app bläddrar du till https://portal.azure.com/#create/Microsoft.WebSite.

2. På fliken Grundläggande information under Projektinformation kontrollerar du att rätt prenumeration har valts och väljer sedan Skapa ny resursgrupp. Skriv myResourceGroup som namn.

   

3. Under Instansinformation skriver du ett globalt unikt namn för webbappen och väljer Kod. Välj Node 18 LTSRuntime stack, ett operativsystem och en region som du vill hantera din app från.

   

4. Under App Service-plan väljer du Skapa ny App Service-plan. Ange myAppServicePlan som namn. Om du vill ändra till den kostnadsfria nivån väljer du Ändra storlek, väljer fliken Dev/Test , väljer F1 och väljer knappen Tillämpa längst ned på sidan.

   

5. Välj knappen Granska + skapa längst ned på sidan.

   

6. När valideringen har körts väljer du knappen Skapa längst ned på sidan.

7. När distributionen är klar väljer du Gå till resurs.

   

Hämta FTPS-autentiseringsuppgifter

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

1. På appsidan App Service väljer du Distributionscenter på den vänstra menyn och väljer fliken FTPS-autentiseringsuppgifter.

   

2. Öppna FileZilla och skapa en ny webbplats.

3. På fliken FTPS-autentiseringsuppgifter under Programomfattning kopierar du FTPS-slutpunkten, FTPS-användarnamnet och lösenordet till FileZilla.

   

4. Välj Anslut i FileZilla.

Distribuera filer med FTPS

1. Kopiera alla filer och katalogfiler till katalogen /site/wwwroot i Azure.

   

2. Bläddra till appens URL för att kontrollera att appen körs korrekt.

2. I App Service-utforskaren väljer du ikonen Distribuera till webbapp igen och bekräftar genom att klicka på Distribuera igen.

3. Vänta tills distributionen har slutförts och välj sedan Bläddra på webbplatsen i meddelande-popup-fönstret. Du bör se att meddelandet Welcome to Express har ändrats till Welcome to Azure!.

2. Spara ändringarna och distribuera sedan om appen med kommandot az webapp up igen utan argument för Linux. Lägg till --os-type Windows för Windows:

   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.

3. När distributionen är klar uppdaterar du webbsidan http://<app-name>.azurewebsites.net. Du bör se att meddelandet Welcome to Express har ändrats till Welcome to Azure!.

2. Spara ändringarna och distribuera sedan om appen med ftp-klienten.

3. När distributionen är klar uppdaterar du webbsidan http://<app-name>.azurewebsites.net. Du bör se att meddelandet Welcome to Express har ändrats till Welcome to Azure!.

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

1. I App Service-utforskaren högerklickar du på appnoden och väljer Starta direktuppspelningsloggar.

   

2. Om du uppmanas att starta om appen väljer du Ja. När appen har startats om öppnas Visual Studio Code-utdatafönstret med en anslutning till loggströmmen.

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

Du kan komma åt konsolloggarna som genereras inifrån appen och containern där den körs. Loggar inkluderar 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 parametern --logs med kommandot az webapp up för att automatiskt öppna loggströmmen vid distribution.

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 (anrop till console.log()) från Node.js-appen direkt i Azure-portalen.

1. På samma App Service-sida för din app använder du den vänstra menyn för att rulla till avsnittet Övervakning och välja Loggström.

   

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

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

1. I Azure-tillägget i Visual Studio expanderar du utforskaren Resursgrupper .

2. Expandera prenumerationen, högerklicka på resursgruppen som du skapade tidigare och välj Ta bort.

   

3. När du uppmanas att göra det bekräftar du borttagningen genom att ange namnet på den resursgrupp som du tar bort. När du har bekräftat tas resursgruppen bort och du ser ett meddelande när den är klar.

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 returneras innan åtgärden är klar.

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

1. På översiktssidan för App Service väljer du den resursgrupp som du skapade i steget Skapa Azure-resurser.

   

2. På resursgruppssidan väljer du Ta bort resursgrupp. Bekräfta namnet på resursgruppen för att slutföra borttagningen av resurserna.