Självstudie: Bygg en Node.js-och MongoDB-app i AzureTutorial: Build a Node.js and MongoDB app in Azure

Azure App Service ger en mycket skalbar och automatisk korrigering av webb värd tjänst.Azure App Service provides a highly scalable, self-patching web hosting service. I den här självstudien visas hur du skapar en Node.js-app i App Service på Windows och ansluter den till en MongoDB-databas.This tutorial shows how to create a Node.js app in App Service on Windows and connect it to a MongoDB database. När du är klar har du ett MEAN-program (MongoDB, Express, AngularJS och Node.js) som körs i Azure App Service.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. För enkelhetens skull använder exempelprogrammet MEAN.js-webbramverket.For simplicity, the sample application uses the MEAN.js web framework.

Azure App Service ger en mycket skalbar och automatisk korrigering av webb värd tjänst som använder Linux-operativsystemet.Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. Den här självstudien visar hur du skapar en Node.js app i App Service på Linux, ansluter den lokalt till en MongoDB-databas och distribuerar den till en databas i Azure Cosmos DB s API för MongoDB.This tutorial shows how to create a Node.js app in App Service on Linux, connect it locally to a MongoDB database, then deploy it to a database in Azure Cosmos DB's API for MongoDB. När du är klar har du ett MEAN-program (MongoDB, Express, AngularJS och Node.js) som körs i App Service på Linux.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in App Service on Linux. För enkelhetens skull använder exempelprogrammet MEAN.js-webbramverket.For simplicity, the sample application uses the MEAN.js web framework.

MEAN.js-app som körs i Azure App Service

Detta får du får lära dig:What you'll learn:

  • skapa en MongoDB-databas i AzureCreate a MongoDB database in Azure
  • ansluta en Node.js-app till MongoDBConnect a Node.js app to MongoDB
  • distribuera appen till AzureDeploy the app to Azure
  • uppdatera datamodellen och distribuera om appenUpdate the data model and redeploy the app
  • strömma diagnostikloggar från AzureStream diagnostic logs from Azure
  • hantera appen i Azure-portalen.Manage the app in the Azure portal

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.If you don't have an Azure subscription, create a free account before you begin.

FörutsättningarPrerequisites

För att slutföra den här kursen behöver du:To complete this tutorial:

Testa lokal MongoDBTest local MongoDB

Öppna terminalfönstret och cd till bin-katalogen i MongoDB-installationen.Open the terminal window and cd to the bin directory of your MongoDB installation. Du kan använda det här terminalfönstret för att köra alla kommandon i den här självstudien.You can use this terminal window to run all the commands in this tutorial.

Kör mongo i terminalen för att ansluta till din lokala MongoDB-server.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Om anslutningen lyckas körs redan MongoDB-databasen.If your connection is successful, then your MongoDB database is already running. Om inte ska du kontrollera att din lokala MongoDB-databas startar genom att följa stegen i Installera MongoDB Community Edition.If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Ofta installeras MongoDB, men du måste ändå starta det genom att köra mongod.Often, MongoDB is installed, but you still need to start it by running mongod.

När du har testat MongoDB-databasen skriver du Ctrl+C i terminalen.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

Skapa lokal Node.js-appCreate local Node.js app

I det här steget konfigurerar du det lokala Node.js-projektet.In this step, you set up the local Node.js project.

Klona exempelprogrammetClone the sample application

Använd kommandot cd för att komma till en arbetskatalog i terminalfönstret.In the terminal window, cd to a working directory.

Klona exempellagringsplatsen med följande kommando.Run the following command to clone the sample repository.

git clone https://github.com/Azure-Samples/meanjs.git

Den här exempellagringsplatsen innehåller en kopia av MEAN.js-lagringsplatsen.This sample repository contains a copy of the MEAN.js repository. Den ändras för att köras på App Service (mer information finns filen Viktigt för MEAN.js-lagringsplatsen).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Köra appenRun the application

