Tutorial: Criar uma pilha MongoDB, Express, AngularJS e node. js (MEAN) numa máquina virtual do Linux no AzureTutorial: Create a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine in Azure

Este tutorial mostra como criar uma pilha MongoDB, Express, AngularJS e Node.js (MEAN) numa máquina virtual (VM) do Linux no Azure.This tutorial shows you how to implement a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine (VM) in Azure. A pila MEAN que cria permite adicionar, eliminar e listar livros numa base de dados.The MEAN stack that you create enables adding, deleting, and listing books in a database. Saiba como:You learn how to:

  • Criar uma VM do LinuxCreate a Linux VM
  • Instalar o Node.jsInstall Node.js
  • Instalar o MongoDB e configurar o servidorInstall MongoDB and set up the server
  • Instalar o Express e configurar caminhos para o servidorInstall Express and set up routes to the server
  • Aceder a caminhos com o AngularJSAccess the routes with AngularJS
  • Executar a aplicaçãoRun the application

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. Abra o Cloud Shell.Open 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.

Se optar por instalar e utilizar a CLI localmente, este tutorial requer que execute uma versão da CLI do Azure que seja a 2.0.30 ou posterior.If you choose to install and use the CLI locally, this tutorial requires that you are running the Azure CLI version 2.0.30 or later. Executar az --version para localizar a versão.Run az --version to find the version. Se precisar de instalar ou atualizar, veja Instalar a CLI do Azure.If you need to install or upgrade, see Install Azure CLI.

Criar uma VM do LinuxCreate a Linux VM

Crie um grupo de recursos com o comando az group create e crie uma VM do Linux com o comando az vm create.Create a resource group with the az group create command and create a Linux VM with the az vm create command. Um grupo de recursos do Azure é um contentor lógico no qual os recursos do Azure são implementados e geridos.An Azure resource group is a logical container into which Azure resources are deployed and managed.

O exemplo seguinte utiliza a CLI do Azure para criar um grupo de recursos com o nome myResourceGroupMEAN na localização eastus.The following example uses the Azure CLI to create a resource group named myResourceGroupMEAN in the eastus location. É criada uma VM com o nome myVM com chaves SSH caso estas ainda não existam numa localização chave predefinida.A VM is created named myVM with SSH keys if they do not already exist in a default key location. Para utilizar um conjunto específico de chaves, utilize a opção --ssh-key-value.To use a specific set of keys, use the --ssh-key-value option.

az group create --name myResourceGroupMEAN --location eastus
az vm create \
    --resource-group myResourceGroupMEAN \
    --name myVM \
    --image UbuntuLTS \
    --admin-username azureuser \
    --admin-password 'Azure12345678!' \
    --generate-ssh-keys
az vm open-port --port 3300 --resource-group myResourceGroupMEAN --name myVM

Quando a VM tiver sido criada, a CLI do Azure mostra informações semelhantes ao seguinte exemplo:When the VM has been created, the Azure CLI shows information similar to the following example:

{
  "fqdns": "",
  "id": "/subscriptions/{subscription-id}/resourceGroups/myResourceGroupMEAN/providers/Microsoft.Compute/virtualMachines/myVM",
  "location": "eastus",
  "macAddress": "00-0D-3A-23-9A-49",
  "powerState": "VM running",
  "privateIpAddress": "10.0.0.4",
  "publicIpAddress": "13.72.77.9",
  "resourceGroup": "myResourceGroupMEAN"
}

Tome nota do publicIpAddress.Take note of the publicIpAddress. Este endereço é utilizado para aceder à VM.This address is used to access the VM.

Utilize o seguinte comando para criar uma sessão SSH com a VM.Use the following command to create an SSH session with the VM. Certifique-se de que utiliza o endereço IP público correto.Make sure to use the correct public IP address. No exemplo acima, o nosso endereço IP era 13.72.77.9.In our example above our IP address was 13.72.77.9.

ssh azureuser@13.72.77.9

Instalar o Node.jsInstall Node.js

O Node.js é um runtime JavaScript criado no motor JavaScript V8 do Chrome.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. O Node.js é utilizado neste tutorial para configurar as rotas Express e os controladores AngularJS.Node.js is used in this tutorial to set up the Express routes and AngularJS controllers.

Na VM, através da shell de bash que abriu com o SSH, instale o Node.js.On the VM, using the bash shell that you opened with SSH, install Node.js.

sudo apt-get install -y nodejs

Instalar o MongoDB e configurar o servidorInstall MongoDB and set up the server

