Tutorial: Criar um aplicativo node. js e MongoDB no AzureTutorial: Build a Node.js and MongoDB app in Azure

Nota

Este artigo implementa uma aplicação no Serviço de Aplicações no Windows.This article deploys an app to App Service on Windows. Para implantar o serviço de aplicativo no Linux, consulte compilar um aplicativo node. js e MongoDB no serviço de Azure app no Linux.To deploy to App Service on Linux, see Build a Node.js and MongoDB app in Azure App Service on Linux.

O serviço de Azure App fornece um serviço de hospedagem na Web altamente escalonável e com aplicação de patch automática.Azure App Service provides a highly scalable, self-patching web hosting service. Este tutorial mostra como criar um aplicativo node. js no serviço de aplicativo e conectá-lo a um banco de dados MongoDB.This tutorial shows how to create a Node.js app in App Service and connect it to a MongoDB database. Quando terminar, terá uma aplicação MEAN (MongoDB, Express, AngularJS e Node.js) em execução no Serviço de Aplicações do Azure.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. Para obter simplicidade, a aplicação de exemplo utiliza a estrutura Web MEAN.js.For simplicity, the sample application uses the MEAN.js web framework.

Aplicação MEAN.js em execução no Serviço de Aplicações do Azure

O que irá aprender:What you'll learn:

  • Criar uma base de dados MongoDB no AzureCreate a MongoDB database in Azure
  • Ligar uma aplicação Node.js ao MongoDBConnect a Node.js app to MongoDB
  • Implementar a aplicação no AzureDeploy the app to Azure
  • Atualizar o modelo de dados e voltar a implementar a aplicaçãoUpdate the data model and redeploy the app
  • Transmitir os registos de diagnóstico em fluxo a partir do AzureStream diagnostic logs from Azure
  • Gerir a aplicação no portal do AzureManage the app in the Azure portal

Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Pré-requisitosPrerequisites

Para concluir este tutorial:To complete this tutorial:

  1. Instalar o GitInstall Git
  2. Instale o Node.js e o NPMInstall Node.js and NPM
  3. Instalar Bower (exigido pelo MEAN.js)Install Bower (required by MEAN.js)
  4. Instalar Gulp.js (exigido pelo MEAN.js)Install Gulp.js (required by MEAN.js)
  5. Instalar e executar a Edição de Comunidade do MongoDBInstall and run MongoDB Community Edition

Testar MongoDB localTest local MongoDB

Abra a janela do terminal e cd para o diretório bin da sua instalação do MongoDB.Open the terminal window and cd to the bin directory of your MongoDB installation. Pode utilizar esta janela de terminal para executar todos os comandos deste tutorial.You can use this terminal window to run all the commands in this tutorial.

Execute mongo no terminal para ligar ao servidor MongoDB local.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Se a ligação for bem-sucedida, então a base de dados do MongoDB já está em execução.If your connection is successful, then your MongoDB database is already running. Caso contrário, certifique-se de que a base de dados do MongoDB local é iniciada através dos passos indicados em Instalar Edição da Comunidade do MongoDB.If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Muitas vezes, mesmo com o MongoDB instalado, continua a precisar de iniciá-lo ao executar o mongod.Often, MongoDB is installed, but you still need to start it by running mongod.

Quando tiver terminado de testar a sua base de dados do MongoDB, escreva Ctrl+C no terminal.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

Criar aplicação do Node.js localCreate local Node.js app

Neste passo, vai configurar o projeto Node.js local.In this step, you set up the local Node.js project.

Clonar a aplicação de exemploClone the sample application

Na janela de terminal, cd num diretório de trabalho.In the terminal window, cd to a working directory.

Execute o seguinte comando para clonar o repositório de exemplo.Run the following command to clone the sample repository.

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

Este repositório de exemplo inclui uma cópia do repositório do MEAN.js.This sample repository contains a copy of the MEAN.js repository. É modificado para ser executado no Serviço de Aplicações (para obter mais informações, veja o ficheiro README do repositório do MEAN.js).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Executar a aplicaçãoRun the application

Execute os seguintes comandos para instalar os pacotes necessários e iniciar a aplicação.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Quando a aplicação estiver totalmente carregada, verá algo semelhante à mensagem seguinte:When the app is fully loaded, you see something similar to the following message:

--
MEAN.JS - Development Environment

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

