Öğretici: Azure'da bir Linux sanal makinesi üzerinde MongoDB, Express, AngularJS ve Node.js (MEAN) yığını oluşturunTutorial: Create a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine in Azure

Bu öğreticide, Azure’da bir Linux sanal makinesi (VM) üzerinde MongoDB, Express, AngularJS ve Node.js (MEAN) yığınının nasıl uygulanacağı gösterilmektedir.This tutorial shows you how to implement a MongoDB, Express, AngularJS, and Node.js (MEAN) stack on a Linux virtual machine (VM) in Azure. Oluşturduğunuz MEAN yığını bir veritabanına kitap eklenmesine, veritabanındaki kitapların silinmesine ve listelenmesine olanak sağlar.The MEAN stack that you create enables adding, deleting, and listing books in a database. Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:You learn how to:

  • Linux VM oluşturmaCreate a Linux VM
  • Node.js yüklemeInstall Node.js
  • MongoDB yükleme ve sunucuyu ayarlamaInstall MongoDB and set up the server
  • Express’i yükleme ve sunucuya rotalar ayarlamaInstall Express and set up routes to the server
  • AngularJS ile rotalara erişmeAccess the routes with AngularJS
  • Uygulamayı çalıştırmaRun the application

Azure Cloud Shell kullanmaUse Azure Cloud Shell

Azure, Azure Cloud Shell, tarayıcınız üzerinden kullanabileceğiniz bir etkileşimli Kabuk ortamını barındırır.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell'i ya da kullanmanıza imkan tanır bash veya PowerShell Azure hizmetleriyle çalışmak için.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Cloud Shell önceden yüklenmiş komutları, yerel ortamınızda herhangi bir yükleme gerekmeden bu makaledeki kodu çalıştırmak için kullanabilirsiniz.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'i başlatmak için:To launch Azure Cloud Shell:

SeçenekOption Örnek/bağlantıExample/Link
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin.Select Try It in the upper-right corner of a code block. Seçme deneyin kod Cloud Shell için otomatik olarak kopyalamaz.Selecting Try It doesn't automatically copy the code to Cloud Shell. Örneği Azure Cloud Shell için deneyin
Git https://shell.azure.com veya Cloud Shell'i Başlat Cloud Shell, tarayıcınızda açmak için düğmeyi.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. <a href="https://shell.azure.com" title="Azure Cloud Shell'i Başlat
Seçin Cloud Shell düğmesine sağ üst menü çubuğundaki Azure portalında.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure portaldaki Cloud Shell düğmesi

Bu makalede Azure Cloud shell'de kod çalıştırmak için:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell'i başlatın.Launch Cloud Shell.
  2. Seçin kopyalama kodu kopyalamak için bir kod bloğu üzerinde düğmesi.Select the Copy button on a code block to copy the code.
  3. Cloud Shell oturumla kodu yapıştırın Ctrl+Shift+V Windows ve Linux'ta veya Cmd + Shift+V macOS üzerinde.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Tuşuna Enter kodu çalıştırmak için.Press Enter to run the code.

CLI'yi yerel olarak yükleyip kullanmayı tercih ederseniz bu öğretici için Azure CLI 2.0.30 veya sonraki bir sürümünü çalıştırmanız gerekir.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. Sürümü bulmak için az --version komutunu çalıştırın.Run az --version to find the version. Yükleme veya yükseltme yapmanız gerekiyorsa bkz. Azure CLI'yı yükleme.If you need to install or upgrade, see Install Azure CLI.

Linux VM oluşturmaCreate a Linux VM

az group create komutuyla bir kaynak grubu oluşturun ve az vm create komutuyla bir Linux sanal makinesi oluşturun.Create a resource group with the az group create command and create a Linux VM with the az vm create command. Azure kaynak grubu, Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır.An Azure resource group is a logical container into which Azure resources are deployed and managed.

