Tutorial: Creación de una pila de MongoDB, Express, AngularJS y Node.js (MEAN) en una máquina virtual Linux en AzureTutorial: Create a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine in Azure

En este tutorial se muestra cómo implementar una pila de MongoDB, Express, AngularJS y Node.js (MEAN) en una máquina virtual Linux en 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. La pila MEAN que crea permite agregar, eliminar y enumerar los libros en una base de datos.The MEAN stack that you create enables adding, deleting, and listing books in a database. Aprenderá a:You learn how to:

  • Creación de una máquina virtual LinuxCreate a Linux VM
  • Instalación de Node.jsInstall Node.js
  • Instalación de MongoDB y configuración del servidorInstall MongoDB and set up the server
  • Instalación de Express y configuración de rutas para el servidorInstall Express and set up routes to the server
  • Acceso a las rutas con AngularJSAccess the routes with AngularJS
  • Ejecución de la aplicaciónRun the application

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell le permite usar bash o PowerShell para trabajar con servicios de Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno 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 Azure Cloud Shell:To launch Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Probarlo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Probar no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell en una nueva ventanaLaunch Cloud Shell in a new window
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Abra Cloud Shell.Open Cloud Shell.
  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.
  3. Pegue el código en la sesión de Cloud Shell con Ctrl+Mayús+V en Windows y Linux, o Cmd+Mayús+V en macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Presione ENTRAR para ejecutar el código.Press Enter to run the code.

Si decide instalar y usar la CLI localmente, en este tutorial es preciso que ejecute la CLI de Azure de la versión 2.0.30, u otra 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. Ejecute az --version para encontrar la versión.Run az --version to find the version. Si necesita instalarla o actualizarla, vea Instalación de la CLI de Azure.If you need to install or upgrade, see Install Azure CLI.

Creación de una máquina virtual LinuxCreate a Linux VM

Cree un grupo de recursos con el comando az group create y una máquina virtual Linux con el 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. Un grupo de recursos de Azure es un contenedor lógico en el que se implementan y se administran los recursos de Azure.An Azure resource group is a logical container into which Azure resources are deployed and managed.

En el ejemplo siguiente, se usa la CLI de Azure para crear un grupo de recursos denominado myResourceGroupMEAN en la ubicación eastus.The following example uses the Azure CLI to create a resource group named myResourceGroupMEAN in the eastus location. También se crea una máquina virtual denominada myVM con claves SSH, si aún no existen en una ubicación de claves predeterminada.A VM is created named myVM with SSH keys if they do not already exist in a default key location. Para utilizar un conjunto específico de claves, utilice la opción --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

Cuando se haya creado la máquina virtual, la CLI de Azure mostrará información similar a la del ejemplo siguiente: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"
}

Anote el valor de publicIpAddress.Take note of the publicIpAddress. Esta dirección se utiliza para tener acceso a la máquina virtual.This address is used to access the VM.

Use el siguiente comando para crear una sesión de SSH con la máquina virtual.Use the following command to create an SSH session with the VM. Asegúrese de usar la dirección IP pública correcta.Make sure to use the correct public IP address. En el ejemplo anterior, la dirección IP era 13.72.77.9.In our example above our IP address was 13.72.77.9.

ssh azureuser@13.72.77.9

Instalación de Node.jsInstall Node.js

Node.js es un entorno de tiempo de ejecución de JavaScript integrado en el motor de V8 JavaScript de Chrome.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js se utiliza en este tutorial para configurar las rutas de Express y los controladores de AngularJS.Node.js is used in this tutorial to set up the Express routes and AngularJS controllers.

En la máquina virtual, mediante el shell de bash que abrió con SSH, instale Node.js.On the VM, using the bash shell that you opened with SSH, install Node.js.

sudo apt-get install -y nodejs

Instalación de MongoDB y configuración del servidorInstall MongoDB and set up the server

