Distribuera en Node.js + MongoDB-webbapp till Azure

Azure App Service tillhandahåller en mycket skalbar webbvärdtjänst med självkorrigering med hjälp av Linux-operativsystemet. Den här självstudien visar hur du skapar en säker Node.js app i Azure App Service som är ansluten till en Azure Cosmos DB för MongoDB-databas. När du är klar har du en Express.js app som körs på Azure App Service i Linux.

Den här artikeln förutsätter att du redan är bekant med Node.js utveckling och har Node och MongoDB installerade lokalt. Du behöver också ett Azure-konto med en aktiv prenumeration. Om du inte har något Azure-konto kan du skapa ett kostnadsfritt.

Exempelprogram

Om du vill följa med i den här självstudien klonar eller laddar du ned exempelprogrammet från lagringsplatsen https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Om du vill köra programmet lokalt gör du följande:

• Installera paketberoendena genom att köra npm install.
• .env.sample Kopiera filen till .env och fyll i värdet DATABASE_URL med din MongoDB-URL (till exempel mongodb://localhost:27017/).
• Starta programmet med npm start.
• Om du vill visa appen bläddrar du till http://localhost:3000.

1. Skapa App Service och Azure Cosmos DB

I det här steget skapar du Azure-resurserna. Stegen som används i den här självstudien skapar en uppsättning säkra resurser som standard som omfattar App Service och Azure Cosmos DB för MongoDB. För skapandeprocessen anger du:

• Webbappens namn. Det är namnet som används som en del av DNS-namnet för webbappen i form av https://<app-name>.azurewebsites.net.
• Regionen som ska köra appen fysiskt i världen.
• Körningsstacken för appen. Det är där du väljer vilken version av Node som ska användas för din app.
• Värdplanen för appen. Det är prisnivån som innehåller uppsättningen funktioner och skalningskapacitet för din app.
• Appens resursgrupp. Med en resursgrupp kan du gruppera (i en logisk container) alla Azure-resurser som behövs för programmet.

Logga in på Azure Portal och följ dessa steg för att skapa dina Azure App Service resurser.

Steg 1. I Azure-portalen:

1. Ange "webbappdatabas" i sökfältet överst i Azure Portal.
2. Välj objektet webapp + databas under rubriken Marketplace . Du kan också navigera till guiden för att skapa direkt.

Steg 2. På sidan Skapa webbapp + databas fyller du i formuläret på följande sätt.

1. Resursgrupp → Välj Skapa ny och använd namnet msdocs-expressjs-mongodb-tutorial.
2. Region → Valfri Azure-region nära dig.
3. Namn → msdocs-expressjs-mongodb-XYZ där XYZ är tre slumpmässiga tecken. Användarnamnet måste vara unikt inom Azure.
4. Körningsstack → Node 16 LTS.
5. Värdplan → Basic. När du är klar kan du skala upp till en produktionsprisnivå senare.
6. Azure Cosmos DB för MongoDB väljs som standard som databasmotor. Azure Cosmos DB är en molnbaserad databas som erbjuder ett 100 % MongoDB-kompatibelt API. Observera databasnamnet som genereras åt dig (<app-name-database>). Du behöver det senare.
7. Välj Granska + skapa.
8. När valideringen är klar väljer du Skapa.

Steg 3. Distributionen tar några minuter att slutföra. När distributionen är klar väljer du knappen Gå till resurs . Du tas direkt till App Service-appen, men följande resurser skapas:

• Resursgrupp → Containern för alla skapade resurser.
• App Service plan → Definierar beräkningsresurserna för App Service. En Linux-plan på Basic-nivån skapas.
• App Service → Representerar din app och körs i App Service-planen.
• Virtuellt nätverk → integrerat med App Service-appen och isolerar serverdelsnätverkstrafik.
• Privat slutpunkt → Åtkomstslutpunkt för databasresursen i det virtuella nätverket.
• Nätverksgränssnitt → Representerar en privat IP-adress för den privata slutpunkten.
• Azure Cosmos DB för MongoDB → Endast tillgänglig bakom den privata slutpunkten. En databas och en användare skapas åt dig på servern.
• Privat DNS zon → Aktiverar DNS-matchning av Azure Cosmos DB-servern i det virtuella nätverket.

2. Konfigurera databasanslutning

Skapandeguiden genererade Redan MongoDB-URI:n åt dig, men din app behöver en DATABASE_URL variabel och en DATABASE_NAME variabel. I det här steget skapar du appinställningar med det format som din app behöver.

Steg 1. På sidan App Service går du till den vänstra menyn och väljer Konfiguration.

Steg 2. På fliken Programinställningar på sidan Konfiguration skapar du en DATABASE_NAME inställning:

1. Välj Ny programinställning.
2. I fältet Namn anger du DATABASE_NAME.
3. I fältet Värde anger du det automatiskt genererade databasnamnet från skapandeguiden, som ser ut som msdocs-expressjs-mongodb-XYZ-database.
4. Välj OK.

Steg 3.

1. Rulla längst ned på sidan och välj anslutningssträngen MONGODB_URI. Den genererades av guiden skapa.
2. I fältet Värde väljer du knappen Kopiera och klistrar in värdet i en textfil för nästa steg. Den är i MongoDB-anslutningssträngens URI-format.
3. Välj Avbryt.

Steg 4.

1. Med samma steg i steg 2 skapar du en appinställning med namnet DATABASE_URL och anger värdet till den som du kopierade från anslutningssträngen MONGODB_URI (dvs. mongodb://...).
2. I menyraden längst upp väljer du Spara.
3. När du uppmanas till det väljer du Fortsätt.

3. Distribuera exempelkod

I det här steget konfigurerar du GitHub-distribution med hjälp av GitHub Actions. Det är bara ett av många sätt att distribuera till App Service, men också ett bra sätt att ha kontinuerlig integrering i distributionsprocessen. Som standard startar varje git push till din GitHub-lagringsplats bygg- och distributionsåtgärden.

Steg 1. I ett nytt webbläsarfönster:

1. Logga in på ditt GitHub-konto.
2. Navigera till https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
3. Välj Förgrening.
4. Välj Skapa förgrening.

Steg 2. På GitHub-sidan öppnar du Visual Studio Code i webbläsaren genom att trycka på tangenten . .

Steg 3. Öppna config/connection.js i utforskaren i Visual Studio Code i webbläsaren. getConnectionInfo I funktionen ser du att appinställningarna som du skapade tidigare för MongoDB-anslutningen används (DATABASE_URL och DATABASE_NAME).

Steg 4. På sidan App Service går du till den vänstra menyn och väljer Distributionscenter.

Steg 5. På sidan Distributionscenter:

1. I Källa väljer du GitHub. Som standard väljs GitHub Actions som byggprovider.
2. Logga in på ditt GitHub-konto och följ anvisningarna för att auktorisera Azure.
3. I Organisation väljer du ditt konto.
4. I Lagringsplats väljer du msdocs-nodejs-mongodb-azure-sample-app.
5. I Gren väljer du huvud.
6. I den översta menyn väljer du Spara. App Service checkar in en arbetsflödesfil i den valda GitHub-lagringsplatsen i .github/workflows katalogen.

Steg 6. På sidan Distributionscenter:

1. Välj Loggar. En distributionskörning har redan startats.
2. I loggobjektet för distributionskörningen väljer du Skapa/distribuera loggar.

Steg 7. Du tas till din GitHub-lagringsplats och ser att GitHub-åtgärden körs. Arbetsflödesfilen definierar två separata steg, skapa och distribuera. Vänta tills GitHub-körningen visar statusen Slutförd. Det tar ungefär 15 minuter.

4. Bläddra till appen

Steg 1. På sidan App Service:

1. Välj Översikt på den vänstra menyn.
2. Välj url:en för din app. Du kan också navigera direkt till https://<app-name>.azurewebsites.net.

Steg 2. Lägg till några uppgifter i listan. Grattis, du kör en säker datadriven Node.js-app i Azure App Service.

5. Strömma diagnostikloggar

Azure App Service samlar in alla meddelanden som loggas till konsolen för att hjälpa dig att diagnostisera problem med ditt program. Exempelappen matar ut konsolloggmeddelanden i var och en av sina slutpunkter för att demonstrera den här funktionen. Slutpunkten matar till exempel get ut ett meddelande om antalet uppgifter som hämtats från databasen och ett felmeddelande visas om något går fel.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Steg 1. På sidan App Service:

1. Välj App Service loggar på den vänstra menyn.
2. Under Programloggning väljer du Filsystem.

Steg 2. På den vänstra menyn väljer du Loggström. Du ser loggarna för din app, inklusive plattformsloggar och loggar inifrån containern.

6. Inspektera distribuerade filer med Kudu

Azure App Service tillhandahåller en webbaserad diagnostikkonsol med namnet Kudu som gör att du kan undersöka servervärdmiljön för din webbapp. Med Kudu kan du visa de filer som distribuerats till Azure, granska programmets distributionshistorik och till och med öppna en SSH-session i värdmiljön.

Steg 1. På sidan App Service:

1. Välj Avancerade verktyg på den vänstra menyn.
2. Välj Gå. Du kan också navigera direkt till https://<app-name>.scm.azurewebsites.net.

Steg 2. På sidan Kudu väljer du Distributioner.

Om du har distribuerat kod för att App Service med Hjälp av Git eller zip-distribution visas en historik över distributioner av webbappen.

Steg 3. Gå tillbaka till Kudus hemsida och välj Webbplats wwwroot.

Du kan se den distribuerade mappstrukturen och klicka för att bläddra och visa filerna.

7. Rensa resurser

När du är klar kan du ta bort alla resurser från din Azure-prenumeration genom att ta bort resursgruppen.

Steg 1. I sökfältet överst i Azure Portal:

1. Ange resursgruppsnamnet.
2. Välj resursgruppen.

Steg 2. På resursgruppssidan väljer du Ta bort resursgrupp.

Steg 3.

1. Ange resursgruppens namn för att bekräfta borttagningen.
2. Välj Ta bort.

:

Vanliga frågor och svar

• Hur mycket kostar den här installationen?
• Hur gör jag för att ansluta till Azure Cosmos DB-servern som skyddas bakom det virtuella nätverket med andra verktyg?
• Hur fungerar lokal apputveckling med GitHub Actions?
• Varför är GitHub Actions distributionen så långsam?

Hur mycket kostar den här installationen?

Prissättningen för att skapa resurser är följande:

• Den App Service planen skapas på Basic-nivån och kan skalas upp eller ned. Se App Service prissättning.
• Azure Cosmos DB-servern skapas i en enda region och kan distribueras till andra regioner. Se Priser för Azure Cosmos DB.
• Det virtuella nätverket debiteras inte om du inte konfigurerar extra funktioner, till exempel peering. Se Prissättning för Azure Virtual Network.
• Den privata DNS-zonen medför en liten avgift. Se Priser för Azure DNS.

Hur gör jag för att ansluta till Azure Cosmos DB-servern som skyddas bakom det virtuella nätverket med andra verktyg?

• För grundläggande åtkomst från ett kommandoradsverktyg kan du köra mongosh från appens SSH-terminal. Appens container medföljer mongoshinte , så du måste installera den manuellt. Kom ihåg att den installerade klienten inte bevaras mellan appomstarter.
• Om du vill ansluta från en MongoDB GUI-klient måste datorn finnas i det virtuella nätverket. Det kan till exempel vara en virtuell Azure-dator som är ansluten till ett av undernäten eller en dator i ett lokalt nätverk som har en VPN-anslutning från plats till plats med det virtuella Azure-nätverket .
• Om du vill ansluta från MongoDB-gränssnittet från Azure Cosmos DB-hanteringssidan i portalen måste datorn också finnas i det virtuella nätverket. Du kan i stället öppna Azure Cosmos DB-serverns brandvägg för den lokala datorns IP-adress, men det ökar attackytan för konfigurationen.

Hur fungerar lokal apputveckling med GitHub Actions?

Ta den automatiskt genererade arbetsflödesfilen från App Service som exempel, var git push och en startar en ny version och distributionskörning. Från en lokal klon av GitHub-lagringsplatsen skickar du önskade uppdateringar till GitHub. Exempel:

git add .
git commit -m "<some-message>"
git push origin main

Varför är GitHub Actions distributionen så långsam?

Den automatiskt genererade arbetsflödesfilen från App Service definierar build-then-deploy, two-job run. Eftersom varje jobb körs i en egen ren miljö ser arbetsflödesfilen till att deploy jobbet har åtkomst till filerna från build jobbet:

• I slutet av build jobbet laddar du upp filer som artefakter.
• I början av deploy jobbet laddar du ned artefakterna.

Merparten av den tid det tar för tvåjobbsprocessen är att ladda upp och ladda ned artefakter. Om du vill kan du förenkla arbetsflödesfilen genom att kombinera de två jobben till ett, vilket eliminerar behovet av uppladdnings- och nedladdningsstegen.

Nästa steg

JavaScript i Azure Developer Center

Konfigurera Node.js app i App Service

 Skydda med anpassad domän och certifikat