Navegue para http://localhost:3000 num browser.Navigate to http://localhost:3000 in a browser. Clique em Inscrever no menu superior e crie um utilizador de teste.Click Sign Up in the top menu and create a test user.

A aplicação MEAN.js de exemplo armazena os dados do utilizador na base de dados.The MEAN.js sample application stores user data in the database. Se criar um utilizador e iniciar sessão com êxito, então a aplicação está a escrever dados na base de dados do MongoDB local.If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

A aplicação MEAN.js estabelece ligação com êxito ao MongoDB

Selecione Administrador > Gerir Artigos para adicionar alguns artigos.Select Admin > Manage Articles to add some articles.

Para parar o Node.js em qualquer altura, prima Ctrl+C no terminal.To stop Node.js at any time, press Ctrl+C in the terminal.

Nota

O Início Rápido do Node.js menciona a necessidade de um web.config no diretório da aplicação de raiz.The Node.js quickstart mentions the need for a web.config in the root app directory. No entanto, neste tutorial, este ficheiro web.config será automaticamente gerado pelo Serviço de Aplicações ao implementar os ficheiros com a implementação de Git local em vez da implementação de ficheiros ZIP.However, in this tutorial, this web.config file will be automatically generated by App Service when you deploy your files using local Git deployment instead of ZIP file deployment.

Utilizar o Azure Cloud ShellUse Azure Cloud Shell

O Azure hospeda Azure Cloud Shell, um ambiente de shell interativo que você pode usar por meio de seu navegador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell permite que você use bash o PowerShell ou o para trabalhar com os serviços do Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Você pode usar os comandos pré-instalados Cloud Shell para executar o código neste artigo sem precisar instalar nada em seu ambiente local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Para iniciar o Azure Cloud Shell:To launch Azure Cloud Shell:

OpçãoOption Exemplo/linkExample/Link
Selecione Experimentar no canto superior direito de um bloco de código.Select Try It in the upper-right corner of a code block. A seleção de try não copia automaticamente o código para Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemplo de teste para Azure Cloud Shell
Vá para https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir Cloud Shell em seu navegador.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell em uma nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus superior direita na portal do Azure.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Botão Cloud Shell no portal do Azure

Para executar o código neste artigo em Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Iniciar Cloud Shell.Launch Cloud Shell.

  2. Selecione o botão copiar em um bloco de código para copiar o código.Select the Copy button on a code block to copy the code.

  3. Cole o código na sessão de Cloud shell com Ctrl+Shift+v no Windows e Linux, ou cmd+Shift+v no MacOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Pressione Enter para executar o código.Press Enter to run the code.

Criar produção do MongoDBCreate production MongoDB

Neste passo, vai criar uma Base de Dados MongoDB no Azure.In this step, you create a MongoDB database in Azure. Quando a aplicação for implementada no Azure, utiliza esta base de dados na cloud.When your app is deployed to Azure, it uses this cloud database.

Para o MongoDB, este tutorial utiliza o Azure Cosmos DB.For MongoDB, this tutorial uses Azure Cosmos DB. O Cosmos DB suporta ligações de cliente do MongoDB.Cosmos DB supports MongoDB client connections.

Criar um grupo de recursosCreate a resource group

Um grupo de recursos é um contentor lógico em que os recursos do Azure, como aplicações Web, bases de dados e contas de armazenamento são implementados e geridos.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Por exemplo, pode optar por eliminar todo o grupo de recursos num único passo simples mais tarde.For example, you can choose to delete the entire resource group in one simple step later.

No Cloud Shell, crie um grupo de recursos com o comando az group create.In the Cloud Shell, create a resource group with the az group create command. O exemplo seguinte cria um grupo de recursos com o nome myResourceGroup, na localização Europa Ocidental.The following example creates a resource group named myResourceGroup in the West Europe location. Para ver todas as localizações suportadas para o Serviço de Aplicações no escalão Gratuito, execute o comando 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"

Geralmente, o grupo de recursos e os recursos são criados numa região perto de si.You generally create your resource group and the resources in a region near you.

Quando o comando for concluído, uma saída JSON mostra as propriedades do grupo de recursos.When the command finishes, a JSON output shows you the resource group properties.

Criar uma conta do Cosmos DBCreate a Cosmos DB account

Nota