Kör följande kommandon för att installera de nödvändiga paketen och starta programmet.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Ignorera config.domain-varningen.Ignore the config.domain warning. När appen har lästs in helt ser du något som liknar följande meddelande:When the app is fully loaded, you see something similar to the following message:

--
MEAN.JS utvecklings miljöMEAN.JS - Development Environment

Miljö: utvecklings Server:          http://0.0.0.0:3000 databas: MongoDB://localhost/Mean-dev app version: 0.5.0 MEAN.JS version: 0.5.0--Environment:     development Server:          http://0.0.0.0:3000 Database:        mongodb://localhost/mean-dev App version:     0.5.0 MEAN.JS version: 0.5.0 --

Gå till http://localhost:3000 i en webbläsare.Navigate to http://localhost:3000 in a browser. Klicka på alternativet för att registrera på den översta menyn och skapa en testanvändare.Click Sign Up in the top menu and create a test user.

MEAN.js-exempelprogrammet lagrar användardata i databasen.The MEAN.js sample application stores user data in the database. Om du lyckas skapa en användare och logga in skriver appen data till den lokala MongoDB-databasen.If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

MEAN.js ansluter till MongoDB

Välj Administratör > Hantera artiklar för att lägga till några artiklar.Select Admin > Manage Articles to add some articles.

Du kan när som helst stoppa Node.js genom att trycka på Ctrl+C i terminalen.To stop Node.js at any time, press Ctrl+C in the terminal.

Skapa produktions-MongoDBCreate production MongoDB

I det här steget skapar du en MongoDB-databas i Azure.In this step, you create a MongoDB database in Azure. När appen har distribuerats till Azure används den här molndatabasen.When your app is deployed to Azure, it uses this cloud database.

För MongoDB använder den här självstudien Azure Cosmos DB.For MongoDB, this tutorial uses Azure Cosmos DB. Cosmos DB stöder MongoDB-klientanslutningar.Cosmos DB supports MongoDB client connections.

Skapa en resursgruppCreate a resource group

En resurs grupp är en logisk behållare där Azure-resurser, till exempel webbappar, databaser och lagrings konton, distribueras och hanteras.A resource group is a logical container into which Azure resources, such as web apps, databases, and storage accounts, are deployed and managed. Du kan exempelvis välja att ta bort hela resursgruppen i ett enkelt steg längre fram.For example, you can choose to delete the entire resource group in one simple step later.

I Cloud Shell skapar du en resurs grupp med az group create kommandot.In the Cloud Shell, create a resource group with the az group create command. I följande exempel skapas en resursgrupp med namnet myResourceGroup på platsen Europa, västra.The following example creates a resource group named myResourceGroup in the West Europe location. Om du vill se alla platser som stöds för App Service på Kostnadsfri nivå, kör du kommandot az appservice list-locations --sku FREE.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "West Europe"

Du skapar vanligtvis din resursgrupp och resurserna i en region nära dig.You generally create your resource group and the resources in a region near you.

När kommandot har slutförts visar JSON-utdata resursgruppens egenskaper.When the command finishes, a JSON output shows you the resource group properties.

Skapa ett Cosmos DB-kontoCreate a Cosmos DB account

Anteckning

Det finns en kostnad för att skapa Azure Cosmos DB-databaser i den här självstudien i din egen Azure-prenumeration.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Om du vill använda ett kostnadsfritt Azure Cosmos DB-konto i sju dagar kan du använda funktionen Testa Azure Cosmos DB kostnadsfritt.To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. Klicka bara på knappen Skapa i MongoDB-panelen för att skapa en kostnadsfri MongoDB-databas på Azure.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. När databasen har skapats går du till Anslutningssträng i portalen och hämtar din Azure Cosmos DB-anslutningssträng för användning senare i självstudien.Once the database is created, navigate to Connection String in the portal and retrieve your Azure Cosmos DB connection string for use later in the tutorial.

Skapa ett Cosmos DB-konto med kommandot i Cloud Shell az cosmosdb create .In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

