Een Node.js-web-app implementeren in Azure

• U moet beschikken over een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
• Installeer Node.js LTS. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Installeer Visual Studio Code.
• Installeer de Azure App Service-extensie voor Visual Studio Code.

• U moet beschikken over een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
• Installeer Node.js LTS. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Installeer Azure CLI, die u kunt gebruiken om opdrachten uit te voeren in een shell om Azure-resources te maken en te configureren.

• U moet beschikken over een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
• Installeer Node.js LTS. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Een FTP-client, zoals FileZilla, hebben om bestanden over te dragen naar App Service.

Aanmelden bij Azure

1. Controleer in de terminal of u zich in de map myExpressApp bevindt en start Visual Studio Code met de volgende opdracht:

   code .
   

2. Selecteer in Visual Studio Code in de activiteitenbalk het Azure-logo.

3. Zorg ervoor dat u bent aangemeld met uw Azure-account.

De App Service-app configureren en code implementeren

Zorg er in de terminal voor dat je in de myExpressApp-map staat. Vervang <app-name> door een wereldwijd unieke naam, en maak vervolgens de resourcegroep, het App Service-plan en de app aan. Stel SCM_DO_BUILD_DURING_DEPLOYMENT zo in dat App Service de afhankelijkheden installeert en de app bouwt wanneer je het bronarchief uitrolt.

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Als de az opdracht niet wordt herkend, controleert u of de Azure CLI is geïnstalleerd zoals beschreven in Uw eerste omgeving instellen.
• Vervang <app-name> door een naam die uniek is voor heel Azure (geldige tekens zijn a-z, 0-9, en -).
• Het --sku P0v3 argument selecteert de betaalde Premium v3 prijsklasse. Vervang eastus door je voorkeursregio; vermeld beschikbare regio's met az account list-locations.
• --is-linux kiest een Linux-abonnement. Laat het weg voor een Windows-plan, zoals te zien is in het Windows-tabblad.

Maak een ZIP-archief van de bestanden in myExpressApp, niet van de bovenliggende map. Op Linux of macOS, draai zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' in myExpressApp. Op Windows kun je Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip uitvoeren in PowerShell vanuit myExpressApp. Vervolgens deploy je het archief:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Blader naar https://<app-name>.azurewebsites.net om de app te zien.

Azure-resources maken

1. Meld u aan bij het Azure-portaal.

2. Om te beginnen met het maken van een Node.js-app, navigeer naar https://portal.azure.com/#create/Microsoft.WebSite.

3. Controleer op het tabblad Basisinformatie onder Projectdetails of het juiste abonnement is geselecteerd en selecteer Nieuwe maken om een resourcegroep te maken. Typ myResourceGroup als de naam.

   

4. Typ onder Exemplaardetails een wereldwijd unieke naam voor uw web-app en selecteer Code. Selecteer Node 24 LTS in runtimestack, een besturingssysteem en een regio waaruit u uw app wilt bedienen.

   

5. Selecteer onder Prijsplannen, nieuwe maken om een App Service-plan te maken. Typ myAppServicePlan als naam. Als u wilt overschakelen naar de gratis laag, selecteert u Gratis F1 in de lijst met abonnementen .

   

6. Selecteer de knop Beoordelen en maken onder aan de pagina.

   

7. Nadat de validatie is uitgevoerd, selecteert u de knop Maken onder aan de pagina.

8. Nadat de implementatie is voltooid, selecteert u Ga naar de resource.

   

FTPS-referenties ophalen

Azure App Service ondersteunt twee typen referenties voor FTP/S-implementatie. Deze referenties zijn niet hetzelfde als uw Azure-abonnementsreferenties. In deze sectie krijgt u de referenties voor het toepassingsbereik die u met uw FTP-client wilt gebruiken.

1. Selecteer implementatiecentrum onder Implementatie in het zijbalkmenu op de pagina App Service-app en selecteer vervolgens het tabblad FTPS-referenties .

   

2. Open uw FTP-client en navigeer naar de map myExpressApp .

3. Kopieer op het tabblad FTPS-referenties het FTPS-eindpunt, de gebruikersnaam en het wachtwoord naar uw FTP-client.

   

4. Selecteer Verbinding maken in uw FTP-client.

Bestanden implementeren met FTPS

1. Kopieer alle bestanden en mappen naar de map /site/wwwroot in Azure.

   

2. Blader naar de URL van uw app om te controleren of de app correct wordt uitgevoerd.

2. Selecteer in App Service Explorer nogmaals het pictogram Implementeren naar web-app en bevestig dit door Opnieuw implementeren te selecteren.

