Oktatóanyag: MongoDB, Express, AngularJS és Node. js (MEAN) verem létrehozása az Azure-beli linuxos virtuális gépekenTutorial: Create a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine in Azure

Ez az oktatóanyag bemutatja, hogyan valósítható meg MongoDB-, Express-, AngularJS- és Node.js- (MEAN-) verem Linux rendszerű virtuális gépen az Azure-ban.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 létrehozott MEAN-készlet lehetővé teszi a könyvek hozzáadását, törlését és felsorolását egy adatbázison belül.The MEAN stack that you create enables adding, deleting, and listing books in a database. Az alábbiak végrehajtásának módját ismerheti meg:You learn how to:

  • Linux rendszerű virtuális gép készítéseCreate a Linux VM
  • A Node.js telepítéseInstall Node.js
  • A MongoDB telepítése és a kiszolgáló beállításaInstall MongoDB and set up the server
  • Az Express telepítése és útvonalak beállítása a kiszolgálóhozInstall Express and set up routes to the server
  • Az útvonalak elérése AngularJS segítségévelAccess the routes with AngularJS
  • Az alkalmazás futtatásaRun the application

Az Azure Cloud Shell használataUse Azure Cloud Shell

Az Azure gazdagépek Azure Cloud Shell, amely egy interaktív rendszerhéj-környezet, amelyet a böngészőn keresztül használhat.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud shell az Azure bash - PowerShell szolgáltatásokkal való használatot is lehetővé teszi.Cloud Shell lets you use either bash or PowerShell to work with Azure services. A cikkben szereplő kódokat a Cloud Shell előre telepített parancsokkal futtathatja anélkül, hogy bármit telepíteni kellene a helyi környezetre.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.

Azure Cloud Shell elindítása:To launch Azure Cloud Shell:

BeállításOption Példa/hivatkozásExample/Link
Kattintson a Kipróbálás elemre egy kódblokk jobb felső sarkában.Select Try It in the upper-right corner of a code block. A kipróbálás lehetőség kiválasztásával a kód nem másolja automatikusan Cloud Shellba.Selecting Try It doesn't automatically copy the code to Cloud Shell. Példa a Azure Cloud Shell kipróbálására
A böngészőben a Cloud Shell megnyitásához nyissa meg a Cloud Shell elindítása gombot, vagykattintsonaLaunch(indítás)https://shell.azure.com gombra.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Cloud Shell elindítása új ablakbanLaunch Cloud Shell in a new window
A Azure Portaljobb felső menüsorában kattintson a Cloud Shell gombra.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Cloud Shell gomb a Microsoft Azure Portal-on

A következő cikkben szereplő kód futtatásához Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell elindítása.Launch Cloud Shell.

  2. A kód másolásához kattintson a kód blokk Másolás gombjára.Select the Copy button on a code block to copy the code.

  3. Illessze be a kódot a Cloud Shell-munkamenetbe a CTRL+SHIFT+v Windows és Linux rendszeren, vagy a cmd+SHIFT+v MacOS rendszeren.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. A kód futtatásához nyomja le az ENTER billentyűt.Press Enter to run the code.

Ha a parancssori felület helyi telepítését és használatát választja, akkor ehhez az oktatóanyaghoz az Azure CLI 2.0.30-as vagy újabb verziójára lesz szükség.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. A verzió azonosításához futtassa a következőt: az --version.Run az --version to find the version. Ha telepíteni vagy frissíteni szeretne: Az Azure CLI telepítése.If you need to install or upgrade, see Install Azure CLI.

Linux rendszerű virtuális gép készítéseCreate a Linux VM

Hozzon létre egy erőforráscsoportot az az group create, illetve egy Linux rendszerű virtuális gépet az az vm create paranccsal.Create a resource group with the az group create command and create a Linux VM with the az vm create command. Az Azure-erőforráscsoport olyan logikai tároló, amelybe a rendszer üzembe helyezi és kezeli az Azure-erőforrásokat.An Azure resource group is a logical container into which Azure resources are deployed and managed.