I följande kommando ersätter du ett unikt Cosmos DB namn för <cosmosdb-name> plats hållaren.In the following command, substitute a unique Cosmos DB name for the <cosmosdb-name> placeholder. Det här namnet används som en del av Cosmos DB-slutpunkten https://<cosmosdb-name>.documents.azure.com/, så namnet måste vara unikt för alla Cosmos DB-konton i Azure.This name is used as the part of the Cosmos DB endpoint, https://<cosmosdb-name>.documents.azure.com/, so the name needs to be unique across all Cosmos DB accounts in Azure. Namnet får endast innehålla gemener, siffror och bindestreck och måste vara mellan 3 och 50 tecken långt.The name must contain only lowercase letters, numbers, and the hyphen (-) character, and must be between 3 and 50 characters long.

az cosmosdb create --name <cosmosdb-name> --resource-group myResourceGroup --kind MongoDB

Parametern --kind MongoDB aktiverar MongoDB-klientanslutningar.The --kind MongoDB parameter enables MongoDB client connections.

När Cosmos DB-kontot har skapats, visar Azure CLI information liknande följande exempel:When the Cosmos DB account is created, the Azure CLI shows information similar to the following example:

{
  "consistencyPolicy":
  {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "databaseAccountOfferType": "Standard",
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  "failoverPolicies": 
  ...
  < Output truncated for readability >
}

Ansluta en app till produktions-MongoDBConnect app to production MongoDB

I det här steget, ansluter du ditt MEAN.js-exempelprogram till en Cosmos DB-databas som du just skapade med en MongoDB-anslutningssträng.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Hämta databasnyckelnRetrieve the database key

För att ansluta till en Cosmos DB-databas behöver du databasnyckeln.To connect to the Cosmos DB database, you need the database key. I Cloud Shell använder du az cosmosdb list-keys kommandot för att hämta den primära nyckeln.In the Cloud Shell, use the az cosmosdb list-keys command to retrieve the primary key.

az cosmosdb list-keys --name <cosmosdb-name> --resource-group myResourceGroup

Azure CLI visar information som liknar följande exempel:The Azure CLI shows information similar to the following example:

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

Kopiera värdet för primaryMasterKey. Du behöver den här informationen i nästa steg.You need this information in the next step.

Konfigurera anslutningssträngen i ditt Node.js-programConfigure the connection string in your Node.js application

I din lokala MEAN.js-lagringsplats skapar du en fil som heter local-production.js i mappen config/env/.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. . gitignore har redan kon figurer ATS för att hålla filen utanför lagrings platsen..gitignore is already configured to keep this file out of the repository.

Kopiera följande kod till den.Copy the following code into it. Se till att ersätta de två <cosmosdb-name> plats hållarna med namnet på Cosmos DB databasen och Ersätt <primary-master-key> plats hållaren med den nyckel som du kopierade i föregående steg.Be sure to replace the two <cosmosdb-name> placeholders with your Cosmos DB database name, and replace the <primary-master-key> placeholder with the key you copied in the previous step.

module.exports = {
  db: {
    uri: 'mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false'
  }
};

Alternativet ssl=true krävs eftersom Cosmos DB kräver SSL.The ssl=true option is required because Cosmos DB requires SSL.

Spara ändringarna.Save your changes.

Testa programmet i produktionslägeTest the application in production mode

I ett lokalt terminalfönster kör du följande kommando för att minimera och paketera skript för produktionsmiljön.In a local terminal window, run the following command to minify and bundle scripts for the production environment. Den här processen genererar de filer som behövs i produktionsmiljön.This process generates the files needed by the production environment.

gulp prod

I ett lokalt terminalfönster kör du följande kommando för att använda anslutningssträngen du konfigurerade i config/env/local-production.js.In a local terminal window, run the following command to use the connection string you configured in config/env/local-production.js. Ignorera certifikatfelet och config.domain-varningen.Ignore the certificate error and the config.domain warning.

# Bash
NODE_ENV=production node server.js

# Windows PowerShell
$env:NODE_ENV = "production" 
node server.js

NODE_ENV=production ställer in miljövariabeln som anvisar Node.js att köra i produktionsmiljön.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js startar Node.js-servern med server.js i roten för lagringsplatsen.node server.js starts the Node.js server with server.js in your repository root. Så här läses Node.js-programmet in i Azure.This is how your Node.js application is loaded in Azure.

När appen är inläst ska du kontrollera att den körs i produktionsmiljön:When the app is loaded, check to make sure that it's running in the production environment:

--
MEAN.JSMEAN.JS

Miljö: produktions server: http://0.0.0.0:8443 databas: MongoDB:// < cosmosdb-name > : < Primary-Master-Key > @ < cosmosdb-name > . Documents.Azure.com:10250/Mean?SSL=True&sslverifycertificate = false app version: 0.5.0 MEAN.JS version: 0.5.0Environment:     production Server:          http://0.0.0.0:8443 Database:        mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false App version:     0.5.0 MEAN.JS version: 0.5.0

Gå till http://localhost:8443 i en webbläsare.Navigate to http://localhost:8443 in a browser. Klicka på alternativet för att registrera på den översta menyn och skapa en testanvändare.Click Sign Up in the top menu and create a test user. Om du lyckas skapa en användare och logga in skriver appen data till Cosmos DB-databasen i Azure.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

I terminalen stoppar du Node.js genom att skriva Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Distribuera app till AzureDeploy app to Azure

I det här steget distribuerar du ditt MongoDB-anslutna Node.js-program till Azure App Service.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Konfigurera en distributionsanvändareConfigure a deployment user

FTP och lokal git kan distribueras till en Azure-webbapp med hjälp av en distributions användare.FTP and local Git can deploy to an Azure web app by using a deployment user. När du har konfigurerat din distributions användare kan du använda den för alla dina Azure-distributioner.Once you configure your deployment user, you can use it for all your Azure deployments. Ditt användar namn och lösen ord för distribution på konto nivå skiljer sig från dina autentiseringsuppgifter för Azure-prenumerationen.Your account-level deployment username and password are different from your Azure subscription credentials.

Konfigurera distributions användaren genom att köra kommandot AZ webapp Deployment User set i Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Ersätt <username> och <password> med ett användar namn och lösen ord för distributions användare.Replace <username> and <password> with a deployment user username and password.

  • Användar namnet måste vara unikt inom Azure, och för lokala git-push-meddelanden får inte innehålla @ symbolen.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Lösen ordet måste innehålla minst åtta tecken, med två av följande tre element: bokstäver, siffror och symboler.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
az webapp deployment user set --user-name <username> --password <password>

JSON-utdata visar lösen ordet som null .The JSON output shows the password as null. Om du ser felet 'Conflict'. Details: 409 ska du byta användarnamn.If you get a 'Conflict'. Details: 409 error, change the username. Om du ser felet 'Bad Request'. Details: 400 ska du använda ett starkare lösenord.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Registrera ditt användar namn och lösen ord som ska användas för att distribuera dina webb program.Record your username and password to use to deploy your web apps.

Skapa en App Service-planCreate an App Service plan

I Cloud Shell skapar du en App Service plan med az appservice plan create kommandot.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

I följande exempel skapas en App Service-plan med namnet myAppServicePlan på prisnivån Kostnadsfri:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

När App Service-planen har skapats visas information av Azure CLI. Informationen ser ut ungefär som i följande exempel:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

I Cloud Shell skapar du en App Service plan i resurs gruppen med az appservice plan create kommandot.In the Cloud Shell, create an App Service plan in the resource group with the az appservice plan create command.

I följande exempel skapas en App Service plan med namnet myAppServicePlan på den kostnads fria pris nivån ( --sku F1 ) och i en Linux-behållare ( --is-linux ).The following example creates an App Service plan named myAppServicePlan in the Free pricing tier (--sku F1) and in a Linux container (--is-linux).

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku F1 --is-linux

När App Service-planen har skapats visas information av Azure CLI. Informationen ser ut ungefär som i följande exempel:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "linux",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  <JSON data removed for brevity.>
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Skapa en webbappCreate a web app

Skapa en webbapp i myAppServicePlan App Service plan.Create a web app in the myAppServicePlan App Service plan.

I Cloud Shell kan du använda az webapp create kommandot.In the Cloud Shell, you can use the az webapp create command. Ersätt <app-name> med ett globalt unikt appnamn (giltiga tecken är a-z, 0-9 och -) i följande exempel.In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). Körningen har angetts till NODE|6.9.The runtime is set to NODE|6.9. Om du vill se alla körningar som stöds kör du az webapp list-runtimes .To see all supported runtimes, run az webapp list-runtimes.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