A criação das bases de dados do Azure Cosmos DB na sua própria subscrição do Azure neste tutorial não acarreta custos.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Para utilizar uma conta gratuita do Azure Cosmos DB durante sete dias, pode utilizar a experiência Experimentar o Azure Cosmos DB gratuitamente.To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. Basta clicar no botão Criar no mosaico MongoDB para criar uma base de dados do MongoDB gratuita no Azure.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. Após a criação da base de dados, navegue para a cadeia de ligação no portal e obtenha a cadeia de ligação do Azure Cosmos DB para utilizar mais à frente no tutorial.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.

No Cloud Shell, crie uma conta do Cosmos DB com o comando az cosmosdb create.In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

No seguinte comando, substitua um nome do Cosmos DB exclusivo pelo marcador de posição <cosmosdb_name> .In the following command, substitute a unique Cosmos DB name for the <cosmosdb_name> placeholder. Este nome é utilizado como parte do ponto final do Cosmos DB, https://<cosmosdb_name>.documents.azure.com/, por isso, o nome tem de ser exclusivo em todas as contas Cosmos DB no 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. O nome só pode conter letras minúsculas, números, o caráter hífen (-) e tem de ter entre três e 50 carateres.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

O parâmetro --kind MongoDB permite ligações de cliente da MongoDB.The --kind MongoDB parameter enables MongoDB client connections.

Após criar a conta do Cosmos DB, a CLI do Azure mostra informações semelhantes ao exemplo seguinte: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 >
}

Ligar aplicação ao MongoDB de produçãoConnect app to production MongoDB

Neste passo, vai ligar a aplicação de exemplo MEAN.js a uma base de dados do Cosmos DB que acabou de criar, com uma cadeia de ligação do MongoDB.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Obter a chave de base de dadosRetrieve the database key

Para ligar à base de dados do Cosmos DB, precisa da chave da base de dados.To connect to the Cosmos DB database, you need the database key. No Cloud Shell, utilize o comando az cosmosdb list-keys para obter a chave primária.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

A CLI do Azure apresenta informações semelhantes ao exemplo seguinte:The Azure CLI shows information similar to the following example:

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

Copie o valor de primaryMasterKey. Estas informações são necessárias no passo seguinte.You need this information in the next step.

Configurar a cadeia de ligação na aplicação Node.jsConfigure the connection string in your Node.js application

No seu repositório do MEAN.js local, na pasta config/env/ , crie um ficheiro denominado local-production.js.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. Por predefinição, o .gitignore está configurado para manter este ficheiro fora do repositório.By default, .gitignore is configured to keep this file out of the repository.

Copie o código seguinte para o mesmo.Copy the following code into it. Confirme que substitui os dois marcadores de posição <cosmosdb_name> pelo nome da base de dados do Cosmos DB e substitua o marcador de posição <primary_master_key> pela chave que copiou no passo anterior.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'
  }
};

A opção ssl=true é necessária porque o Cosmos DB precisa do SSL.The ssl=true option is required because Cosmos DB requires SSL.

Guarde as alterações.Save your changes.

Teste a aplicação no modo de produçãoTest the application in production mode

Execute o seguinte comando para minimizar e agrupar scripts para o ambiente de produção.Run the following command to minify and bundle scripts for the production environment. Este processo gera os ficheiros necessários para o ambiente de produção.This process generates the files needed by the production environment.

gulp prod

Execute o seguinte comando para utilizar a cadeia de ligação configurada em config/env/local-production.js.Run the following command to use the connection string you configured in config/env/local-production.js.

# Bash
NODE_ENV=production node server.js

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

NODE_ENV=production define a variável de ambiente que informa o Node.js para ser executado no ambiente de produção.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js inicia o servidor do Node.js com server.js na raiz do repositório.node server.js starts the Node.js server with server.js in your repository root. Esta é a forma que a sua aplicação do Node.js é carregada no Azure.This is how your Node.js application is loaded in Azure.

Assim que a aplicação é carregada, certifique-se de que está em execução no ambiente de produção:When the app is loaded, check to make sure that it's running in the production environment:

--
MEAN.JS

Environment:     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

Navegue para http://localhost:8443 num browser.Navigate to http://localhost:8443 in a browser. Clique em Inscrever no menu superior e crie um utilizador de teste.Click Sign Up in the top menu and create a test user. Se criar um utilizador e iniciar sessão com êxito, então a aplicação está a escrever dados na base de dados do Cosmos DB no Azure.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

No terminal, pare o Node.js ao escrever Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Implementar a aplicação no AzureDeploy app to Azure

