Tutorial: Erstellen eines MEAN-Stacks (MongoDB, Express, AngularJS und Node.js) auf einem virtuellen Linux-Computer in AzureTutorial: Create a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine in Azure

In diesem Tutorial wird veranschaulicht, wie Sie einen MEAN-Stack (MongoDB, Express, AngularJS und Node.js) auf einem virtuellen Linux-Computer in Azure implementieren.This tutorial shows you how to implement a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine (VM) in Azure. Mit dem erstellten MEAN-Stack können Bücher in einer Datenbank hinzugefügt, gelöscht und aufgelistet werden.The MEAN stack that you create enables adding, deleting, and listing books in a database. Folgendes wird vermittelt:You learn how to:

  • Erstellen eines virtuellen Linux-ComputersCreate a Linux VM
  • Installieren von Node.jsInstall Node.js
  • Installieren von MongoDB und Einrichten des ServersInstall MongoDB and set up the server
  • Installieren von Express und Einrichten von Routen zum ServerInstall Express and set up routes to the server
  • Zugreifen auf die Routen mit AngularJSAccess the routes with AngularJS
  • Ausführen der AnwendungRun the application

Dieses Tutorial verwendet die CLI innerhalb des Diensts Azure Cloud Shell, der ständig auf die neueste Version aktualisiert wird.This tutorial uses the CLI within the Azure Cloud Shell, which is constantly updated to the latest version. Wählen Sie zum Öffnen von Cloud Shell oben in einem Codeblock die Option Ausprobieren aus.To open the Cloud Shell, select Try it from the top of any code block.

Wenn Sie die CLI lokal installieren und verwenden möchten, müssen Sie für dieses Tutorial die Azure CLI-Version 2.0.30 oder höher ausführen.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. Führen Sie az --version aus, um die Version zu finden.Run az --version to find the version. Informationen zum Durchführen einer Installation oder eines Upgrades finden Sei bei Bedarf unter Installieren der Azure CLI.If you need to install or upgrade, see Install Azure CLI.

Erstellen eines virtuellen Linux-ComputersCreate a Linux VM

Erstellen Sie mit dem Befehl az group create eine Ressourcengruppe und mit dem Befehl az vm create einen virtuellen Linux-Computer.Create a resource group with the az group create command and create a Linux VM with the az vm create command. Eine Azure-Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen bereitgestellt und verwaltet werden.An Azure resource group is a logical container into which Azure resources are deployed and managed.

Im folgenden Beispiel wird über die Azure-Befehlszeilenschnittstelle die Ressourcengruppe myResourceGroupMEAN am Standort eastus erstellt.The following example uses the Azure CLI to create a resource group named myResourceGroupMEAN in the eastus location. Der virtuelle Computer myVM wird mit SSH-Schlüsseln erstellt, falls diese nicht bereits an einem Standardschlüsselspeicherort vorhanden sind.A VM is created named myVM with SSH keys if they do not already exist in a default key location. Um einen bestimmten Satz von Schlüsseln zu verwenden, verwenden Sie die Option „--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

Nach dem Erstellen des virtuellen Computers werden in der Azure-Befehlszeilenschnittstelle ähnliche Informationen wie im folgenden Beispiel angezeigt: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"
}

Notieren Sie sich den Wert von publicIpAddress.Take note of the publicIpAddress. Diese Adresse wird verwendet, um auf den virtuellen Computer zuzugreifen.This address is used to access the VM.

Erstellen Sie mit dem folgenden Befehl eine SSH-Sitzung mit dem virtuellen Computer.Use the following command to create an SSH session with the VM. Achten Sie darauf, dass Sie die richtige öffentliche IP-Adresse verwenden.Make sure to use the correct public IP address. Im Beispiel oben lautete die IP-Adresse „13.72.77.9“.In our example above our IP address was 13.72.77.9.

ssh azureuser@13.72.77.9

Installieren von Node.jsInstall Node.js

Node.js ist eine JavaScript-Runtime, die auf der JavaScript Engine V8 von Chrome aufbaut.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js wird in diesem Tutorial zum Einrichten der Express-Routen und AngularJS-Controller verwendet.Node.js is used in this tutorial to set up the Express routes and AngularJS controllers.

Installieren Sie Node.js auf dem virtuellen Computer mithilfe der mit SSH geöffneten Bash-Shell.On the VM, using the bash shell that you opened with SSH, install Node.js.

sudo apt-get install -y nodejs

Installieren von MongoDB und Einrichten des ServersInstall MongoDB and set up the server

