Een Node.js-web-app implementeren in Azure

In deze quickstart leert u hoe u uw eerste Node.js web-app (Express) maakt en implementeert in Azure App Service. App Service ondersteunt verschillende versies van Node.js in Linux en Windows.

In deze quickstart wordt een App Service-app geconfigureerd in de gratis laag en worden er geen kosten in rekening gebracht voor uw Azure-abonnement.

In deze video ziet u hoe u een Node.js-web-app implementeert in Azure.

De stappen in de video worden ook beschreven in de volgende secties.

Uw eerste omgeving instellen

• U moet beschikken over een Azure-account met een actief abonnement. 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. 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, waarmee u opdrachten uitvoert in een shell om Azure-resources te maken en te configureren.

• U moet beschikken over een Azure-account met een actief abonnement. 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 (bijvoorbeeld FileZilla) hebben om verbinding te maken met uw app.

Uw Node.js-toepassing maken

In deze stap maakt u een eenvoudige Node.js toepassing en zorgt u ervoor dat deze op uw computer wordt uitgevoerd.

Aanbeveling

Als u de Node.js zelfstudie al hebt voltooid, kunt u verdergaan met Implementeren in Azure.

1. Maak een Node.js-toepassing met behulp van de Express Generator, die standaard is geïnstalleerd met Node.js en npm.

   npx express-generator myExpressApp --view ejs
   

   Als dit de eerste keer is dat u de generator hebt geïnstalleerd, vraagt NPX u om akkoord te gaan met de installatie.

2. Ga naar de map van de toepassing en installeer de npm-pakketten.

   cd myExpressApp && npm install
   

3. Afhankelijkheden bijwerken naar de veiligste versie.

   npm audit fix --force
   

4. Start de ontwikkelserver met foutopsporingsgegevens.

   DEBUG=myexpressapp:* npm start
   

5. Navigeer in een browser naar http://localhost:3000. U zou iets moeten zien dat er ongeveer zo uitziet:

   

Er is een probleem opgetreden

Implementeren in Azure

Voordat u doorgaat, moet u ervoor zorgen dat alle vereisten zijn geïnstalleerd en geconfigureerd.

Opmerking

Uw Node.js-toepassing kan alleen worden uitgevoerd in Azure als deze luistert op de poort die wordt geleverd door de PORT omgevingsvariabele. In uw gegenereerde Express-app wordt deze omgevingsvariabele al gebruikt in de bin/www van het opstartscript. Zoek naar process.env.PORT.

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. Selecteer Aanmelden bij Azure inApp Service Explorer en volg de instructies.

   In Visual Studio Code ziet u uw Azure-e-mailadres in de statusbalk en uw abonnement in App Service Explorer.

   

Er is een probleem opgetreden

De App Service-app configureren en code implementeren

1. Selecteer de map myExpressApp .

Implementeren in Linux

2. Klik met de rechtermuisknop op App Services en selecteer Nieuwe web-app maken. Een Linux-container wordt standaard gebruikt.

3. Typ een wereldwijd unieke naam voor uw web-app en selecteer Enter. De naam moet uniek zijn in heel Azure en mag alleen alfanumerieke tekens ('A-Z', 'a-z' en '0-9') en afbreekstreepjes ('-') gebruiken.

4. Selecteer in 'Selecteer een runtimestack' de gewenste Node.js-versie. Een LTS-versie wordt aanbevolen.

5. In Selecteer een prijscategorie, selecteer Gratis (F1) en wacht tot de resources in Azure zijn aangemaakt.

6. Selecteer < in het pop-upvenster "Werkruimte 'myExpressApp' altijd implementeren naar >app-naam". Dit zorgt ervoor dat, zolang u zich in dezelfde werkruimte bevindt, Visual Studio Code elke keer in dezelfde App Service-app wordt geïmplementeerd.

   Terwijl Visual Studio Code de Azure-resources maakt en de code implementeert, worden voortgangsmeldingen weergegeven.

7. Zodra de implementatie is voltooid, klikt u op Website bekijken in de meldingspop-up. In de browser moet de standaardpagina van Express worden weergegeven.

