Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu

In diesem Tutorium lernen Sie, wie man:MongoDB (NoSQL-Datenbank) als Alternative zu MS SQL (SQL-Datenbank) nutzt

• MongoDB (NoSQL-Datenbank) als Alternative zu MS SQL (SQL-Datenbank) nutzt
• MongoDB in einen Docker-Container packt
• unsere Angular-4- und .NET-Core-Anwendung abändert, damit sie mit MongoDB kompatibel ist
• die Angular-4- und .NET-Core-Anwendung in einen anderen Docker-Container packt
• Bevor wir beginnen, müssen Sie Git, NodeJS, Docker, .NET Core SDK, und Visual Studio Code mit der C#-Erweiterung in der Ubuntu-Umgebung installieren.

Erste Vorbereitungen

WICHTIG! In diesem Teil des Artikels werden wir alle Befehle in einem Terminal mit Wurzel-Rechten ausführen. Um ein Terminal mit Wurzel-Rechten zu starten, muss sudo gnome-terminal in einem Terminal ausgeführt werden.

Zunächst sollten Sie git clone <your repository url> bei unserer Angular-4- und .NET-Core-Anwendung ausführen, die wir in den vorherigen Teilen unserer Tutorien (Teil 1, Teil 2) erstellt haben. Tun Sie es, indem Sie die vertrauten Befehle nutzen:

npm install

webpack

dotnet run

Wenn Sie dem Link folgen, der von dotnet run vorgeschlagen wird, werden Sie die gleiche Tabelle wie in einer Windows-Umgebung sehen. Das bedeutet, dass der Code, den wir in der Windows-Umgebung erstellt werden, ohne zusätzlichen Aufwand auf Ubuntu laufen wird.

Start des MongoDB-Servers

Es ist ziemlich einfach, mit MongoDB zu arbeiten, wenn Sie Docker verwenden. Führen Sie einfach den folgenden Befehl in dem Terminal aus, um einen Docker-Container mit MongoDB zusammenzuführen:

docker run --name UbuntuMongoInstance -p 5533:27017 -d mongo

Damit wird der Container namens UbuntuMongoInstance  ausgehend von dem Mongo-Bild von einem öffentlichen Repository gestartet und der offene Port 27017 (der Mongo-Port) für den Port 5533 der aktuellen Host-Umgebung gekennzeichnet.

Der MongoDB-Container ist da und läuft. Wir müssen nun die Verbindung zu dem Datenbankserver herstellen und einen neuen Benutzer erstellen, der auf die Datenbank von unserer Anwendung aus zugreifen wird:

docker exec -it UbuntuMongoInstance mongo admin

db.createUser({ user: 'superuser', pwd: 'Qwer!234', roles: [ { role: "userAdminAnyDatabase", db: "admin" } ] });

Der Datenbankserver ist fertig, und es ist an der Zeit, eine neue Datenbank mit einer Tabelle zu erstellen und sie mit Daten zu füllen.

Zu diesem Zweck werden wir Robomongo verwenden, ein sehr beliebtes GUI-Tool für MongoDB.

Auf den nachfolgenden Abbildungen können Sie sehen, wie wir die Verbindung zu unserem MongoDB-Server herstellen, der im Docker-Container läuft:

Die Verbindung ist hergestellt, jetzt wir müssen eine neue Datenbank mit dem Namen „CompanyDB“ erstellen:

Öffnen Sie das Terminal und führen Sie“INSERT” aus:

Wir verwenden “insertMany”, um die Daten in die Tabelle einzufügen. Die Daten werden als JSON-Array dargestellt. Die Tabelle “Employees” wird automatisch erstellt. Bitte beachten Sie, dass die Daten im JSON-Array den Daten sehr ähnlich sind, die wir im vorherigen Teil verwendet haben, als wir die Änderungen bei unserem Frontend-Teil herunterbrechen wollten:

db.employees.insertMany([{ employeeId: 2, birthDay: new Date('1990-11-05'), firstName: 'Orlando', lastName: 'Gee'},

 { employeeId: 5, birthDay: new Date('1986-07-14'), firstName: 'Keith', lastName: 'Harris'},

 { employeeId: 6, birthDay: new Date('1988-06-05'), firstName: 'Donna', lastName: 'Carreras'},

 { employeeId: 7, birthDay: new Date('1991-08-12'), firstName: 'Janet', lastName: 'Gates'},

 { employeeId: 8, birthDay: new Date('1994-06-24'), firstName: 'Lucy', lastName: 'Harringto'},

 { employeeId: 9, birthDay: new Date('1976-07-03'), firstName: 'Rosmarie', lastName: 'Carroll'},

 { employeeId: 11, birthDay: new Date('1979-07-07'), firstName: 'Dominic', lastName: 'Gash'},

 { employeeId: 12, birthDay: new Date('1990-03-02'), firstName: 'Kathlee', lastName: 'Garza'},

 { employeeId: 14, birthDay: new Date('1989-11-08'), firstName: 'Katherine', lastName: 'Harding'},

 { employeeId: 16, birthDay: new Date('1986-05-17'), firstName: 'Johnny', lastName: 'Caprio'}])