In MongoDB werden Daten in flexiblen, JSON-ähnlichen Dokumenten gespeichert.MongoDB stores data in flexible, JSON-like documents. Felder in einer Datenbank können zwischen unterschiedlichen Dokumenten variieren, und die Datenstruktur kann sich mit der Zeit ändern.Fields in a database can vary from document to document and data structure can be changed over time. In der Beispielanwendung fügen wir in MongoDB Buchdatensätze hinzu, die den Buchnamen, die ISBN-Nummer, den Autor und die Anzahl der Seiten enthalten.For our example application, we are adding book records to MongoDB that contain book name, isbn number, author, and number of pages.

  1. Legen Sie auf dem virtuellen Computer mithilfe der mit SSH geöffneten Bash-Shell den MongoDB-Schlüssel fest.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. Aktualisieren Sie den Paket-Manager mit dem Schlüssel.Update the package manager with the key.

    sudo apt-get update
    
  3. Installieren Sie MongoDB.Install MongoDB.

    sudo apt-get install -y mongodb
    
  4. Starten Sie den Server.Start the server.

    sudo service mongodb start
    
  5. Wir müssen auch das Paket body-parser installieren, um die an den Server übergebenen JSON-Anfragen verarbeiten zu können.We also need to install the body-parser package to help us process the JSON passed in requests to the server.

    Installieren Sie den npm-Paket-Manager.Install the npm package manager.

    sudo apt-get install npm
    

    Installieren Sie das Paket „body-parser“.Install the body parser package.

    sudo npm install body-parser
    
  6. Erstellen Sie den Ordner Books, und fügen Sie ihm die Datei server.js hinzu, die die Konfiguration für den Webserver enthält.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'));
    });
    

Installieren von Express und Einrichten von Routen zum ServerInstall Express and set up routes to the server

Express ist ein einfaches und flexibles Node.js-Webanwendungsframework, das Features für Web- und Mobilanwendungen umfasst.Express is a minimal and flexible Node.js web application framework that provides features for web and mobile applications. Mit Express werden in diesem Tutorial Bücherinformationen in die und aus der MongoDB-Datenbank übergeben.Express is used in this tutorial to pass book information to and from our MongoDB database. Mongoose ist eine unkomplizierte, schemabasierte Lösung zum Modellieren Ihrer Anwendungsdaten.Mongoose provides a straight-forward, schema-based solution to model your application data. Mit Mongoose wird in diesem Tutorial ein Buchschema für die Datenbank bereitgestellt.Mongoose is used in this tutorial to provide a book schema for the database.

  1. Installieren Sie Express und Mongoose.Install Express and Mongoose.

    sudo npm install express mongoose
    
  2. Erstellen Sie im Ordner Books den Ordner apps, und fügen Sie die Datei routes.js mit den definierten Express-Routen hinzu.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. Erstellen Sie im Ordner apps den Ordner models, und fügen Sie die Datei book.js mit der definierten Konfiguration für das Buchmodell hinzu.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); 
    

Zugreifen auf die Routen mit AngularJSAccess the routes with AngularJS

AngularJS bietet ein Webframework zum Erstellen dynamischer Ansichten in Ihren Webanwendungen.AngularJS provides a web framework for creating dynamic views in your web applications. In diesem Tutorial wird AngularJS zum Verbinden der Webseite mit Express und zum Ausführen von Aktionen in der Buchdatenbank verwendet.In this tutorial, we use AngularJS to connect our web page with Express and perform actions on our book database.

  1. Wechseln Sie wieder zum Verzeichnis Books (cd ../..), erstellen Sie dann den Ordner public, und fügen Sie die Datei script.js mit der definierten Controllerkonfiguration hinzu.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. Erstellen Sie im Ordner public die Datei index.html mit der definierten Webseite.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>
    

Ausführen der AnwendungRun the application

  1. Wechseln Sie wieder zum Verzeichnis Books (cd ..), und starten Sie den Server durch Ausführen des folgenden Befehls:Change the directory back up to Books (cd ..) and start the server by running this command:

    nodejs server.js
    
  2. Öffnen Sie in einem Webbrowser die Adresse, die Sie für den virtuellen Computer aufgezeichnet haben.Open a web browser to the address that you recorded for the VM. Beispiel: http://13.72.77.9:3300.For example, http://13.72.77.9:3300. Eine Seite ähnlich der folgenden sollte angezeigt werden:You should see something like the following page:

    Buchdatensatz

  3. Geben Sie Daten in den Textfeldern ein, und klicken Sie auf Hinzufügen.Enter data into the textboxes and click Add. Beispiel:For example:

    Hinzufügen des Buchdatensatzes

  4. Nach der Aktualisierung der Seite sollte eine Seite ähnlich der folgenden angezeigt werden:After refreshing the page, you should see something like this page:

    Auflisten von Buchdatensätzen

  5. Sie können auf Löschen klicken und den Buchdatensatz aus der Datenbank entfernen.You could click Delete and remove the book record from the database.

Nächste SchritteNext steps

In diesem Tutorial haben Sie eine Webanwendung erstellt, in der Buchdatensätze mithilfe eines MEAN-Stacks auf einem virtuellen Linux-Computer nachverfolgt werden.In this tutorial, you created a web application that keeps track of book records using a MEAN stack on a Linux VM. Es wurde Folgendes vermittelt:You learned how to:

  • Erstellen eines virtuellen Linux-ComputersCreate a Linux VM
  • Installieren von Node.jsInstall Node.js
  • Installieren von MongoDB und Einrichten des ServersInstall MongoDB and set up the server
  • Installieren von Express und Einrichten von Routen zum ServerInstall Express and set up routes to the server
  • Zugreifen auf die Routen mit AngularJSAccess the routes with AngularJS
  • Ausführen der AnwendungRun the application

Im nächsten Tutorial erfahren Sie, wie Sie Webserver mit SSL-Zertifikaten sichern.Advance to the next tutorial to learn how to secure web servers with SSL certificates.