Neste passo, vai implementar a aplicação Node.js ligada ao MongoDB no Serviço de Aplicações do Azure.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Configurar um utilizador de implementaçãoConfigure a deployment user

FTP e local Git podem implementar uma aplicação web do Azure ao utilizar um utilizador de implementação.FTP and local Git can deploy to an Azure web app by using a deployment user. Depois de configurar o seu utilizador de implementação, pode usá-lo para todas as suas implementações do Azure.Once you configure your deployment user, you can use it for all your Azure deployments. O nome de utilizador de implementação ao nível da conta e palavra-passe são diferentes das credenciais da sua subscrição do Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Para configurar o utilizador de implementação, execute o conjunto de usuários do az webapp deployment comando no Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Substitua <nome de utilizador > e <palavra-passe > com um nome de utilizador de utilizador de implementação e a palavra-passe.Replace <username> and <password> with a deployment user username and password.

  • O nome de utilizador tem de ser exclusivo no Azure e para local Git pushes, não pode conter o ' @' símbolo.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • A palavra-passe tem de ser, pelo menos, oito carateres de comprimento, com dois dos seguintes três elementos: letras, números e símbolos.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>

A saída JSON mostra a palavra-passe como null.The JSON output shows the password as null. Se obtiver o erro 'Conflict'. Details: 409, altere o nome de utilizador.If you get a 'Conflict'. Details: 409 error, change the username. Se obtiver o 'Bad Request'. Details: 400 erro, utilize uma palavra-passe mais forte.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Registe o seu nome de utilizador e palavra-passe para utilizar para implementar as suas aplicações web.Record your username and password to use to deploy your web apps.

Crie um plano do Serviço de AplicaçõesCreate an App Service plan

No Cloud Shell, crie um plano do Serviço de Aplicações com o comando az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

O exemplo seguinte cria um plano do Serviço de Aplicações com o nome myAppServicePlan, que utiliza o escalão de preços Gratuito.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

Quando o plano do Serviço de Aplicações tiver sido criado, a CLI do Azure mostra informações semelhantes ao seguinte exemplo: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
} 

Criar uma aplicação WebCreate a web app

Crie uma aplicação Web no plano do Serviço de Aplicações myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

Na Cloud Shell, pode utilizar o comando az webapp create.In the Cloud Shell, you can use the az webapp create command. No exemplo a seguir, substitua <app-name> com um nome de aplicação globalmente exclusivo (os carateres válidos são a-z, 0-9 e -).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). O runtime está definido como NODE|6.9.The runtime is set to NODE|6.9. Para ver todos os runtimes suportados, execute 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

Quando a aplicação Web tiver sido criada, a CLI do Azure mostra informações semelhantes ao seguinte exemplo: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. >
}

Criou uma aplicação Web vazia, com a implementação de git ativada.You’ve created an empty web app, with git deployment enabled.

Nota

O URL do Git remoto é apresentado na propriedade deploymentLocalGitUrl, com o formato 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. Guarde este URL, uma vez que vai precisar dele mais tarde.Save this URL as you need it later.

Configurar uma variável de ambienteConfigure an environment variable

Por predefinição, o projeto do MEAN.js mantém o config/env/local-production.js fora do repositório do Git.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. Portanto, para seu aplicativo do Azure, você usa as configurações do aplicativo para definir sua cadeia de conexão do MongoDB.So for your Azure app, you use app settings to define your MongoDB connection string.

Para configurar as definições da aplicação, utilize o comando az webapp config appsettings set no Cloud Shell.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

O exemplo a seguir define uma configuração de aplicativo MONGODB_URI em seu aplicativo do Azure.The following example configures a MONGODB_URI app setting in your Azure app. Substitua os marcadores de posição <app_name> , <cosmosdb_name> e <primary_master_key> .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"

No código do Node.js, aceda a esta definição de aplicação com process.env.MONGODB_URI, tal como faria em qualquer variável de ambiente.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

No seu repositório do MEAN.js local, abra config/env/production.js (não config/env/local-production.js), que tem uma configuração específica de ambiente de produção.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. A aplicação do MEAN.js predefinida já está configurada para utilizar a variável de ambiente MONGODB_URI que criou.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

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

Enviar para o Azure a partir do GitPush to Azure from Git

Regresse à janela de terminal local e adicione um remoto do Azure ao seu repositório Git local.Back in the local terminal window, add an Azure remote to your local Git repository. Substitua <deploymentLocalGitUrl-from-create-step> pelo URL do Git remoto que guardou em Criar uma aplicação Web.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>