A következő példában egy myResourceGroupMEAN nevű erőforráscsoportot hozunk létre az eastus helyen az Azure CLI használatával.The following example uses the Azure CLI to create a resource group named myResourceGroupMEAN in the eastus location. Ekkor létrejön egy myVM nevű virtuális gép SSH-kulcsokkal, ha azok még nem léteznek a kulcsok alapértelmezett helyén.A VM is created named myVM with SSH keys if they do not already exist in a default key location. Ha konkrét kulcsokat szeretné használni, használja az --ssh-key-value beállítást.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

A virtuális gép létrehozása után az Azure CLI az alábbi példához hasonló információkat jelenít meg: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"
}

Jegyezze fel a publicIpAddress értékét.Take note of the publicIpAddress. Ez a cím használható a virtuális gép eléréséhez.This address is used to access the VM.

Használja az alábbi parancsot egy SSH-munkamenet létrehozásához a virtuális géphez.Use the following command to create an SSH session with the VM. Győződjön meg arról, hogy a megfelelő nyilvános IP-címet használja.Make sure to use the correct public IP address. A fenti példában az IP-cím a következő volt: 13.72.77.9.In our example above our IP address was 13.72.77.9.

ssh azureuser@13.72.77.9

A Node.js telepítéseInstall Node.js

A Node.js egy JavaScript futtatókörnyezet, amely a Chrome 8-as verziójú JavaScript-motorján alapul.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Ebben az oktatóanyagban a Node.js használatával állíthat be Express-útvonalakat és AngularJS-vezérlőket.Node.js is used in this tutorial to set up the Express routes and AngularJS controllers.

Telepítse a Node.js futtatókörnyezetet a virtuális gépen az SSH-val megnyitott bash-felületen.On the VM, using the bash shell that you opened with SSH, install Node.js.

sudo apt-get install -y nodejs

A MongoDB telepítése és a kiszolgáló beállításaInstall MongoDB and set up the server

A MongoDB rugalmas, JSON-szerű dokumentumokban tárolja az adatokat.MongoDB stores data in flexible, JSON-like documents. Az adatbázisok mezői dokumentumtól függően eltérőek lehetnek, az adatstruktúra pedig idővel változhat.Fields in a database can vary from document to document and data structure can be changed over time. A példaalkalmazás esetében könyvbejegyzéseket fogunk hozzáadni a MongoDB-hez, amelyek tartalmazzák a könyv nevét, ISBN-számát, szerzőjét és az oldalszámot.For our example application, we are adding book records to MongoDB that contain book name, isbn number, author, and number of pages.

  1. A virtuális gépen állítsa be a MongoDB-kulcsot az SSH-val megnyitott bash-felületen.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. Frissítse a csomagkezelőt a kulccsal.Update the package manager with the key.

    sudo apt-get update
    
  3. Telepítse a MongoDB-t.Install MongoDB.

    sudo apt-get install -y mongodb
    
  4. Indítsa el a kiszolgálót.Start the server.

    sudo service mongodb start
    
  5. Emellett a body-parser csomagot is telepíteni kell, amely segít a kiszolgálóhoz továbbított kérésekben szereplő JSON feldolgozásában.We also need to install the body-parser package to help us process the JSON passed in requests to the server.

    Telepítse az npm csomagkezelőt.Install the npm package manager.

    sudo apt-get install npm
    

    Telepítse a body-parser csomagot.Install the body parser package.

    sudo npm install body-parser
    
  6. Hozzon létre egy Books (Könyvek) nevű mappát, és adjon hozzá egy a webkiszolgáló konfigurációját tartalmazó, server.js nevű fájlt.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'));
    });
    

Az Express telepítése és útvonalak beállítása a kiszolgálóhozInstall Express and set up routes to the server