Schauen wir uns den aktuellen Stand des Terminals an:

Unsere Datenbank ist fertig. Jetzt werden wir unser Bild in den Docker Hub verschieben.

MongoDB im Docker Hub speichern

Dieses Verfahren ist nicht obligatorisch, doch wir wollen eine stabile Version unserer Datenbank erstellen, um die Möglichkeit zu haben, etwas rückgängig zu machen, wenn etwas schief läuft.

Starten Sie docker ps, um die Container-ID herauszufinden:

Führen Sie die folgenden Befehle aus, um Ihr Bild in den Docker Hub zu verschieben:

docker login

docker commit 00399 /ubuntumongodb

docker push /ubuntumongodb

Wie Sie sehen können, haben wir den magischen  Code „00399“ genutzt. Es ist die kurze Version unserer Container-ID. Sie müssen nicht die ganze ID schreiben, geben Sie einfach die ersten Symbole ein, anhand von denen die Container-ID identifiziert werden kann, sie sind einzigartig in der Bilderliste in Ihrer Umgebung:

Jetzt sehen wir einen neuen Block in unserem Repository:

Bevor wir weitergehen, müssen wir Einiges einstellen.

Projekteinstellungen

Wir müssen unser Projekt so abändern, dass es sich mit der MongoDB-Datenbank verbinden und die abgerufenen Daten in einem Browser anzeigen kann.

Öffnen Sie die *.csproj-Datei und fügen Sie die folgende Zeile im “ItemGroup”-Abschnitt ein:

Wir sollten eine Verbindungszeichenkette für die Datenbank angeben, und die Datei appsettings.json ist ein guter Ort dafür.

Erläuterung:

• superuser– Benutzer, den wir über das Terminal erstellt haben
• Qwer!234– Benutzerkennwort
• localhost:5533– der Hostname und der Port des MongoDB-Servers, den wir bei docker run gekennzeichnet haben

Wir sind hier fertig, ein paar weitere Schritte zum Tuning von unserem Backend und unserem Frontend bleiben übrig.

Backend ändern

Als Erstes sollten wir einen Datenbank-Kontext schaffen, in dem wir die Verbindung zu MongoDB anpassen werden.

Erstellen Sie den Ordner “Service” und die Datei MongoContext.cs in diesem Ordner:

Jetzt werden wir eine MongoClient-Instanz entsprechend der Verbindungszeichenkette erstellen, die wir später der Datei appsettings.json appsettings.json entnehmen werden. Fügen Sie den folgenden Code in die Datei ein:

using MongoDB.Driver;
namespace Ng2AspCore.Services
{
	  public class MongoContext
	{
    	    public readonly IMongoDatabase db;
    	      public MongoContext(string connectionStr)
         	{
        		var mongoClient = new MongoClient(connectionStr);
        		db = mongoClient.GetDatabase("CompanyDB");
    	       }
	}
}

Der Dienst für die Datenbankverbindung ist fertig, wir müssen ihn nun als Einzeldienst initialisieren.

Öffnen Sie die Datei Startup.cs und fügen Sie die folgende Zeile ein, die “MongoContext” als Einzeldienst starten wird:

services.AddSingleton(new MongoContext(Configuration.GetConnectionString("MongoDbConnection")));

Erstellen Sie die Datei “EmployeeMongo.cs” im Ordner DBModel. Diese Datei enthält ein Modell, das die Tabelle “employees” aus der Datenbank “CompanyDB” wiedergibt:

…und fügen Sie den folgenden Code ein:

using System;
using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

namespace Ng2AspCore.DBModel
{
	[BsonIgnoreExtraElements]
	public class EmployeeMongo
	{
    	    [BsonElement("employeeId")]
    	    public int EmployeeId  { get; set; }
    	    [BsonElement("firstName")]
    	    public string FirstName  { get; set; }
    	    [BsonElement("lastName")]
    	    public string LastName  { get; set; }
            [BsonElement("birthDay")]
    	    public DateTime BirthDay { get; set; }
	}
}

Bitte beachten Sie, dass die Attribute [BsonIgnoreExtraElements] und [BsonElement(…)]erforderlich sind, um die abgerufenen Daten aus MongoDB richtig zu binden.

Der letzte Schritt unserer Anpassung im Backend-Teil ist die Erstellung eines WebAPI-Controllers.

Erstellen Sie die Datei “EmpMongoController.cs” im Ordner “Controllers”:

…und fügen Sie den folgenden Code ein:

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using MongoDB.Bson;
using MongoDB.Driver;
using MongoDB.Driver.Linq;
using Ng2AspCore.DBModel;
using Ng2AspCore.Services;

namespace Ng2AspCore.Controllers
{
	[Route("api/EmployeeMongodb")]
	public class EmpMongoController: Controller
	{
    	      private MongoContext context;
    	      public EmpMongoController(MongoContext context)
    	      {
    	          	this.context = context;
    	      }

    	      [HttpGet("GetAll")]
    	      public IEnumerable GetAllEmployeesFromMongodb()
    	      {
    	       return context.db.GetCollection("employees")
    	      .Find(x=>x.LastName.StartsWith("C")).ToList();
    	   }
      }
}

Schauen wir uns den Klassenkonstruktor an. Er hat den Parameter MongoContext context. Wir werden den Wert dieser Variablen durch Dependency Injection erhalten, die im .NET Core automatisch zur Verfügung steht, wenn wir die Methode services.AddSingleton verwenden. Z.B. bekommen wir bei einer Abfrage bei MongoDB durch die Aktion “GetAllEmployeesFromMongodb” alle Mitarbeiter aufgelistet, deren Nachname mit dem Buchstaben “C” beginnt.

Frontend ändern

Öffnen Sie die Datei employee.service.ts, die Sie im Ordner <project root>\src\app\employees\employee.service.ts finden können.

Ändern Sie den Endpunkt-URI auf den neuen Endpunkt-URI um:

• from api/Employee/GetAll
• to /api/EmployeeMongodb/GetAll

Keine weiteren Änderungen sollten am Frontend-Teil vorgenommen werden, da wir das Modell unserer Daten nicht geändert haben.

„Hallo Welt“-Benachrichtigung ändern (optional)

Dies ist eine kosmetische Änderung, um zu zeigen, dass wir in der Ubuntu-Umgebung sind.

Gehen Sie zu HelloController.cs und ändern Sie unsere „Hallo Welt“-Benachrichtigung:

• VonHello Angular4 and ASP.NET Core from Windows 10
• Auf Hello Angular4 and ASP.NET Core from Ubuntu

Start unserer Anwendung

Nun läuft unsere MongoDB-Datenbank im Docker-Container und unsere Angular-4- und .NET-Core-Anwendung in unserer Ubuntu-Host-Umgebung. Starten wir mal all das:

webpack

dotnet run

Öffnen Sie Ihren Browser, um das Ergebnis zu überprüfen:

Wie wir sehen, erscheinen alle Änderungen, und wir haben die korrekte Mitarbeiterliste.

Zusammenspiel der Container

Beim letzten eleganten Trick zeigen wir Ihnen, wie man eine Verbindung zwischen zwei Docker-Container herstellen kann.

Wir werden unsere Angular-4- und .NET-Core-Anwendung mit dem MongoDB-Docker-Container verbinden. Um dies zu erledigen, müssen wir eine kleine Sache lösen.

Bisher haben wir unsere Angular-4- und .NET-Core-Anwendung für die Datenbankverbindung entsprechend der Verbindungszeichenkette codiert, die in der Datei appsettings.json angegeben ist:

“mongodb://superuser:Qwer!234@localhost:5533”

Die Angular-4- und .NET-Core-Anwendung denkt, dass „localhost“ die Umgebung des Docker-Containers ist, in der die Anwendung ausgeführt wird.

Wir müssen die Anwendung mit einem anderen Docker-Container verbinden, wo unsere MongoDB-Datenbank jetzt ist, und uns von „localhost“ befreien. Wir können die IP-Adresse der Host-Umgebung angeben, um sich mit der MongoDB-Datenbank im Container zu verbinden. Klicken Sie auf “arrows” oben im Ubuntu-GUI und wählen Sie “Connection Information” aus:

Sie finden die IP-Adresse im Popup-Fenster:

Ersetzen Sie “localhost” durch die IP-Adresse in der Verbindungszeichenkette:

Bauen Sie die Anwendung wieder auf und packen Sie sie in den Docker-Container:

dotnet build

dotnet publish

docker build bin/Debug/netcoreapp1.1/publish -t ng2aspcorecontainer_linux

docker run -it -d -p 8888:80 ng2aspcorecontainer_linux

Wir haben den Port 8888 dem offenen Port 80 in dem Container zugeordnet.

Führen Sie docker ps aus, um zu überprüfen, welche Container wir haben:

Führen Sie die Anwendung mit dem Port aus, den wir angegeben haben:

Wie Sie sehen, funktioniert alles einwandfrei und beide Container interagieren.

Wir werden unsere neu erstellten Container in den Docker Hub verschieben, einfach nur um sicher zu gehen, dass die aktuellen Daten gespeichert werden:

docker commit bf28 /ng2aspcorecontainer_linux

docker push /ng2aspcorecontainer_linux

Sie können die finale Version dieses Proof of Concept in unserem GitHub-Repository finden.

Mit diesem Artikel beenden wir unsere Reihe der Tutorien, die sich der Entwicklung von Angular-4- und .NET-Core-Lösungen mit Hilfe von Docker und plattformübergreifenden Open-Source-Technologien widmen. Weitere Informationen finden Sie in dem ersten und in dem zweiten Teil unserer Tutorien.

Wenn Sie Fragen oder Anmerkungen haben, zögern Sie nicht, uns zu kontaktieren. Wir freuen uns darauf, Ihnen helfen zu können!