3. Wacht tot deze implementatie is voltooid en klik op Website Bladeren in de pop-upmelding. U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure.

2. Sla je wijzigingen op, maak ../app.zip opnieuw aan op basis van de appbestanden zoals beschreven in Deploy to Azure, en deploy opnieuw:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Vervang <app-name> door de naam die je gebruikte toen je de webapp maakte.

3. Nadat de implementatie is voltooid, vernieuwt u de webpagina. U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure.

2. Sla uw wijzigingen op en implementeer de app opnieuw met behulp van uw FTP-client.

3. Nadat de implementatie is voltooid, vernieuwt u de webpagina. U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure.

U kunt logboekuitvoer (aanroepen naar console.log()) rechtstreeks vanuit de Azure-app streamen in het uitvoervenster van Visual Studio Code.

1. Klik in Resources in Visual Studio Code met de rechtermuisknop op het app-knooppunt en selecteer Streaminglogboeken starten.

   

2. Als u wordt gevraagd de app opnieuw te starten, selecteert u Ja. Zodra de app opnieuw is opgestart, wordt het uitvoervenster van Visual Studio Code geopend met een verbinding met de logboekstroom.

3. Na een paar seconden wordt in het uitvoervenster een bericht weergegeven dat aangeeft dat u bent verbonden met de service voor logboekstreaming. U kunt meer uitvoeractiviteiten genereren door de pagina in de browser te vernieuwen.

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

U hebt toegang tot de consolelogboeken die zijn gegenereerd vanuit de app en de container waarin deze wordt uitgevoerd. Logboeken bevatten uitvoer die wordt gegenereerd door aanroepen naar console.log().

Als u logboeken wilt streamen, voert u de opdracht az webapp log tail uit:

• Schakel eerst logging in: op Linux, start az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; op Windows, start az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Vervang <app-name> door de naam die je gebruikte toen je de webapp maakte.

Vernieuw de app in de browser om consolelogboeken te genereren. Deze omvatten berichten waarin HTTP-aanvragen voor de app worden beschreven. Als er niet meteen uitvoer verschijnt, probeer het dan over 30 seconden opnieuw.

Als u het streamen van logboeken wilt stoppen, selecteert u Ctrl+C in de terminal.

U hebt toegang tot de consolelogboeken die zijn gegenereerd vanuit de app en de container waarin deze wordt uitgevoerd. U kunt logboekuitvoer (aanroepen naar console.log()) rechtstreeks vanuit de Node.js-app streamen in Azure Portal.

1. Gebruik op dezelfde App Service-pagina voor uw app het zijbalkmenu om naar de sectie Bewaking te schuiven en Logboekstream te selecteren.

   

2. Na een paar seconden wordt in het uitvoervenster een bericht weergegeven dat aangeeft dat u bent verbonden met de service voor logboekstreaming. U kunt meer uitvoeractiviteiten genereren door de pagina in de browser te vernieuwen.

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

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. Met de stappen in deze quickstart worden alle resources in deze resourcegroep geplaatst. Als u wilt opschonen, hoeft u alleen de resourcegroep te verwijderen.

1. Selecteer in de Azure-extensie van Visual Studio Code in de lijst Groeperen op, de optie Groeperen op resourcegroep.

2. Vouw in de lijst Resources het abonnement uit, klik met de rechtermuisknop op de resourcegroep die u eerder hebt gemaakt en selecteer Vervolgens Resourcegroep verwijderen.

   

3. Bevestig de verwijdering wanneer u hierom wordt gevraagd door de naam in te voeren van de resourcegroep die u verwijdert. Nadat u hebt bevestigd, wordt de resourcegroep verwijderd en ziet u een melding wanneer deze klaar is.

In de voorgaande CLI-stappen heb je Azure-bronnen aangemaakt in myResourceGroup.

Als u denkt dat u deze resources niet meer gaat gebruiken, verwijdert u de resourcegroep door de volgende opdracht uit te voeren:

az group delete --name myResourceGroup --no-wait

Met argument --no-wait kan de opdracht worden geretourneerd voordat de bewerking wordt voltooid.

U kunt de resourcegroep, App Service en alle gerelateerde resources verwijderen wanneer ze niet meer nodig zijn.

1. Selecteer op de overzichtspagina van App Service de resourcegroep die u hebt gemaakt in de stap Azure-resources maken .

   

2. Selecteer op de pagina resourcegroep de optie Verwijder resourcegroep. Bevestig de naam van de resourcegroep om het verwijderen van de resources te voltooien.