Implementeren in Windows

2. Klik met de rechtermuisknop op App Services en selecteer Nieuwe web-app maken... Geavanceerd.

3. Typ een wereldwijd unieke naam voor uw web-app en selecteer Enter. De naam moet uniek zijn in heel Azure en mag alleen alfanumerieke tekens ('A-Z', 'a-z' en '0-9') en afbreekstreepjes ('-') gebruiken.

4. Selecteer Een nieuwe resourcegroep maken en voer vervolgens een naam in voor de resourcegroep, zoals AppServiceQS-rg.

5. Selecteer de gewenste Node.js versie. Een LTS-versie wordt aanbevolen.

6. Selecteer Windows voor het besturingssysteem.

7. Selecteer de locatie waaruit u uw app wilt leveren. Bijvoorbeeld Europa - west.

8. Selecteer Nieuw App Service-plan maken, voer een naam in voor het plan (zoals AppServiceQS-plan) en selecteer vervolgens F1 Gratis voor de prijscategorie.

9. Als u een Application Insights-resource voor uw app selecteert, selecteert u Voorlopig overslaan en wacht u totdat de resources zijn gemaakt in Azure.

10. Selecteer < in het pop-upvenster "Werkruimte 'myExpressApp' altijd implementeren naar >app-naam". Dit zorgt ervoor dat, zolang u zich in dezelfde werkruimte bevindt, Visual Studio Code elke keer in dezelfde App Service-app wordt geïmplementeerd.

    Terwijl Visual Studio Code de Azure-resources maakt en de code implementeert, worden voortgangsmeldingen weergegeven.

    Opmerking

    Wanneer de implementatie is voltooid, wordt uw Azure-app nog niet uitgevoerd omdat uw projecthoofdmap geen web.configheeft. Volg de resterende stappen om deze automatisch te genereren. Voor meer informatie, zie U bent niet gemachtigd om deze directory of pagina weer te geven in Een Node.jsconfigureren.

11. Vouw in App Service Explorer in Visual Studio Code het knooppunt voor de nieuwe app uit, klik met de rechtermuisknop op Toepassingsinstellingen en selecteer Nieuwe instelling toevoegen:

    

12. Voer in SCM_DO_BUILD_DURING_DEPLOYMENT voor de instellingssleutel.

13. Voer in true voor de instellingswaarde.

    Met deze app-instelling wordt de automatisering van de build tijdens de implementatie ingeschakeld, waardoor het startscript automatisch wordt gedetecteerd en de web.config ermee wordt gegenereerd.

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

15. Wacht tot de implementatie is voltooid en selecteer vervolgens Website bladeren in de notificatie-pop-up. In de browser moet de standaardpagina van Express worden weergegeven.

Er is een probleem opgetreden

Controleer in de terminal of u zich in de map myExpressApp bevindt en implementeer de code in uw lokale map (myExpressApp) met behulp van de opdracht az webapp up :

Implementeren in Linux

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

Implementeren in Windows

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 zoals beschreven in Uw eerste omgeving instellen.
• Vervang <app_name> door een naam die in de volledige Azure-omgeving uniek is. (Geldige tekens zijn a-z, 0-9en -.) Een goed patroon is het gebruik van een combinatie van uw bedrijfsnaam en een app-id.
• Het --sku F1 argument maakt de web-app in de prijscategorie Gratis, waarvoor geen kosten in rekening worden gebracht.
• 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 Linux-app voor Node.js. Als u in plaats daarvan een Windows-app wilt maken, gebruikt u het --os-type argument.
• Als de foutmelding 'Kan de runtimestack van uw app niet automatisch detecteren' verschijnt, zorg ervoor dat u de opdracht uitvoert in de map myExpressApp. Raadpleeg Problemen met automatisch detecteren oplossen met az webapp up.

Het kan enkele minuten duren voordat de opdracht is voltooid. Terwijl het wordt uitgevoerd, ontvangt u meldingen over het maken van de resourcegroep, het App Service-plan en de app-resource, het configureren van logging en het uitvoeren van een Zip-deploy. Vervolgens wordt een bericht geretourneerd dat de URL van de app bevat. Dit is de URL van de app in 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 <URL>
{
  "URL": "<URL>",
  "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"
}