Envie para o remoto do Azure para implementar a sua aplicação com o comando seguinte.Push to the Azure remote to deploy your app with the following command. Quando lhe forem pedidas credenciais pelo Gestor de credenciais do Git, certifique-se de que introduz as credenciais que criou em configurar um utilizador de implementação, não as credenciais de que utiliza para iniciar sessão no portal do Azure.When prompted for credentials by Git Credential Manager, make sure that 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

Este comando pode demorar alguns minutos a ser executado.This command may take a few minutes to run. Ao executar, apresenta informações semelhantes ao exemplo seguinte: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

Poderá reparar que o processo de implementação executa o Gulp depois de npm install.You may notice that the deployment process runs Gulp after npm install. O Serviço de Aplicações não executa tarefas do Gulp ou do Grunt durante a implementação, pelo que este repositório de exemplo tem dois ficheiros adicionais no diretório raiz para a permitir: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:

  • .implementação - este ficheiro diz ao Serviço de Aplicações para executar bash deploy.sh como o script de implementação personalizado..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh - o script de implementação personalizado.deploy.sh - The custom deployment script. Se vir o ficheiro, verá que executa gulp prod a seguir a npm install e bower install.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Pode utilizar esta abordagem para adicionar qualquer passo à sua implementação baseada no Git.You can use this approach to add any step to your Git-based deployment. Se você reiniciar seu aplicativo do Azure a qualquer momento, o serviço de aplicativo não executará novamente essas tarefas de automação.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks.

Navegue até o aplicativo do AzureBrowse to the Azure app

Navegue até o aplicativo implantado usando seu navegador da Web.Browse to the deployed app using your web browser.

http://<app_name>.azurewebsites.net 

Clique em Inscrever no menu superior e crie um utilizador de teste.Click Sign Up in the top menu and create a dummy user.

Se concluir com êxito e a aplicação iniciar sessão automaticamente no utilizador criado, então a aplicação do MEAN.js no Azure tem conectividade à base de dados do MongoDB (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.

Aplicação MEAN.js em execução no Serviço de Aplicações do Azure

Selecione Administrador > Gerir Artigos para adicionar alguns artigos.Select Admin > Manage Articles to add some articles.

Parabéns!Congratulations! Está a executar uma aplicação Node.js condicionada por dados no Serviço de Aplicações do Azure.You're running a data-driven Node.js app in Azure App Service.

Atualizar o modelo de dados e voltar a implementarUpdate data model and redeploy

Neste passo, altera o modelo de dados article e publica a sua alteração no Azure.In this step, you change the article data model and publish your change to Azure.

Atualizar o modelo de dadosUpdate the data model

Abra módules/artigos/servidor/modelos/article.server.model.js.Open modules/articles/server/models/article.server.model.js.

No ArticleSchema, adicione um tipo String denominado comment.In ArticleSchema, add a String type called comment. Quando tiver terminado, o código de esquema deverá este aspeto: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
  }
});

Atualizar o código de artigosUpdate the articles code

Atualize o resto do seu código articles para utilizar comment.Update the rest of your articles code to use comment.

Existem cinco ficheiros que tem de modificar: o controlador de servidor e as vistas de quatro clientes.There are five files you need to modify: the server controller and the four client views.

Abra módulos/artigos/servidor/controladores/articles.server.controller.js.Open modules/articles/server/controllers/articles.server.controller.js.

Na função update, adicione uma atribuição de article.comment.In the update function, add an assignment for article.comment. O código seguinte mostra a função update concluída: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;

  ...
};

Abra modules/artigos/cliente/vistas/view-article.client.view.html.Open modules/articles/client/views/view-article.client.view.html.

Exatamente acima da etiqueta de fecho </section>, adicione a seguinte linha para apresentar comment juntamente com o resto dos dados do artigo: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>

Abra modules/artigos/cliente/vistas/list-articles.client.view.html.Open modules/articles/client/views/list-articles.client.view.html.

Exatamente acima da etiqueta de fecho </a>, adicione a seguinte linha para apresentar comment juntamente com o resto dos dados do artigo: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>

Abra módulos/artigos/cliente/vistas/administrador/list-articles.client.view.html.Open modules/articles/client/views/admin/list-articles.client.view.html.

No interior do elemento comment e imediatamente acima da etiqueta de fecho <div class="list-group">, adicione a seguinte linha para apresentar </a> juntamente com o resto dos dados do artigo: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>