Aşağıdaki örnekte Azure CLI kullanılarak eastus konumunda myResourceGroupMEAN adlı bir kaynak grubu oluşturulur.The following example uses the Azure CLI to create a resource group named myResourceGroupMEAN in the eastus location. Varsayılan anahtar konumunda henüz yoksa SSH anahtarları ile myVM adlı bir sanal makine oluşturulur.A VM is created named myVM with SSH keys if they do not already exist in a default key location. Belirli bir anahtar kümesini kullanmak için --ssh-key-value seçeneğini kullanın.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

Sanal makine oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir: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"
}

publicIpAddress değerini not edin.Take note of the publicIpAddress. Bu adres, VM’ye erişmek için kullanılır.This address is used to access the VM.

Sanal makine ile bir SSH oturumu oluşturmak için aşağıdaki komutu kullanın.Use the following command to create an SSH session with the VM. Doğru genel IP adresini kullandığınızdan emin olun.Make sure to use the correct public IP address. Yukarıdaki örneğimizde IP adresi 13.72.77.9 şeklindedir.In our example above our IP address was 13.72.77.9.

ssh azureuser@13.72.77.9

Node.js yüklemeInstall Node.js

Node.js, Chrome’un V8 JavaScript altyapısında derlenen bir JavaScript çalışma zamanıdır.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Express rotalarını ve AngularJS denetleyicilerini ayarlamak için bu öğreticide Node.js kullanılmaktadır.Node.js is used in this tutorial to set up the Express routes and AngularJS controllers.

Sanal makinede, SSH ile açtığınız bash kabuğunu kullanarak Node.js yükleyin.On the VM, using the bash shell that you opened with SSH, install Node.js.

sudo apt-get install -y nodejs

MongoDB yükleme ve sunucuyu ayarlamaInstall MongoDB and set up the server

MongoDB, verileri JSON benzeri esnek belgelerde depolar.MongoDB stores data in flexible, JSON-like documents. Bir veritabanındaki alanlar, belgeden belgeye değişiklik gösterebilir ve veri yapısı zaman içinde değiştirilebilir.Fields in a database can vary from document to document and data structure can be changed over time. Örnek uygulamamız için MongoDB anahtarına kitap adını, isbn numarasını, yazarı ve sayfa sayısını içeren kitap kayıtları ekliyoruz.For our example application, we are adding book records to MongoDB that contain book name, isbn number, author, and number of pages.

  1. Sanal makinede, SSH ile açtığınız bash kabuğunu kullanarak MongoDB anahtarını ayarlayın.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. Paket yöneticisini anahtarla güncelleştirin.Update the package manager with the key.

    sudo apt-get update
    
  3. MongoDB’yi yükleyin.Install MongoDB.

    sudo apt-get install -y mongodb
    
  4. Sunucuyu başlatın.Start the server.

    sudo service mongodb start
    
  5. Ayrıca sunucuya yönelik isteklerde geçirilen JSON’u işlememize yardımcı olması için body-parser paketini de yüklememiz gerekir.We also need to install the body-parser package to help us process the JSON passed in requests to the server.

    Npm paket yöneticisini yükleyin.Install the npm package manager.

    sudo apt-get install npm
    

    Gövde ayrıştırıcı paketini yükleyin.Install the body parser package.

    sudo npm install body-parser
    
  6. Kitaplar adlı bir klasör oluşturun ve web sunucusu yapılandırmasını içeren server.js adlı bir dosyayı bu klasöre ekleyin.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'));
    });
    

Express’i yükleme ve sunucuya rotalar ayarlamaInstall Express and set up routes to the server