När webbappen har skapats visar Azure CLI utdata liknande den i följande exempel:When the web app has been created, the Azure CLI shows output similar to the following example:

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Du har skapat en tom webbapp med git-distribution aktiverad.You’ve created an empty web app, with git deployment enabled.

Anteckning

URL för fjärransluten Git visas i egenskapen deploymentLocalGitUrl med formatet https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git.The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Spara den här URL:en, eftersom du behöver den senare.Save this URL as you need it later.

Skapa en webbapp i myAppServicePlan App Service plan.Create a web app in the myAppServicePlan App Service plan.

I Cloud Shell kan du använda az webapp create kommandot.In the Cloud Shell, you can use the az webapp create command. Ersätt <app-name> med ett globalt unikt appnamn (giltiga tecken är a-z, 0-9 och -) i följande exempel.In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). Körningen har angetts till NODE|6.9.The runtime is set to NODE|6.9. Om du vill se alla körningar som stöds kör du az webapp list-runtimes --linux .To see all supported runtimes, run az webapp list-runtimes --linux.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

När webbappen har skapats visar Azure CLI utdata liknande den i följande exempel:When the web app has been created, the Azure CLI shows output similar to the following example:

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Du har skapat en tom webbapp med git-distribution aktiverad.You’ve created an empty web app, with git deployment enabled.

