Autor: tmaxham

Installation eines MEAN.JS Stack

In diesem Beitrag werde ich darauf eingehen, was MEAN.JS eigentlich ist, wie man einen MEAN.JS Stack auf seinem Server aufsetzten kann und was man hierbei für Vorteile hat. In einem späteren Beitrag werde ich dann an einem Beispiel beschreiben, was man mit MEAN.JS machen kann.

Was ist MEAN.JS?

MEAN.JS ist eine Full-Stack-Software-Lösung, die dabei hilft eine Web-Anwendung schnell, robust und in Produktion besser wart bar zu machen. Dabei werden die Technologien MongoDB, Express, AngularJS und Node.JS verwendet. Daher kommt auch der Name MEAN.

MEAN.JS Logo - Maxham.de
MEAN.JS

Warum MEAN.JS?

MEAN.JS hilft dabei unnötige Routinearbeiten und häufige Fehler während der Laufzeit der Anwendung zu vermeiden. Das Hauptziel ist es, eine einfache und gut lesbare OpenSource-Lösung zu verwenden, die man in seinen Webprojekte verwenden kann und vertrauen kann.

Die MEAN Komponenten

Fangen wir mit MongoDB an. MongoDB ist eine NoSQL-Datenbank und im Großen und Ganzen JSON (oder JSONB) Dokumente verwaltet. Die Dokumentation von MongoDB ist gigantisch umfangreich und hilft sicherlich, MongoDB besser zu verstehen.

Express.js – ist ein serverseitiges Web-Application-Framework, das für die JavaScript basierende Plattform Node.js läuft.

Angular.js – ist ein clientseitiges JavaScript MVC-Framework, das zur Erstellung von Single-Page-Webanwendungen verwendet wird. Das von Google entwickelte Framework ist eines der beliebtesten und führendsten Frameworks in diesem Bereich.

Node.js – ist eine serverseitige Plattform zum Betrieb von Netzwerkanwendung.

Voraussetzungen

  • GIT $ git –version
  • Node.js & npm $ npm install && npm install -g bower
  • MongoDB
  • Bower
  • Grunt $ npm install -g grunt-cli
  • Gulp (optional) $ npm install -g gulp

Wie man sehen kann, ist weder Express noch AngularJS in der Liste enthalten. Dies kommt daher, dass MEAN.JS die Abhängigkeiten automatisch installieren kann.

Download MEAN.JS

Es gibt zwei Möglichkeiten wie man MEAN.JS installieren kann. Die von mir bevorzugte Methode ist, das Git-Repository direkt in ein lokales Verzeichnis zu kopieren. Das geht mit dem folgenden Befehl:

$git clone https://github.com/meanjs/mean.git meanjs

Mit diesem Befehl wird die aktuelle Version von MEAN.JS in das lokale Verzeichnis „meanjs“ geklont. Alternativ kann man sich den Build direkt als ZIP-Datei herunterladen.

$wget https://github.com/meanjs/mean/archive/master.zip

MEANJS installieren

Nachdem MEAN.JS nach den oben genannten Schritten in ein Verzeichnis kopiert wurde, muss folgender Befehl ausgeführt werden:

$npm install

Mit diesem Befehl werden alle Abhängigkeiten, die für die Anwendung benötigt werden installiert. Anschließend kann man die Anwendung mit dem Befehl $grunt starten. Sollten mit diesem Befehl Warnungen angezeigt werden, kann versucht werden diese mit $grunt -serve ODER $ grunt -force zu umgehen. Ein Versuch die Anwendung mit $grunt -force auszuführen sollte jedoch vermieden werden.

 

DigitalOcean: Server Deployment

Im Gegensatz zu anderen Anbietern hat sich DigitalOcean hauptsächlich auf das Deployment von virtuellen Cloud Server konzentriert. Da hier in den vergangenen Jahren ständig optimiert wurde, kann nun in wenigen Sekunden eine neue virtuelle Maschine aufgesetzt werden.

In der Web-Oberfläche muss man zunächst ein Image auswählen dass eine Distribution oder ein anderes Paket wie Node.js, MongoDB, LEMP oder Docker sein kann. Im Anschluss wählt man noch die gewünschte Server Größe. Da gibt es verschiedene Stufen die man auswählen kann. Diese steigen von 512MB RAM für 5$ auf bis zu 64GB RAM für 640$. Der verfügbare Speicher (SSD Disk) steigt auch entsprechend an. Wer mehr Speicherkapazität benötigt kann sich zusätzlich ein Block Storage anhängen. Diese sind aktuell aber nur in NYC1 und SFO2 verfügbar. Die Kosten betragen 0,10$ je GB.

Digital Ocean: create droplet
Digital Ocean: create droplet

Im Anschluss kann man optional noch den Hostnamen angeben. Außerdem kann man bis zu zehn virtuelle Maschinen gleichzeitig mit demselben Image erstellen. Mit diesen drei Schritten ist man wirklich echt schnell und kann so in kurzer Zeit eine virtuelle Maschine aufsetzen. Wenn man dies einige Male gemacht hat, dauert es bis zum Zugriff auf den Server nur ein bis zwei Minuten.

Ein weitere Vorteil von DigitalOcean ist die sehr übersichtliche API. Hier kann man dann über einen einzigen Befehl einen neuen Server, mit entsprechenden vorinstallierten Anwendungen und SSL-Zertifikaten erstellen. Somit benötigt man auch kein root-Passwort mehr.

Deployment