Express, web uygulamaları ve mobil uygulamalar için özellikler sağlayan minimal ve esnek bir Node.js web uygulaması çerçevesidir.Express is a minimal and flexible Node.js web application framework that provides features for web and mobile applications. Bu öğreticide Express, MongoDB veritabanına/veritabanından kitap bilgilerini geçirmek için kullanılmaktadır.Express is used in this tutorial to pass book information to and from our MongoDB database. Mongoose, uygulama verilerinizi modellemek için kolay ve şema temelli bir çözüm sağlar.Mongoose provides a straight-forward, schema-based solution to model your application data. Bu öğreticide Mongoose, veritabanına yönelik bir kitap şeması sağlamak için kullanılmaktadır.Mongoose is used in this tutorial to provide a book schema for the database.

  1. Express’i ve Mongoose’u yükleyin.Install Express and Mongoose.

    sudo npm install express mongoose
    
  2. Kitaplar klasöründe uygulamalar adlı bir klasör oluşturun ve express rotaları tanımlanmış şekilde routes.js adlı bir dosya ekleyin.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. uygulamalar klasöründe modeller adlı bir klasör oluşturun ve kitap modeli yapılandırması tanımlanmış şekilde book.js adlı bir dosya ekleyin.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); 
    

AngularJS ile rotalara erişmeAccess the routes with AngularJS

AngularJS, web uygulamalarınızda dinamik görünümler oluşturmaya yönelik bir web çerçevesi sağlar.AngularJS provides a web framework for creating dynamic views in your web applications. Bu öğreticide, Express ile web sayfamıza bağlanmak ve kitap veritabanımızda eylemler gerçekleştirmek için AngularJS kullanırız.In this tutorial, we use AngularJS to connect our web page with Express and perform actions on our book database.

  1. Dizini Kitaplar (cd ../..) olarak tekrar değiştirin, sonra genel adlı bir klasör oluşturun ve denetleyici yapılandırması tanımlanmış şekilde script.js adlı bir dosya ekleyin.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. genel klasöründe, web sayfası tanımlanmış şekilde index.html adlı bir dosya oluşturun.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>
    

Uygulamayı çalıştırmaRun the application

  1. Dizini Kitaplar (cd ..) olarak tekrar değiştirin ve şu komutu çalıştırarak sunucuyu başlatın:Change the directory back up to Books (cd ..) and start the server by running this command:

    nodejs server.js
    
  2. Bir web tarayıcısında, sanal makine için kaydettiğiniz adresi açın.Open a web browser to the address that you recorded for the VM. Örneğin, http://13.72.77.9:3300.For example, http://13.72.77.9:3300. Aşağıdaki sayfaya benzer bir şey görmeniz gerekir:You should see something like the following page:

    Kitap kaydı

  3. Metin kutularına veri girin ve Ekle’ye tıklayın.Enter data into the textboxes and click Add. Örneğin:For example:

    Kitap kaydı ekleme

  4. Sayfayı yeniledikten sonra aşağıdaki sayfaya benzer bir şey görmeniz gerekir:After refreshing the page, you should see something like this page:

    Kitap kayıtlarını listeleme

  5. Sil’e tıklayıp veritabanından kitap kaydını kaldırabilirsiniz.You could click Delete and remove the book record from the database.

Sonraki adımlarNext steps

Bu öğreticide, Linux sanal makinesi üzerinde MEAN yığınını kullanarak kitap kayıtlarını takip eden bir web uygulaması oluşturdunuz.In this tutorial, you created a web application that keeps track of book records using a MEAN stack on a Linux VM. Şunları öğrendiniz:You learned how to:

  • Linux VM oluşturmaCreate a Linux VM
  • Node.js yüklemeInstall Node.js
  • MongoDB yükleme ve sunucuyu ayarlamaInstall MongoDB and set up the server
  • Express’i yükleme ve sunucuya rotalar ayarlamaInstall Express and set up routes to the server
  • AngularJS ile rotalara erişmeAccess the routes with AngularJS
  • Uygulamayı çalıştırmaRun the application

SSL sertifikalarını kullanarak güvenli web sunucularının güvenliğini nasıl sağlayabileceğinizi öğrenmek için sonraki öğreticiye ilerleyin.Advance to the next tutorial to learn how to secure web servers with SSL certificates.