Anteckning

URL för fjärransluten Git visas i egenskapen deploymentLocalGitUrl med formatet https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git.The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Spara den här URL:en, eftersom du behöver den senare.Save this URL as you need it later.

Konfigurera en miljövariabelConfigure an environment variable

Som standard håller MEAN.js-projektet config/env/local-production.js utanför Git-lagringsplatsen.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. Så för Azure-appen använder du appinställningar för att definiera MongoDB-anslutningssträngen.So for your Azure app, you use app settings to define your MongoDB connection string.

Om du vill ange appinställningar använder du az webapp config appsettings set kommandot i Cloud Shell.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

I följande exempel konfigureras appinställningen MONGODB_URI i Azure-appen.The following example configures a MONGODB_URI app setting in your Azure app. Ersätt <app-name> <cosmosdb-name> <primary-master-key> plats hållarna,, och.Replace the <app-name>, <cosmosdb-name>, and <primary-master-key> placeholders.

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI="mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true"

I Node.js-kod kommer du åt den här appens inställning med process.env.MONGODB_URI , precis som du skulle få åtkomst till en miljö variabel.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

På din lokala MEAN.js-lagringsplats öppnar du config/env/production.js (inte config/env/local-production.js), som har en specifik konfiguration för produktion-miljö.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. MEAN.js-standardappen är redan konfigurerade för att använda MONGODB_URI-miljövariabeln du har skapat.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

db: {
  uri: ... || process.env.MONGODB_URI || ...,
  ...
},

Skicka till Azure från GitPush to Azure from Git

I det lokala terminalfönstret kan du lägga till en Azure-fjärrdatabas till din lokala Git-databas.Back in the local terminal window, add an Azure remote to your local Git repository. Ersätt <deploymentLocalGitUrl-from-create-step> med URL: en för den git-fjärrserver som du sparade från skapa en webbapp.Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