Doch für was kann man das nun nutzen? Man kann mit DigitalOcean in kurzer Zeit ein komplexes Netzwerk in verschiedenen Datenzentren aufbauen. Denkbar wäre auch das Aufsetzten von Hochverfügbarkeits-Systemen (HA für high availability) die durch die Möglichkeit der Skalierung schnell angepasst werden können. Durch das schnelle Aufsetzten und die Nutzung der API ist es aber auch für Entwickler Teams ein hoher Vorteil. So können einheitliche Server aufgesetzt werden oder im Handumdrehen Test-Server erstellt werden, die die Applikation bereits installiert haben. Wie man dies durch die API realisieren kann, werde ich in einem weiteren Beitrag berichten.

 

DigitalOcean: Netzwerk in der Cloud

Mittlerweile gibt es jede Menge Cloud-Anbieter, bei denen man in kürzester Zeit komplexe Netzwerke in der Cloud aufsetzten kann. Die Verwendung reicht hier von der einfachen Installation einer virtuellen Maschine um z.B. Anwendungen zu testen bis hin zu so genannten „High Availability“ Systemen, die aufgrund der schnellen Skalierung in der Cloud von hohem Nutzen sein könne.

Die beliebtesten oder bekanntesten Anbieter bleiben wohl auch hier Amazon mit AWS, Microsoft mit Azure und Google mit ihrer Cloud Platform. Doch auch Anbieter wie 1&1 oder Strato bieten mittlerweile Cloud-Dienste an, um die ständig steigende Nachfrage zu decken.

Die Erfahrung macht es aus

Im Laufe der letzten Jahre habe ich mir immer wieder verschiedene Dienste angesehen und ausprobiert. Nach meiner Erfahrung kann ich sagen, dass es „die perfekte Lösung“ nicht gibt. Die Entscheidung welchen Anbieter oder Dienst man letzten Endes verwenden möchte hängt stark an der Anwendung, dem Budget sowie dem Unternehmen oder Entwickler, der sich damit auseinander setzen muss.

In diesem Beitrag möchte ich aber auf DigitalOcean eingehen. Im Vergleich so Amazon AWS ist DigitalOcean ein noch sehr junges Unternehmen. Richtig in Fahrt ist es erst im Jahr 2013 geworden. Mittlerweile wird es aufgrund der leicht zu implementierenden Deployment API in vielen Projekten verwenden (z.B. Laravel Forge). Das ist auch einer meiner Gründe, warum ich ein absoluter Fan davon bin.

Was man alles machen kann

Die grundsätzliche Funktionalität besteht darin, virtuelle Linux Server zu installieren. Dazu gibt es verschiedene Distributionen zur Auswahl sowie diverse Images mit vorinstallieren Anwendungen wie MongoDB, WordPress, Docker oder LEMP. Zusätzlich hat man noch die Möglichkeit, Netzwerke innerhalb eines Rechenzentrums einzurichten, Backups zu konfigurieren oder zusätzliche IPs zu ergänzen.

Ein weiterer Vorteil ist, das DigitalOcean eine wahnsinnig große Community mit sehr erfahrenen Experten besitzt. Hier gibt es zahlreiche Tutorials die man sich durchlesen kann umso Szenarien für die eigene Verwendung zu nutzen. Da man mit DigitalOcean doch sehr viel machen kann, werde ich  die einzelnen Bereiche in den nächsten Ausgaben beschreiben.

Lesbare URL’s in Laravel

Mit „lesbare“, „clean“ oder auch „pretty“ URL ist eine URL gemeint, die anstelle von technischen Wörtern oder Datenbank-ID’s lesbare Wörter enthält. Außerdem wird auf die Dateierweiterung wie .php oder .html verzichtet. Dabei sieht das nicht nur schön aus, sondern hat noch viele weitere Vorteile:

  • Benutzer können die Relevanz schneller bewerten (eine aussagekräftige URL wird in der Regel eher angeklickt als eine kryptische)
  • Benutzer können sich die URLs leichter merken
  • Externe Links und Lesezeichen auf eine Seite sind wesentlich länger gültig, da sie von internen technischen Änderungen unabhängig sind
  • Bei der Suchmaschinen-Optimierung werden neben dem Seiteninhalt auch Domain- und Dateinamen einzelner Seiten bewertet

Laravel

Im Laravel Projekt wird bereits eine .htaccess Datei mitgeliefert, die genau dies machen kann.

Allerdings kann es vorkommen, dass diese nicht mit Deinen Apache Einstellungen funktionieren. Darum habe ich hier mal ein paar Vorlagen erstellt.

Apache

Options +FollowSymLinks
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

Nginx

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

 

Neue Version vom URL-Shortener

Endlich ist es soweit! Die neue Webseite ist jetzt live.

ux9-relaunch
Die UX9-Webseite

Ich habe heute die neue Webseite von http://ux9.de veröffentlicht.

Der URL-Shortener strahlt nun in einem neuen Licht. Ein modernes Design und neue Funktionen sollen die Seite nun für noch mehr Leute interessant machen. Außerdem haben wir die Werbung für die meisten Links nun komplett abgeschalten. Bei veralteten Chrome und FireFox Plug-Ins, wird diese jedoch immer noch mit angezeigt.

Ausblick 2016

Zum Ende des Jahres werde ich ein weiteres Release veröffentlichen. Dann soll UX9 vollständig fertiggestellt sein. Die aktuellen Entwickler-Tools sind nur für einen kleinen Kreis zugänglich. Wenn ihr auch einen Zugang möchtet, dann könnt ihr euch einfach bei mir melden, oder euch für den Newsletter auf http://ux9.de anmelden.

Ihr könnt eure Ideen, für Erweiterungen, weiterhin über Twitter, GitHub oder mir per Mail mitteilen. Ich werde mir garantiert alle durchlesen und euch eine grobe Einteilung in ein Release mitteilen.