MongoDB almacena los datos en documentos flexibles, similares a JSON.MongoDB stores data in flexible, JSON-like documents. Los campos de una base de datos pueden variar entre documentos y la estructura de datos puede cambiarse con el tiempo.Fields in a database can vary from document to document and data structure can be changed over time. En nuestra aplicación de ejemplo, vamos a agregar registros de libros para MongoDB que contienen el nombre del libro, el número de ISBN, el autor y el 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. En la máquina virtual, con el shell de bash que abrió con SSH, establezca la clave de 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. Actualice el administrador de paquetes con la clave.Update the package manager with the key.

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

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

    sudo service mongodb start
    
  5. También es necesario instalar el paquete body-parser para ayudarnos a procesar el JSON que se pasa en las solicitudes al servidor.We also need to install the body-parser package to help us process the JSON passed in requests to the server.

    Instale el administrador de paquetes npm.Install the npm package manager.

    sudo apt-get install npm
    

    Instale el paquete del analizador de cuerpos.Install the body parser package.

    sudo npm install body-parser
    
  6. Cree una carpeta denominada Books y agréguele un archivo denominado server.js que contenga la configuración para el servidor web.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'));
    });
    

Instalación de Express y configuración de rutas para el servidorInstall Express and set up routes to the server

Express es una plataforma mínima y flexible para aplicaciones web que proporciona características para aplicaciones web y móviles.Express is a minimal and flexible Node.js web application framework that provides features for web and mobile applications. Express se utiliza en este tutorial para pasar la información de los libros hacia y desde la base de datos de MongoDB.Express is used in this tutorial to pass book information to and from our MongoDB database. Mongoose proporciona una solución sencilla, basada en el esquema para modelar los datos de las aplicaciones.Mongoose provides a straight-forward, schema-based solution to model your application data. Mongoose se utiliza en este tutorial para proporcionar un esquema de libro para la base de datos.Mongoose is used in this tutorial to provide a book schema for the database.

  1. Instale Express y Mongoose.Install Express and Mongoose.

    sudo npm install express mongoose
    
  2. En la carpeta Books, cree una carpeta denominada apps y agregue un archivo denominado routes.js con las rutas de Express definidas.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. En la carpeta apps, cree una carpeta denominada models y agregue un archivo denominado books.js con la configuración del modelo de libro 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); 
    

Acceso a las rutas con AngularJSAccess the routes with AngularJS

AngularJS proporciona una plataforma web para crear vistas dinámicas en las aplicaciones web.AngularJS provides a web framework for creating dynamic views in your web applications. En este tutorial, usamos AngularJS para conectar nuestra página web con Express y realizar acciones en nuestra base de datos de libros.In this tutorial, we use AngularJS to connect our web page with Express and perform actions on our book database.

  1. Cambie el directorio de nuevo a Books (cd ../..) y, a continuación, cree una carpeta denominada public y agregue un archivo denominado script.js con la configuración del 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. En la carpeta public, cree un archivo denominado index.html con la 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>
    

Ejecución de la aplicaciónRun the application

  1. Cambie el directorio de nuevo a books (cd ..) e inicie el servidor ejecutando este comando:Change the directory back up to Books (cd ..) and start the server by running this command:

    nodejs server.js
    
  2. Abra un explorador web con la dirección que registró para la máquina virtual.Open a web browser to the address that you recorded for the VM. Por ejemplo, http://13.72.77.9:3300.For example, http://13.72.77.9:3300. Debe ver algo parecido a la página siguiente:You should see something like the following page:

    Registro de libro

  3. Escriba datos en los cuadros de texto y haga clic en Agregar.Enter data into the textboxes and click Add. Por ejemplo:For example:

    Agregar registro de libro

  4. Después de actualizar la página, debería ver algo parecido a esta página:After refreshing the page, you should see something like this page:

    Agregar registros de libro

  5. Puede hacer clic en Eliminar y quitar el registro de libro de la base de datos.You could click Delete and remove the book record from the database.

Pasos siguientesNext steps

En este tutorial, creó una aplicación web que realiza un seguimiento de los registros de libros con una pila MEAN en una máquina virtual Linux.In this tutorial, you created a web application that keeps track of book records using a MEAN stack on a Linux VM. Ha aprendido a:You learned how to:

  • Creación de una máquina virtual LinuxCreate a Linux VM
  • Instalación de Node.jsInstall Node.js
  • Instalación de MongoDB y configuración del servidorInstall MongoDB and set up the server
  • Instalación de Express y configuración de rutas para el servidorInstall Express and set up routes to the server
  • Acceso a las rutas con AngularJSAccess the routes with AngularJS
  • Ejecución de la aplicaciónRun the application

Pase al siguiente tutorial para aprender a proteger servidores web con certificados SSL.Advance to the next tutorial to learn how to secure web servers with SSL certificates.