Einführung
Als Entwickler arbeiten wir oft gemeinsam an Projekten, sei es zum Spaß oder um Neues zu lernen. Diese Projekte dienen auch dazu, unsere Fähigkeiten unter Beweis zu stellen.
Sie benötigen einen Arbeitsnachweis. Neben Ihrem Code müssen Benutzer Ihre Anwendung auch nutzen können. Daher sollte sie nicht nur unter localhost:3000 erreichbar sein, sondern über einen Link zugänglich sein. Um dies zu erreichen, müssen Sie Ihre Anwendung bereitstellen und sie einer benutzerdefinierten Domain zuordnen, um die Lesbarkeit zu verbessern und das Teilen zu vereinfachen.
Voraussetzungen
- Ein DigitalOcean-Konto ist erforderlich, um auf die Anwendungsplattform zugreifen zu können.
- Ein GitHub-Konto
- Eine eigene Domain ist bei NameCheap oder einer ähnlichen Plattform erhältlich.
Was ist die DigitalOcean-Anwendungsplattform?
Die App-Plattform ist eine vollständig verwaltete Platform-as-a-Service (PaaS), die Entwicklern das einfache Erstellen, Bereitstellen und Skalieren von Anwendungen ermöglicht. Sie reduziert den Aufwand für die Infrastrukturverwaltung erheblich und erlaubt es Ihnen, sich auf die Programmierung und Bereitstellung zu konzentrieren.
Es kann Code von Git-Anbietern wie GitHub und GitLab automatisch analysieren und kompilieren und Ihre Anwendungen in der Cloud veröffentlichen. Außerdem kann es Container-Images verwenden, die Sie zuvor in die DigitalOcean Container Registry oder Docker Hub hochgeladen haben.
Mit Funktionen wie DDoS-Schutz, automatischem OS-Patching, vertikaler Skalierung, HTTP-Unterstützung, globalem CDN und Domain-Unterstützung vereinfacht die App-Plattform die Veröffentlichung und Verwaltung Ihrer Apps.
Schritt 1 – Bereitstellung über die App-Plattform
Sobald die Anwendung fertig ist, können Sie sie aus Monorepos, Container-Images oder mithilfe von GitHub Actions bereitstellen.
Ein Monorepo ist ein versionskontrolliertes Code-Repository, das viele Projekte beherbergt. Obwohl diese Projekte miteinander verwandt sein können, sind sie oft logisch unabhängig und werden von verschiedenen Teams verwaltet.
Schauen wir uns an, wie wir Apps mithilfe der App-Plattform mit GitHub bereitstellen können. Angenommen, Sie haben ein privates GitHub-Repository mit einer index.html-Datei, die diesen einfachen „Hello World“-Code enthält:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log("Hello, World!");
</script>
</body>
</html>Bereitstellung mit GitHub
Gehen Sie zur Seite „Apps“ und klicken Sie auf „App erstellen“.
Verbinden Sie Ihr GitHub-Konto und wählen Sie dann das GitHub-Repository aus, das Ihren Quellcode enthält.
Geben Sie im Abschnitt „Quellverzeichnis“ den Ordner an, der den Quellcode enthält (siehe Abbildung unten). Da unser Demo-Repository nur eine index.html-Datei im Stammverzeichnis enthält, verwenden wir das Standardverzeichnis /. Falls Ihr Code einer Monorepo-Struktur folgt, wählen Sie bitte das Verzeichnis aus, in dem sich der Code befindet.
Wählen Sie „Automatische Bereitstellung“, dann wird die Bereitstellung automatisch wiederholt, sobald Sie eine neue Änderung vornehmen:
Konfigurieren Sie die Ressourcen für Ihre Anwendung und klicken Sie auf Weiter. Folgendes wird Ihnen angezeigt:
Anschließend werden einige Prüfungen durchgeführt, bevor die Anwendung endgültig ausgeführt wird. Bei komplexeren Anwendungen, beispielsweise solchen, die APIs verwenden, müssen Sie möglicherweise Umgebungsvariablen hinzufügen, die Sie auf den folgenden Seiten konfigurieren können.
Anschließend können Sie den Anwendungsnamen bearbeiten und das Repository auswählen, unter dem Ihre Anwendung bereitgestellt werden soll.
Klicken Sie anschließend auf „Weiter“, um zur Übersichtsseite zu gelangen, auf der Sie weitere Informationen zur App wie Abrechnung, Standort usw. finden. Klicken Sie abschließend auf „Ressource erstellen“, um die App auszuführen.
Dies dauert einige Minuten. Sobald die App gestartet ist, werden die URL der App und weitere Details auf der Übersichtsseite angezeigt.
Schritt 2: Ordnen Sie die App einer benutzerdefinierten Domäne zu.
Nachdem Ihre App nun erfolgreich bereitgestellt wurde und die Domain ondigitalocean.app verwendet, erfahren Sie in diesem Schritt, wie Sie diese einer benutzerdefinierten Domain zuordnen können.
Es gibt zwei Möglichkeiten, Ihrer App eine benutzerdefinierte Domain hinzuzufügen:
- Automatisierung nutzen
- Über das Bedienfeld
In diesem Artikel erfahren Sie, wie Sie über das Control Panel eine benutzerdefinierte Domain konfigurieren können.
- Melden Sie sich bei DigitalOcean Cloud an und wählen Sie die Anwendung aus, der Sie die Domain hinzufügen möchten. Klicken Sie anschließend auf die Registerkarte „Einstellungen“.
- Klicken Sie als Nächstes auf den Link „Bearbeiten“ rechts neben „Domains“ und dann auf die Schaltfläche „Domain hinzufügen“.
Sobald Sie mit der Eingabe Ihres Domainnamens im unten stehenden Textfeld beginnen, stehen Ihnen zwei Optionen zum Hinzufügen Ihrer benutzerdefinierten Domain zur Verfügung.
Sie können eine benutzerdefinierte Domain mithilfe der Nameserver von DigitalOcean hinzufügen oder einen CNAME-Anbieter verwenden.
Um die Nameserver von DigitalOcean zu verwenden, kopieren Sie diese (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) und fügen Sie sie in die Nameserver-Einträge Ihres Domain-Registrars ein. Anleitungen zum Zuordnen Ihrer Domain zu den DigitalOcean-Nameservern bei gängigen Registraren finden Sie in unserem Tutorial „Nameserver von gängigen Domain-Registraren auf DigitalOcean umleiten“.
Sie können Ihrer Domain auch einen CNAME-Eintrag hinzufügen. Falls Sie nicht DigitalOcean als DNS-Anbieter nutzen, finden Sie die entsprechenden Anweisungen in dessen Dokumentation. Kopieren Sie den Alias „ondigitalocean.app“ mithilfe der Schaltfläche „Kopieren“ und fügen Sie ihn im CNAME-Eintrag Ihres DNS-Anbieters ein, um Ihre benutzerdefinierte Domain auf Ihre App-Plattform-App zu verweisen. Klicken Sie anschließend auf die Schaltfläche „Domain hinzufügen“.
Hinzufügen von Domains, die bei Namecheap gekauft wurden
Sie können die oben genannten Schritte befolgen, um benutzerdefinierte Domains hinzuzufügen, die auf einer beliebigen Plattform erworben wurden. In diesem Beispiel sehen wir uns an, wie Sie die Einstellungen für eine bei Namecheap gekaufte Domain konfigurieren.
- Melden Sie sich in Ihrem Namecheap-Konto an. Klicken Sie auf „Domainliste“, wählen Sie die Domain aus, die Sie hinzufügen möchten, und klicken Sie anschließend auf „Verwalten“.
- Wechseln Sie anschließend zur Registerkarte „Erweiterte DNS-Einstellungen“ und klicken Sie auf „Neuen Eintrag hinzufügen“.
Gehen Sie anschließend zur DigitalOcean-Systemsteuerung und kopieren Sie den unten stehenden Link.
Füge es in Namecheap ein und speichere deine Änderungen.
Ergebnis
In diesem Artikel haben Sie gelernt, wie Sie Ihre Anwendungen bereitstellen und benutzerdefinierte Domänen mit DigitalOcean verwalten.