git remote add azure <deploymentLocalGitUrl-from-create-step>

Skicka till Azure-fjärrdatabasen för att distribuera appen med följande kommando.Push to the Azure remote to deploy your app with the following command. När git Credential Manager uppmanas att ange autentiseringsuppgifter, se till att du anger de autentiseringsuppgifter som du skapade i Konfigurera en distributions användare, inte de autentiseringsuppgifter som du använder för att logga in på Azure Portal.When Git Credential Manager prompts you for credentials, make sure you enter the credentials you created in Configure a deployment user, not the credentials you use to sign in to the Azure portal.

git push azure master

Det kan ett par minuter att köra kommandot.This command may take a few minutes to run. Medan det körs visas information liknande den i följande exempel:While running, it displays information similar to the following example:

Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 489 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c7c716eee'.
remote: Running custom deployment command...
remote: Running deployment command...
remote: Handling node.js deployment.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      master -> master

Du kanske märker att distributionsprocessen kör Gulp efter npm install.You may notice that the deployment process runs Gulp after npm install. App Service kör inte Gulp- eller Grunt-uppgifter under distributionen. Den här exempellagringsplatsen har två extra filer i rotkatalogen för detta:App Service does not run Gulp or Grunt tasks during deployment, so this sample repository has two additional files in its root directory to enable it:

  • .deployment – Den här filen skickar ett meddelande till App Service om att köra bash deploy.sh som anpassat distributionsskript..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh – Det anpassade distributionsskriptet.deploy.sh - The custom deployment script. Om du granskar filen ser du att den kör gulp prod efter npm install och bower install.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Du kan använda den här metoden för att lägga till steg i din Git-baserade distributionen.You can use this approach to add any step to your Git-based deployment. När som helst när du startar om Azure-appen kör inte App Service om dessa automatiserade uppgifter.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks. Mer information finns i köra grunt/Bower/Gulp.For more information, see Run Grunt/Bower/Gulp.

Bläddra till Azure-appenBrowse to the Azure app

Bläddra till den distribuerade appen i webbläsaren.Browse to the deployed app using your web browser.

http://<app-name>.azurewebsites.net 

Klicka på Sign Up (Registrera) på den översta menyn och skapa en låtsasanvändare.Click Sign Up in the top menu and create a dummy user.

Om du lyckas och appen loggar in automatiskt till den skapade användaren har din MEAN.jsapp i Azure anslutning till MongoDB- databasen (Cosmos DB).If you are successful and the app automatically signs in to the created user, then your MEAN.js app in Azure has connectivity to the MongoDB (Cosmos DB) database.

MEAN.js-app som körs i Azure App Service

Välj Administratör > Hantera artiklar för att lägga till några artiklar.Select Admin > Manage Articles to add some articles.

Grattis!Congratulations! Du kör en datadriven Node.js-app i Azure App Service.You're running a data-driven Node.js app in Azure App Service.

Uppdatera datamodell och distribuera omUpdate data model and redeploy

I det här steget ändrar du datamodellen article och publicerar din ändring i Azure.In this step, you change the article data model and publish your change to Azure.

Uppdatera datamodellenUpdate the data model

I din lokala MEAN.js-katalog öppnar du modules/articles/server/models/article.server.model.js.In your local MEAN.js repository, open modules/articles/server/models/article.server.model.js.

I ArticleSchema lägger du till String-typ med namnet comment.In ArticleSchema, add a String type called comment. När du är klar bör schemakoden se ut så här:When you're done, your schema code should look like this:

const ArticleSchema = new Schema({
  ...,
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  comment: {
    type: String,
    default: '',
    trim: true
  }
});

Uppdatera artiklarnas kodUpdate the articles code

Uppdatera resten av din articles-kod för att använda comment.Update the rest of your articles code to use comment.

Det finns fem filer som du måste ändra: serverkontrollanten och de fyra klientvyerna.There are five files you need to modify: the server controller and the four client views.

