Mit der Nutzung dieser Webseite akzeptieren Sie unsere Nutzung von Cookies. Weitere Informationen über Cookies finden Sie hier
Zustimmen
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
Mit der Nutzung dieser Webseite akzeptieren Sie unsere Nutzung von Cookies. Weitere Informationen über Cookies finden Sie hier
Zustimmen
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
Infopulse - Softwareentwicklung & Infrastruktur-Management-Services
Angebot
Angebot anfordern Bitte füllen Sie dieses kurze Formular aus und wir senden Ihnen in Kürze ein kostenloses Angebot zu.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Abonnieren Sie unsere Updates Seien Sie unter den Ersten, die exklusive Einblicke in die IT, die Innovationen und Best Practices erhalten.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Subscribe to our Vacancies Please fill in this quick form to be among the first to receive our updates.
* Required fields
Your privacy is important to us. We will never share your data.
Abonnieren Sie unsere Updates Seien Sie unter den Ersten, die exklusive Einblicke in die IT, die Innovationen und Best Practices erhalten.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Photo of Anton Bastiuchenko Senden Sie eine E-Mail an Anton Bastiuchenko Bitte füllen Sie dieses kurze Formular aus, um unseren Experten direkt zu kontaktieren.
* Pflichtfelder
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.
Infopulse - Expert Software Engineering, Infrastructure Management Services
Read the Full Case Study Don't miss the most interesting part of the story!
Submit this quick form to see the rest and to freely access all case studies on our website.
* Required fields
Der Schutz Ihrer Privatsphäre ist uns wichtig. Wir werden Ihre Informationen niemals weitergeben.

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

Wir setzen unsere Reihe der Tutorien fort, in denen Lösungen beschrieben werden, die mit Hilfe von plattformübergreifenden Open-Source-Technologien von Microsoft entwickelt und mit Docker gepackt werden.
In dem ersten und zweiten Teil unserer Tutorien haben wir eine Angular-4- und .NET-Core-Lösung in der Windows-Umgebung entwickelt. Diesmal werden wir unseren Proof of Concept um die Arbeit mit .NET Core auf Ubuntu erweitern.

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 1Teil 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" } ] });

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

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:

Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 772069
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 708193
Die Verbindung ist hergestellt, jetzt wir müssen eine neue Datenbank mit dem Namen „CompanyDB“ erstellen:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 290246
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 033475

Öffnen Sie das Terminal und führen Sie“INSERT” aus:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 678094

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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 579462Unsere 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:

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

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

docker login

docker commit 00399 <your repository name>/ubuntumongodb

docker push <your repository name>/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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 551995
Jetzt sehen wir einen neuen Block in unserem Repository:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 714899
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:

<PackageReference Include="MongoDB.Driver" Version="2.4.4" />

Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 383348
Wir sollten eine Verbindungszeichenkette für die Datenbank angeben, und die Datei appsettings.json ist ein guter Ort dafür.
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 656702

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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 236998

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")));

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

Erstellen Sie die Datei “EmployeeMongo.cs” im Ordner DBModel. Diese Datei enthält ein Modell, das die Tabelle “employees” aus der Datenbank “CompanyDB” wiedergibt:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 816414

…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”:

Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 757292
…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 contextWir 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

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

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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 590684

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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 979506
Sie finden die IP-Adresse im Popup-Fenster:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 462314
Ersetzen Sie “localhost” durch die IP-Adresse in der Verbindungszeichenkette:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 774562

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:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 884150

Führen Sie die Anwendung mit dem Port aus, den wir angegeben haben:
Tutorium: Entwicklung einer ASP.NET-Core- und Angular-4-Anwendung mit Verbindung zu MongoDB in Ubuntu - Infopulse - 874848

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 <your own repository>/ng2aspcorecontainer_linux

docker push <your own repository>/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!

Newsletter abonnieren