Opmerking

Met de opdracht az webapp up worden de volgende acties uitgevoerd:

• Maak een standaardresourcegroep.

• Maak een standaard App Service-plan.

• Maak een app met de opgegeven naam.

• Zip implementeert alle bestanden uit de huidige werkmap, waarbij buildautomatisering is ingeschakeld.

• Sla de parameters lokaal in het .azure/config-bestand op, zodat u ze niet opnieuw hoeft op te geven wanneer u ze later implementeert met az webapp up of andere az webapp opdrachten uit de projectmap. De waarden in de cache worden standaard automatisch gebruikt.

Meld u aan bij Azure Portal

Meld u aan bij het Azure-portaal.

Azure-resources maken

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

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

   

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

   

4. Selecteer onder App Service-planNieuwe maken om een App Service-plan te maken. Typ myAppServicePlan als naam. Als u wilt overschakelen naar de gratis laag, selecteert u Grootte wijzigen, selecteert u het tabblad Dev/Test , selecteert u F1 en selecteert u vervolgens de knop Toepassen onder aan de pagina.

   

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

   

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

7. 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 toepassingsbereik die moeten worden gebruikt met FileZilla.

1. Selecteer op de app-pagina van App Service het Implementatiecentrum in het linkermenu en selecteer vervolgens het tabblad FTPS-referenties .

   

2. Open FileZilla en maak een nieuwe site.

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

   

4. Selecteer Verbinding maken in FileZilla.

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.

Updates opnieuw implementeren

U kunt wijzigingen in deze app implementeren door wijzigingen aan te brengen in Visual Studio Code, uw bestanden op te slaan en vervolgens opnieuw te implementeren in uw Azure-app. Voorbeeld:

1. Open het bestand views/index.ejs vanuit het voorbeeldproject en wijzig

   <p>Welcome to <%= title %></p>
   

   naar

   <p>Welcome to Azure</p>
   

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 uw wijzigingen op en implementeer de app opnieuw met behulp van de opdracht az webapp up zonder argumenten voor Linux. Voeg --os-type Windows toe voor Windows:

   az webapp up
   

   Met deze opdracht worden waarden gebruikt die lokaal in de cache worden opgeslagen in het .azure/config-bestand , zoals de naam van de app, de resourcegroep en het App Service-plan.

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.

Logbestanden streamen

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

1. Klik in App Service Explorer 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).
    

Er is een probleem opgetreden

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

De opdracht maakt gebruik van de naam van de resourcegroep die is opgeslagen in het .azure/config-bestand .

U kunt de --logs parameter ook opnemen met de opdracht az webapp up om de logboekstream automatisch te openen bij de implementatie.

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

De hulpbronnen opschonen

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. Vouw in de Azure-extensie van 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. Bevestig de verwijdering wanneer u hierom wordt gevraagd door de naam in te voeren van de resourcegroep die u verwijdert. Zodra u hebt bevestigd, wordt de resourcegroep verwijderd en ziet u een melding wanneer deze klaar is.

Er is een probleem opgetreden

In de voorgaande stappen hebt u Azure-resources in een resourcegroep gemaakt. De resourcegroep heeft een naam zoals '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

De opdracht maakt gebruik van de naam van de resourcegroep die is opgeslagen in het .azure/config-bestand .

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.

   

Volgende stappen

Gefeliciteerd, u hebt deze quickstart voltooid.

Een Node.js + MongoDB-web-app implementeren in Azure

Een Node.js-app configureren

  Uw Azure App Service-app beveiligen met een aangepast domein en een beheerd certificaat

Bekijk de andere Azure-extensies.

• Azure Cosmos DB
• Azure Functions
• Docker Tools
• Azure CLI-hulpprogramma's
• Hulpprogramma's voor Azure Resource Manager

Of installeer het Node Pack voor Azure-extensiepakket om ze allemaal te krijgen.