Öppna modules/articles/server/controllers/articles.server.controller.js.Open modules/articles/server/controllers/articles.server.controller.js.

I funktionen update lägger du till en uppgift för article.comment.In the update function, add an assignment for article.comment. Följande kod visar den slutförda update-funktionen:The following code shows the completed update function:

exports.update = function (req, res) {
  let article = req.article;

  article.title = req.body.title;
  article.content = req.body.content;
  article.comment = req.body.comment;

  ...
};

Öppna modules/articles/client/views/view-article.client.view.html.Open modules/articles/client/views/view-article.client.view.html.

Strax ovanför den avslutande </section>-taggen lägger du till följande rad för att visa comment tillsammans med resterande artikeldata:Just above the closing </section> tag, add the following line to display comment along with the rest of the article data:

<p class="lead" ng-bind="vm.article.comment"></p>

Öppna modules/articles/client/views/list-articles.client.view.html.Open modules/articles/client/views/list-articles.client.view.html.

Strax ovanför den avslutande </a>-taggen lägger du till följande rad för att visa comment tillsammans med resterande artikeldata:Just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" ng-bind="article.comment"></p>

Öppna modules/articles/client/views/admin/list-articles.client.view.html.Open modules/articles/client/views/admin/list-articles.client.view.html.

I elementet <div class="list-group"> och strax ovanför den avslutande </a>-taggen lägger du till följande rad för att visa comment tillsammans med resterande artikeldata:Inside the <div class="list-group"> element and just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" data-ng-bind="article.comment"></p>

Öppna modules/articles/client/views/admin/form-article.client.view.html.Open modules/articles/client/views/admin/form-article.client.view.html.

Leta reda på elementet <div class="form-group"> som innehåller skickaknappen som ser ut så här:Find the <div class="form-group"> element that contains the submit button, which looks like this:

<div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>

Precis ovanför taggen lägger du till ytterligare ett <div class="form-group">-element som gör att människor kan redigera fältet comment.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. Det nya elementet bör se ut ungefär så här:Your new element should look like this:

<div class="form-group">
  <label class="control-label" for="comment">Comment</label>
  <textarea name="comment" data-ng-model="vm.article.comment" id="comment" class="form-control" cols="30" rows="10" placeholder="Comment"></textarea>
</div>

Testa ändringarna lokaltTest your changes locally

Spara alla ändringar.Save all your changes.

Gå till det lokala terminalfönstret och testa dina ändringar i produktionsläget igen.In the local terminal window, test your changes in production mode again.

# Bash
gulp prod
NODE_ENV=production node server.js

# Windows PowerShell
gulp prod
$env:NODE_ENV = "production" 
node server.js

Gå till http://localhost:8443 i en webbläsare och kontrollera att du är inloggad.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Välj Administratör > Hantera artiklar och lägg sedan till en artikel genom att välja knappen +.Select Admin > Manage Articles, then add an article by selecting the + button.

Nu ser du den nya textrutan Comment.You see the new Comment textbox now.

Tillagda kommentarsfält till artiklar

I terminalen stoppar du Node.js genom att skriva Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Publicera ändringar till AzurePublish changes to Azure

I det lokala terminalfönstret sparar du ändringarna i Git och push-överför sedan kodändringarna till Azure.In the local terminal window, commit your changes in Git, then push the code changes to Azure.

git commit -am "added article comment"
git push azure master

När git push har slutförts kan du gå till Azure-appen och prova att använda de nya funktionerna.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Modell- och databasändringar som är publicerade i Azure

Om du lade till några artiklar tidigare kan du fortfarande se dem.If you added any articles earlier, you still can see them. Befintliga data i din Cosmos DB förloras inte.Existing data in your Cosmos DB is not lost. Dina uppdateringar till dataschemat håller dessutom dina befintliga data intakta.Also, your updates to the data schema and leaves your existing data intact.

Strömma diagnostikloggarStream diagnostic logs