Az Express egy minimális igényű és rugalmas Node.js webalkalmazási keretrendszer, amely különféle funkciókat biztosít a web- és mobilalkalmazások számára.Express is a minimal and flexible Node.js web application framework that provides features for web and mobile applications. Ebben az oktatóanyagban az Express használatával fogjuk továbbítani a könyvadatokat a MongoDB adatbázisból, illetve az adatbázis felé.Express is used in this tutorial to pass book information to and from our MongoDB database. A Mongoose magától értetődő, sémaalapú megoldást biztosít az alkalmazásadatok modellezéséhez.Mongoose provides a straight-forward, schema-based solution to model your application data. Ebben az oktatóanyagban a Mongoose használatával fogjuk megadni a könyv sémáját az adatbázis számára.Mongoose is used in this tutorial to provide a book schema for the database.

  1. Telepítse az Express és Mongoose szolgáltatásokat.Install Express and Mongoose.

    sudo npm install express mongoose
    
  2. A Books mappában hozzon létre egy apps (alkalmazások) nevű mappát, és adjon hozzá egy routes.js nevű fájlt, amelyben meg vannak határozva az Express-útvonalak.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. Az apps mappában hozzon létre egy models (modellek) nevű mappát, és adjon hozzá egy book.js nevű fájlt, amelyben meg van határozva a könyvmodell.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); 
    

Az útvonalak elérése AngularJS segítségévelAccess the routes with AngularJS

Az AngularJS egy webes keretrendszert biztosít a dinamikus nézetek létrehozásához a webalkalmazáson belül.AngularJS provides a web framework for creating dynamic views in your web applications. Ebben az oktatóanyagban az AngularJS használatával csatlakoztatjuk a weboldalt az Express szolgáltatáshoz, és műveleteket hajtunk végre a könyvadatbázison.In this tutorial, we use AngularJS to connect our web page with Express and perform actions on our book database.

  1. Módosítsa a könyvtár biztonsági mentésének helyét a Books (cd ../..) mappára, majd hozzon létre egy public (nyilvános) nevű mappát, és adjon hozzá egy script.js nevű fájlt, amelyben meg van határozva a vezérlő konfigurációja.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. A public mappában hozzon létre egy index.html nevű fájlt, amelyben meg van határozva a weboldal.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>
    

Az alkalmazás futtatásaRun the application

  1. Módosítsa a könyvtár biztonsági mentésének helyét a Books (cd ..) mappára, és indítsa el a kiszolgálót az alábbi parancs futtatásával:Change the directory back up to Books (cd ..) and start the server by running this command:

    nodejs server.js
    
  2. Nyisson meg egy webböngészőt, és ugorjon a virtuális géphez rögzített címre.Open a web browser to the address that you recorded for the VM. Például : http://13.72.77.9:3300.For example, http://13.72.77.9:3300. Az alábbihoz hasonló oldalt kell látnia:You should see something like the following page:

    Könyvrekord

  3. Adjon meg adatokat a szöveges mezőkben, és kattintson az Add (Hozzáadás) elemre.Enter data into the textboxes and click Add. Példa:For example:

    Könyvrekord hozzáadása

  4. Az oldal frissítése után az alábbihoz hasonló oldalt kell látnia:After refreshing the page, you should see something like this page:

    Könyvrekordok listája

  5. A Delete (Törlés) gombra kattintva eltávolíthatja a könyvrekordot az adatbázisból.You could click Delete and remove the book record from the database.

További lépésekNext steps

Ebben az oktatóanyagban létrehozott egy webalkalmazást, amely nyomon követi a könyvrekordokat egy MEAN-készlet használatával egy Linux rendszerű virtuális gépen.In this tutorial, you created a web application that keeps track of book records using a MEAN stack on a Linux VM. Megismerte, hogyan végezheti el az alábbi műveleteket:You learned how to:

  • Linux rendszerű virtuális gép készítéseCreate a Linux VM
  • A Node.js telepítéseInstall Node.js
  • A MongoDB telepítése és a kiszolgáló beállításaInstall MongoDB and set up the server
  • Az Express telepítése és útvonalak beállítása a kiszolgálóhozInstall Express and set up routes to the server
  • Az útvonalak elérése AngularJS segítségévelAccess the routes with AngularJS
  • Az alkalmazás futtatásaRun the application

Folytassa a következő oktatóanyaggal, amelyből megismerheti, hogyan tehetők biztonságossá a webkiszolgálók SSL-tanúsítványok használatával.Advance to the next tutorial to learn how to secure web servers with SSL certificates.