O MongoDB armazena dados em documentos flexíveis, semelhantes a JSON.MongoDB stores data in flexible, JSON-like documents. Os campos numa base de dados podem variar de documento para documento e a estrutura de dados pode mudar ao longo do tempo.Fields in a database can vary from document to document and data structure can be changed over time. Na nossa aplicação de exemplo, vamos adicionar registos de livros ao MongoDB que contêm o nome do livro, o número ISBN, o autor e o número de páginas.For our example application, we are adding book records to MongoDB that contain book name, isbn number, author, and number of pages.

  1. Na VM, através da shell de bash que abriu com o SSH, defina a chave MongoDB.On the VM, using the bash shell that you opened with SSH, set the MongoDB key.

    sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
    echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
    
  2. Atualize o gestor de pacotes com a chave.Update the package manager with the key.

    sudo apt-get update
    
  3. Instale o MongoDB.Install MongoDB.

    sudo apt-get install -y mongodb
    
  4. Inicie o servidor.Start the server.

    sudo service mongodb start
    
  5. Precisamos também de instalar o pacote body-parser para ajudar-nos a processar o JSON passado em pedidos ao servidor.We also need to install the body-parser package to help us process the JSON passed in requests to the server.

    Instale o gestor de pacotes npm.Install the npm package manager.

    sudo apt-get install npm
    

    Instale o pacote de analisador de corpo.Install the body parser package.

    sudo npm install body-parser
    
  6. Crie uma pasta com o nome Livros e adicione um ficheiro à mesma, que contenha a configuração do servidor Web, com o nome server.js.Create a folder named Books and add a file to it named server.js that contains the configuration for the web server.

    var express = require('express');
    var bodyParser = require('body-parser');
    var app = express();
    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.json());
    require('./apps/routes')(app);
    app.set('port', 3300);
    app.listen(app.get('port'), function() {
        console.log('Server up: http://localhost:' + app.get('port'));
    });
    

Instalar o Express e configurar caminhos para o servidorInstall Express and set up routes to the server

O Express é uma arquitetura de aplicação Web Node.js mínima e flexível que fornece funcionalidades para aplicações Web e móveis.Express is a minimal and flexible Node.js web application framework that provides features for web and mobile applications. O Express é utilizado neste tutorial para enviar informações de livros de e para a nossa base de dados MongoDB.Express is used in this tutorial to pass book information to and from our MongoDB database. O Mongoose proporciona uma solução simples e baseada em esquema para modelar os seus dados de aplicações.Mongoose provides a straight-forward, schema-based solution to model your application data. O Mongoose é utilizado neste tutorial para fornecer um esquema de livros para a base de dados.Mongoose is used in this tutorial to provide a book schema for the database.

  1. Instale o Express e o Mongoose.Install Express and Mongoose.

    sudo npm install express mongoose
    
  2. Na pasta Livros, crie uma pasta com o nome aplicações e adicione um ficheiro com o nome routes.js com os caminhos expressos definidos.In the Books folder, create a folder named apps and add a file named routes.js with the express routes defined.

    var Book = require('./models/book');
    module.exports = function(app) {
      app.get('/book', function(req, res) {
        Book.find({}, function(err, result) {
          if ( err ) throw err;
          res.json(result);
        });
      }); 
      app.post('/book', function(req, res) {
        var book = new Book( {
          name:req.body.name,
          isbn:req.body.isbn,
          author:req.body.author,
          pages:req.body.pages
        });
        book.save(function(err, result) {
          if ( err ) throw err;
          res.json( {
            message:"Successfully added book",
            book:result
          });
        });
      });
      app.delete("/book/:isbn", function(req, res) {
        Book.findOneAndRemove(req.query, function(err, result) {
          if ( err ) throw err;
          res.json( {
            message: "Successfully deleted the book",
            book: result
          });
        });
      });
      var path = require('path');
      app.get('*', function(req, res) {
        res.sendfile(path.join(__dirname + '/public', 'index.html'));
      });
    };
    
  3. Na pasta aplicações, crie uma pasta com o nome modelos e adicione um ficheiro com o nome book.js, com a configuração de modelo de livros definida.In the apps folder, create a folder named models and add a file named book.js with the book model configuration defined.

    var mongoose = require('mongoose');
    var dbHost = 'mongodb://localhost:27017/test';
    mongoose.connect(dbHost);
    mongoose.connection;
    mongoose.set('debug', true);
    var bookSchema = mongoose.Schema( {
      name: String,
      isbn: {type: String, index: true},
      author: String,
      pages: Number
    });
    var Book = mongoose.model('Book', bookSchema);
    module.exports = mongoose.model('Book', bookSchema); 
    

Aceder a caminhos com o AngularJSAccess the routes with AngularJS

O AngularJS fornece uma arquitetura Web para criar vistas dinâmicas nas suas aplicações Web.AngularJS provides a web framework for creating dynamic views in your web applications. Neste tutorial, utilizamos o AngularJS para ligar a nossa página Web ao Express e efetuar ações na nossa base de dados de livros.In this tutorial, we use AngularJS to connect our web page with Express and perform actions on our book database.

  1. Reverta o diretório para Livros (cd ../..) e, em seguida, crie uma pasta com o nome público e adicione um ficheiro com o nome script.js com a configuração de controlador definida.Change the directory back up to Books (cd ../..), and then create a folder named public and add a file named script.js with the controller configuration defined.

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http( {
        method: 'GET',
        url: '/book'
      }).then(function successCallback(response) {
        $scope.books = response.data;
      }, function errorCallback(response) {
        console.log('Error: ' + response);
      });
      $scope.del_book = function(book) {
        $http( {
          method: 'DELETE',
          url: '/book/:isbn',
          params: {'isbn': book.isbn}
        }).then(function successCallback(response) {
          console.log(response);
        }, function errorCallback(response) {
          console.log('Error: ' + response);
        });
      };
      $scope.add_book = function() {
        var body = '{ "name": "' + $scope.Name + 
        '", "isbn": "' + $scope.Isbn +
        '", "author": "' + $scope.Author + 
        '", "pages": "' + $scope.Pages + '" }';
        $http({
          method: 'POST',
          url: '/book',
          data: body
        }).then(function successCallback(response) {
          console.log(response);
        }, function errorCallback(response) {
          console.log('Error: ' + response);
        });
      };
    });
    
  2. Na pasta público, crie um ficheiro com o nome index.html com a página Web definida.In the public folder, create a file named index.html with the web page defined.

    <!doctype html>
    <html ng-app="myApp" ng-controller="myCtrl">
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
      </head>
      <body>
        <div>
          <table>
            <tr>
              <td>Name:</td> 
              <td><input type="text" ng-model="Name"></td>
            </tr>
            <tr>
              <td>Isbn:</td>
              <td><input type="text" ng-model="Isbn"></td>
            </tr>
            <tr>
              <td>Author:</td> 
              <td><input type="text" ng-model="Author"></td>
            </tr>
            <tr>
              <td>Pages:</td>
              <td><input type="number" ng-model="Pages"></td>
            </tr>
          </table>
          <button ng-click="add_book()">Add</button>
        </div>
        <hr>
        <div>
          <table>
            <tr>
              <th>Name</th>
              <th>Isbn</th>
              <th>Author</th>
              <th>Pages</th>
            </tr>
            <tr ng-repeat="book in books">
              <td><input type="button" value="Delete" data-ng-click="del_book(book)"></td>
              <td>{{book.name}}</td>
              <td>{{book.isbn}}</td>
              <td>{{book.author}}</td>
              <td>{{book.pages}}</td>
            </tr>
          </table>
        </div>
      </body>
    </html>
    

Executar a aplicaçãoRun the application

  1. Reverta o diretório para Livros (cd ..) e inicie o servidor ao executar este comando:Change the directory back up to Books (cd ..) and start the server by running this command:

    nodejs server.js
    
  2. Abra um browser Web no endereço que registou para a VM.Open a web browser to the address that you recorded for the VM. Por exemplo, http://13.72.77.9:3300.For example, http://13.72.77.9:3300. Deverá ver algo semelhante à seguinte página:You should see something like the following page:

    Registo de livros

  3. Introduza dados nas caixas de texto e clique em Adicionar.Enter data into the textboxes and click Add. Por exemplo:For example:

    Adicionar registo de livros

  4. Após atualizar a página, deverá ver algo parecido com esta página:After refreshing the page, you should see something like this page:

    Listar registos de livros

  5. Pode clicar em Eliminar e remover o registo de livros da base de dados.You could click Delete and remove the book record from the database.

Passos SeguintesNext steps

Neste tutorial, criou uma aplicação Web que acompanha os registos de livros através de uma pilha MEAN numa VM do Linux.In this tutorial, you created a web application that keeps track of book records using a MEAN stack on a Linux VM. Aprendeu a:You learned how to:

  • Criar uma VM do LinuxCreate a Linux VM
  • Instalar o Node.jsInstall Node.js
  • Instalar o MongoDB e configurar o servidorInstall MongoDB and set up the server
  • Instalar o Express e configurar caminhos para o servidorInstall Express and set up routes to the server
  • Aceder a caminhos com o AngularJSAccess the routes with AngularJS
  • Executar a aplicaçãoRun the application

Avance para o tutorial seguinte para aprender a proteger os servidores Web com certificados SSL.Advance to the next tutorial to learn how to secure web servers with SSL certificates.