När Node.js-appen körs i Azure App Service kan du skicka konsolloggarna till din terminal.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. På så sätt kan du få samma diagnostikmeddelanden för att felsöka programfel.That way, you can get the same diagnostic messages to help you debug application errors.

Om du vill starta logg strömningen använder du az webapp log tail kommandot i Cloud Shell.To start log streaming, use the az webapp log tail command in the Cloud Shell.

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

Uppdatera Azure-appen i webbläsaren så hämtas webbtrafik när loggströmningen har startats.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Nu ser du konsolloggarna som skickas till terminalen.You now see console logs piped to your terminal.

Stoppa loggströmningen när som helst genom att skriva Ctrl+C.Stop log streaming at any time by typing Ctrl+C.

Om du vill komma åt konsolloggarna som genereras i din programkod i App Service aktiverar du diagnostisk loggning genom att köra följande kommando i Cloud Shell:To access the console logs generated from inside your application code in App Service, turn on diagnostics logging by running the following command in the Cloud Shell:

az webapp log config --resource-group <resource-group-name> --name <app-name> --application-logging true --level Verbose

Möjliga värden för --level är: Error, Warning, Info och Verbose.Possible values for --level are: Error, Warning, Info, and Verbose. Varje efterföljande nivå omfattar den föregående nivån.Each subsequent level includes the previous level. Exempel: Error omfattar endast felmeddelanden och Verbose omfattar alla meddelanden.For example: Error includes only error messages, and Verbose includes all messages.

När diagnostisk loggning har aktiverats kör du följande kommando för att visa loggströmmen:Once diagnostic logging is turned on, run the following command to see the log stream:

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

Om du inte ser konsolloggarna omedelbart kan du titta efter igen efter 30 sekunder.If you don't see console logs immediately, check again in 30 seconds.

Anteckning

Du kan även granska loggfilerna från din webbläsare via https://<app-name>.scm.azurewebsites.net/api/logs/docker.You can also inspect the log files from the browser at https://<app-name>.scm.azurewebsites.net/api/logs/docker.

Skriv Ctrl+C när som helst för att stoppa loggströmningen.To stop log streaming at any time, type Ctrl+C.

Hantera din Azure-appManage your Azure app

Gå till Azure-portalen om du vill se den app du skapade.Go to the Azure portal to see the app you created.

Klicka på App Services på menyn till vänster och klicka sedan på din Azure-apps namn.From the left menu, click App Services, then click the name of your Azure app.

Portalnavigering till Azure-app

Portalen visar som standard dina webbappar på sidan Översikt.By default, the portal shows your app's Overview page. På den här sidan får du en översikt över hur det går för appen.This page gives you a view of how your app is doing. Här kan du också utföra grundläggande hanteringsåtgärder som att bläddra, stoppa, starta, starta om och ta bort.Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. På flikarna till vänster på sidan kan du se olika konfigurationssidor som du kan öppna.The tabs on the left side of the page show the different configuration pages you can open.

App Service-sidan på Azure Portal

Rensa resurserClean up resources

I de föregående stegen skapade du Azure-resurser i en resursgrupp.In the preceding steps, you created Azure resources in a resource group. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

Det kan några minuter att köra kommandot.This command may take a minute to run.

Nästa stegNext steps

Vad du lärt dig:What you learned:

  • skapa en MongoDB-databas i AzureCreate a MongoDB database in Azure
  • ansluta en Node.js-app till MongoDBConnect a Node.js app to MongoDB
  • distribuera appen till AzureDeploy the app to Azure
  • uppdatera datamodellen och distribuera om appenUpdate the data model and redeploy the app
  • strömma loggar från Azure till terminalenStream logs from Azure to your terminal
  • hantera appen i Azure-portalen.Manage the app in the Azure portal

Gå vidare till nästa självstudie där du får lära dig att mappa ett anpassat DNS-namn till appen.Advance to the next tutorial to learn how to map a custom DNS name to the app.

Eller kolla ut andra resurser:Or, check out other resources: