Een Node.js-web-app maken in Azure

• U moet beschikken over een Azure-account met een actief abonnement. Gratis een account maken
• Installeer Node.js en npm. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Installeer Visual Studio Code.
• De Azure App Service-extensie voor Visual Studio Code.

• U moet beschikken over een Azure-account met een actief abonnement. Gratis een account maken
• Installeer Node.js en npm. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Installeer Azure CLI,waarmee u opdrachten in een shell kunt uitvoeren om Azure-resources in terichten en te configureren.

• U moet beschikken over een Azure-account met een actief abonnement. Gratis een account maken
• Installeer Node.js en npm. Voer de opdracht node --version uit om te controleren of Node.js is geïnstalleerd.
• Een FTP-client hebben (bijvoorbeeld FileZilla) om verbinding te maken met uw app.

Aanmelden bij Azure

1. Zorg ervoor dat u zich in de terminal in de map myExpressApp hebt en start Visual Studio code met de volgende opdracht:

   code .
   

2. Selecteer Visual Studio Code in de activiteitenbalkhet Azure-logo.

3. Selecteer in App Service Explorer aanmelden bij Azure... en volg de instructies.

   In Visual Studio Code ziet u uw Azure-e-mailadres in de statusbalk en uw abonnement in de verkenner van AZURE APP SERVICE.

   

De app App Service configureren en code implementeren

1. Selecteer in App Service Explorer het pictogram Implementeren naar web-app.

   

2. Kies de map myExpressApp.

Zorg ervoor dat u zich in de terminal in de map myExpressApp en implementeer de code in uw lokale map (myExpressApp) met behulp van de az webapp up opdracht :

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

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

• Als de az-opdracht niet wordt herkend, controleert u of de Azure CLI is geïnstalleerd volgens de beschrijving in Uw initiële omgeving instellen.
• Vervang <app_name> door een naam die in de volledige Azure-omgeving uniek is (geldige tekens zijn a-z, 0-9 en - ). Het is handig om een combinatie van uw bedrijfsnaam en een app-id te gebruiken.
• Met --sku F1 het argument maakt u de web-app in de prijscategorie Gratis, waarvoor geen kosten in rekening worden brengen.
• U kunt eventueel het argument --location <location-name> toevoegen, waarbij <location_name> een beschikbare Azure-regio is. U kunt een lijst met toegestane regio's voor uw Azure-account ophalen door de az account list-locations-opdracht uit te voeren.
• Met de opdracht maakt u standaard een LinuxNode.js-app. Als u in plaats daarvan Windows app wilt maken, gebruikt u het --os-type argument .
• Als u de fout 'Kan de runtimestack van uw app niet automatisch detecteren' ziet, moet u ervoor zorgen dat u de opdracht in de map myExpressApp gebruikt (zie Troubleshooting auto-detect issues with az webapp up(Problemen met automatisch detecteren oplossen met az webapp up).

Het volledig uitvoeren van de opdracht kan even duren. Tijdens het uitvoeren worden berichten verstrekt over het maken van de resourcegroep, het App Service-abonnement en de app-resource, het configureren van logboekregistratie en het uitvoeren van ZIP-implementatie. Vervolgens krijgt u het volgende bericht: 'U kunt de app starten op http://<app-name>.azurewebsites.net'. Dit is de URL van de app op 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"
}

Meld u aan bij Azure Portal

Meld u aan bij Azure Portal op https://portal.azure.com.

Azure-resources maken

1. Typ app-services in de zoekopdracht. Selecteer onder Services de optie App Services.

   

2. Selecteer op App Services pagina Maken.

3. Zorg ervoor dat op het tabblad Basics onder Projectgegevens het juiste abonnement is geselecteerd, en kies Nieuwe maken om een nieuwe resourcegroep te maken. Typ myResourceGroup als de naam.

   

4. Onder Exemplaardetails typt u een wereldwijd unieke naam voor uw web-app en selecteert u Code . Kies Knooppunt 14 LTS-runtimestack, een besturingssysteem en een regio waar u uw app van wilt bedienen.

   

5. Kies onder App Service Abonnement de optie Nieuw App Service maken. Typ myAppServicePlan als naam. Als u naar de gratis laag wilt gaan, klikt u op Grootte wijzigen, selecteert u het tabblad Dev/Test, selecteert u F1 en selecteert u de knop Toepassen onderaan de pagina.

   

