Een Node.js-web-app implementeren in Azure

Notitie

Vanaf 1 juni 2024 hebben alle nieuw gemaakte App Service-apps de mogelijkheid om een unieke standaardhostnaam te maken met een naamconventie van <app-name>-<random-hash>.<region>..azurewebsites.net De namen van bestaande apps worden niet gewijzigd.

Voorbeeld: myapp-ds27dh7271aah175.westus-01.azurewebsites.net

Raadpleeg de unieke standaardhostnaam voor App Service-resource voor meer informatie.

In deze quickstart leert u hoe u uw eerste Node.js (Express)-web-app 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 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 LTS en npm. 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 en npm. 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.

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

Tip

Als u de Node.js-zelfstudie als 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
   

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

   cd myExpressApp && npm install
   

3. Start de ontwikkelserver met foutopsporingsgegevens.

   DEBUG=myexpressapp:* npm start
   

4. Navigeer in een browser naar http://localhost:3000. De uitvoer moet er ongeveer als volgt uitzien:

   

Er is een fout opgetreden

Implementeren op Azure

Voordat u doorgaat, moet u controleren of alle vereiste onderdelen zijn geïnstalleerd en geconfigureerd.

Notitie

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 (zoeken naarprocess.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 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 azure APP SERVICE Explorer.

   

Er is een fout 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 unieke naam voor uw web-app en druk op Enter. De naam moet uniek zijn binnen Azure en mag alleen alfanumerieke tekens (‘A-Z’, ‘a-z’ en ‘0-9’) en afbreekstreepjes (‘-’) bevatten. Zie notitie bovenaan.

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

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

6. Selecteer Ja in het pop-upvenster Altijd de werkruimte 'myExpressApp' in <app-naam> implementeren. Zolang u zich in dezelfde werkruimte bevindt, wordt Visual Studio Code elke keer in dezelfde App Service-app geïmplementeerd.

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

7. Zodra de implementatie is voltooid, selecteert u Bladeren website in de pop-upmelding. 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 unieke naam voor uw web-app en druk op Enter. De naam moet uniek zijn binnen Azure en mag alleen alfanumerieke tekens (‘A-Z’, ‘a-z’ en ‘0-9’) en afbreekstreepjes (‘-’) bevatten. Zie notitie bovenaan.

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 als uw besturingssysteem.

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

8. Selecteer Nieuw App Service-plan maken en voer vervolgens 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 wilt selecteren, selecteert u Voorlopig overslaan en wacht u totdat de resources zijn gemaakt in Azure.

10. Selecteer Ja in het pop-upvenster Altijd de werkruimte 'myExpressApp' in <app-naam> implementeren. Zolang u zich in dezelfde werkruimte bevindt, wordt Visual Studio Code elke keer in dezelfde App Service-app geïmplementeerd.

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

    Notitie

    Wanneer de implementatie is voltooid, wordt uw Azure-app nog niet uitgevoerd omdat uw projecthoofdmap geen web.config heeft. Volg de resterende stappen om deze automatisch te genereren. Zie U bent niet gemachtigd om deze map of pagina weer te geven voor meer informatie.

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

    

12. Voer SCM_DO_BUILD_DURING_DEPLOYMENT in bij de instellingssleutel.

13. Voer true in bij 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. Bevestig dit door nogmaals op Implementeren te klikken.

15. Wacht tot de implementatie is voltooid en selecteer vervolgens Bladeren website in de pop-upmelding. In de browser moet de standaardpagina van Express worden weergegeven.

Er is een fout 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-9 en -). Zie notitie bovenaan. Het is handig om een een combinatie van uw bedrijfsnaam en een app-id te gebruiken.
• 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 fout 'Kan de runtimestack van uw app niet automatisch detecteren' wordt weergegeven, controleert u of u de opdracht uitvoert in de map myExpressApp (Zie Problemen met automatisch detecteren met az webapp up oplossen).

Het volledig uitvoeren van de opdracht kan even duren. Tijdens het uitvoeren vindt u berichten over het maken van de resourcegroep, het App Service-plan en de app-resource, het configureren van logboekregistratie en het uitvoeren van ZIP-implementatie. Vervolgens wordt het bericht 'U kunt de app starten op http://< app-name.azurewebsites.net>'. Dit is de URL van de app in Azure (zie opmerking bovenaan).

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

Notitie

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

• Er wordt een standaardresourcegroep gemaakt.

• Maak een standaard App Service-plan.

• Er wordt een app met de opgegeven naam gemaakt.

• 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 de Azure-portal

Meld u aan bij het Azure-portaal.

Azure-resources maken

1. Als u een Node.js-app wilt maken, bladert u naar https://portal.azure.com/#create/Microsoft.WebSite.

2. Controleer op het tabblad Basisbeginselen onder Projectdetails of het juiste abonnement is geselecteerd en selecteer vervolgens om een nieuwe resourcegroep te maken. Typ myResourceGroup als de naam.

   

3. Typ onder Instantiedetails een wereldwijd unieke naam voor uw web-app en selecteer Code (zie opmerking bovenaan). Selecteer Node 18 LTSRuntime-stack, een besturingssysteem en een regio waaruit u uw app wilt leveren.

   

4. Selecteer onder App Service-plan het nieuweApp Service-plan 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 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 het tabblad FTPS-referenties .

   

2. Open FileZilla en maak een nieuwe site.

3. Kopieer op het tabblad FTPS-referenties onder Toepassingsbereik FTPS-eindpunt, FTPS-gebruikersnaam en 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 vanuit het voorbeeldproject weergaven/index.ejs en wijzig

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

   to

   <p>Welcome to Azure</p>
   

2. Selecteer in App Service Explorer nogmaals het pictogram Implementeren naar web-app. Bevestig dit door nogmaals op Implementeren te klikken.

3. Wacht tot de implementatie is voltooid en selecteer vervolgens Bladeren website 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. Toevoegen --os-type Windows 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 http://<app-name>.azurewebsites.net (zie opmerking bovenaan). 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 http://<app-name>.azurewebsites.net (zie opmerking bovenaan). U ziet dat het Welcome to Express bericht is gewijzigd in Welcome to Azure!.

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

Er is een fout 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

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

U kunt ook de --logs parameter opnemen met vervolgens az webapp up command 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 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 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 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 ---
    

Resources opschonen

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

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.

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

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

   

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

   

Volgende stappen

Gefeliciteerd, u hebt deze quickstart voltooid.

Zelfstudie: Node.js-app met MongoDB

Node.js-app configureren

 Beveiligen met aangepast domein en certificaat

Bekijk de andere Azure-extensies.

• Azure Cosmos DB
• Azure Functions
• Docker-hulpprogramma's
• Azure CLI-hulpprogramma's
• Azure Resource Manager-hulpprogramma’s

U kunt ze ook allemaal downloaden door het extensiepakket Node-pakket voor Azure te installeren.