Abra módulos/artigos/cliente/vistas/administrador/form-article.client.view.html.Open modules/articles/client/views/admin/form-article.client.view.html.

Encontre o elemento <div class="form-group"> que contém o botão para submeter, semelhante ao seguinte: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>

Imediatamente acima desta etiqueta, adicione outro elemento <div class="form-group"> que permite que as pessoas editem o campo comment.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. O novo elemento deve ter o seguinte aspeto: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>

Testar as alterações localmenteTest your changes locally

Guarde todas as alterações.Save all your changes.

Na janela do terminal local, teste novamente as alterações no modo de produção.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

Navegue para http://localhost:8443 num browser e certifique-se de que tem sessão iniciada.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Selecione Administrador > Gerir Artigos e adicione um artigo ao selecionar o botão + .Select Admin > Manage Articles, then add an article by selecting the + button.

Pode ver a nova caixa de texto Comment agora.You see the new Comment textbox now.

Campo de comentário adicionado aos Artigos

No terminal, pare o Node.js ao escrever Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Publicar alterações no AzurePublish changes to Azure

Na janela terminal local, consolide as suas alterações no Git e envie as alterações ao código para o 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

Quando o git push for concluído, navegue até seu aplicativo do Azure e experimente a nova funcionalidade.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Alterações ao modelo e à base de dados publicadas no Azure

Se tiver adicionado quaisquer artigos anteriormente, ainda pode vê-los.If you added any articles earlier, you still can see them. Os dados existentes no Cosmos DB não se perdem.Existing data in your Cosmos DB is not lost. Além disso, atualiza o esquema de dados e mantém os dados existentes intactos.Also, your updates to the data schema and leaves your existing data intact.

Transmitir registos de diagnósticoStream diagnostic logs

Enquanto executa a aplicação Node.js no Serviço de Aplicações do Azure, pode obter os registos de consola direcionados para o seu terminal.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. Dessa forma, pode obter as mesmas mensagens de diagnóstico para ajudar a depurar erros de aplicações.That way, you can get the same diagnostic messages to help you debug application errors.

Para iniciar a transmissão em fluxo do registo, utilize o comando az webapp log tail no 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

Depois que o streaming de log for iniciado, atualize seu aplicativo do Azure no navegador para obter algum tráfego da Web.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Verá então os registos da consola direcionados para o seu terminal.You now see console logs piped to your terminal.

Pare a transmissão em fluxo do registo em qualquer altura, ao escrever Ctrl+C.Stop log streaming at any time by typing Ctrl+C.

Gerenciar seu aplicativo do AzureManage your Azure app

Vá para a portal do Azure para ver o aplicativo que você criou.Go to the Azure portal to see the app you created.

No menu à esquerda, clique em serviços de aplicativose, em seguida, clique no nome do seu aplicativo do Azure.From the left menu, click App Services, then click the name of your Azure app.

Navegação do portal para a aplicação do Azure

Por padrão, o portal mostra a página de visão geral do aplicativo.By default, the portal shows your app's Overview page. Esta página proporciona-lhe uma vista do desempenho da aplicação.This page gives you a view of how your app is doing. Aqui, também pode realizar tarefas de gestão básicas, como navegar, parar, iniciar, reiniciar e eliminar.Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. Os separadores no lado esquerdo da página mostram as várias páginas de configuração que pode abrir.The tabs on the left side of the page show the different configuration pages you can open.

Página Serviço de Aplicações no portal do Azure

Limpar recursosClean up resources

Nos passos anteriores, criou os recursos do Azure num grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos: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

Este comando pode demorar alguns minutos a ser executado.This command may take a minute to run.

Passos seguintesNext steps

O que aprendeu:What you learned:

  • Criar uma base de dados MongoDB no AzureCreate a MongoDB database in Azure
  • Ligar uma aplicação Node.js ao MongoDBConnect a Node.js app to MongoDB
  • Implementar a aplicação no AzureDeploy the app to Azure
  • Atualizar o modelo de dados e voltar a implementar a aplicaçãoUpdate the data model and redeploy the app
  • Transmitir os registos do Azure para o seu terminalStream logs from Azure to your terminal
  • Gerir a aplicação no portal do AzureManage the app in the Azure portal

Avance para o tutorial seguinte para aprender a mapear um nome DNS personalizado para a aplicação.Advance to the next tutorial to learn how to map a custom DNS name to the app.