6. Selecteer de knop Beoordelen en maken onderaan de pagina.

   

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

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

   

FTP-referenties op halen

Azure App Service ondersteunt twee typen referenties voor FTP-/S-implementatie. Deze referenties zijn niet hetzelfde als de referenties van uw Azure-abonnement. In deze sectie krijgt u de referenties voor het toepassingsbereik voor gebruik met FileZilla.

1. Klik op App Service app-pagina in het linkermenu op Implementatiecentrum en selecteer het tabblad FTPS-referenties.

   

2. Open FileZilla en maak een nieuwe site.

3. Kopieer op het tabblad FTPS-referenties FTPS-eindpunt, Gebruikersnaam en Wachtwoord naar FileZilla.

   

4. Klik Verbinding maken in FileZilla.

Bestanden implementeren met FTP

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 opnieuw het pictogram Implementeren naar web-app en bevestig dit door nogmaals op Implementeren te klikken.

3. Wacht tot de implementatie is voltooid en selecteer vervolgens Bladeren door website in de pop-upmelding. U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure! .

2. Sla uw wijzigingen op enployer de app opnieuw met behulp van az webapp up de opdracht zonder argumenten:

   az webapp up
   

   Deze opdracht maakt gebruik van waarden die lokaal in de cache zijn opgeslagen in het bestand .azure/config, zoals de naam van de app, de resourcegroep en App Service plan.

3. Nadat de implementatie is voltooid, vernieuwt u de webpagina http://<app-name>.azurewebsites.net . U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure! .

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

3. Nadat de implementatie is voltooid, vernieuwt u de webpagina http://<app-name>.azurewebsites.net . U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure! .

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

1. Klik in App Service explorer met de rechtermuisknop op het app-knooppunt en kies Streaminglogboeken starten.

   

2. Als u wordt gevraagd om de app opnieuw op te starten, klikt u op Ja. Zodra de app opnieuw is opgestart, wordt Visual Studio Code-uitvoervenster geopend met een verbinding met de logboekstream.

3. Na enkele seconden wordt in het uitvoervenster een bericht weergegeven dat aangeeft dat u bent verbonden met de streamservice voor logboekregistratie. 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:

az webapp log tail

Voor de opdracht wordt de resourcegroepnaam gebruikt die in het bestand .azure/config in de cache is opgeslagen.

U kunt ook parameter --logs opnemen door middel van opdracht az webapp up, zodat tijdens de implementatie de logboekstroom automatisch wordt geopend.

Vernieuw de app in de browser om consolelogboeken te genereren. Deze omvatten berichten waarin HTTP-aanvragen voor de app worden beschreven. Als er niet direct uitvoer wordt weergegeven, probeert u het over 30 seconden nog eens.

Als u het streamen van logboeken op een bepaald moment wilt stoppen, drukt u in de terminal op Ctrl+C.

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

1. Gebruik op dezelfde App Service voor uw app het menu links om naar de sectie Bewaking te schuiven en klik op Logboekstream.

   

2. Na enkele seconden wordt in het uitvoervenster een bericht weergegeven dat aangeeft dat u bent verbonden met de streamservice voor logboekregistratie. 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 voor het maken van deze quickstart worden alle resources in deze resourcegroep op de plaats gezet. Als u wilt ops schonen, hoeft u alleen de resourcegroep te verwijderen.

1. Vouw in de Azure-extensie Visual Studio de verkenner van resourcegroepen uit.

2. Vouw het abonnement uit, klik met de rechtermuisknop op de resourcegroep die u eerder hebt gemaakt en selecteer Verwijderen.

   

3. Wanneer u hier om wordt gevraagd, bevestigt u de verwijdering door de naam in te geven van de resourcegroep die u wilt verwijderen. Zodra u hebt bevestigd, wordt de resourcegroep verwijderd en ziet u een melding wanneer deze klaar is.

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. De naam van de resourcegroep lijkt op 'appsvc_rg_Linux_CentralUS', afhankelijk van uw locatie.

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

Voor de opdracht wordt de resourcegroepnaam gebruikt die in het bestand .azure/config in de cache is opgeslagen.

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

U kunt de resourcegroep, de App Service en alle gerelateerde resources verwijderen wanneer u deze niet meer nodig hebt.

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

   

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

   Resourcegroep verwijderen