Apps auf der DigitalOcean App-Plattform mit benutzerdefiniertem Domain erstellen und bereitstellen

Tutorials
DNS

Einführung

Als Entwickler bauen wir oft Projekte nebenbei, sei es zum Spaß oder um etwas Neues zu lernen. Diese Projekte dienen auch als Nachweis unserer Fähigkeiten.

Sie sollten einen Arbeitsnachweis haben. Über Ihren Code hinaus sollten Benutzer in der Lage sein, Ihre Anwendung zu nutzen, und dafür sollte sie nicht nur unter localhost:3000 verfügbar sein, sondern über einen Link erreichbar sein. Um dies zu erreichen, müssen Sie Ihre Anwendung bereitstellen und sie einem benutzerdefinierten Domainnamen zuordnen, um die Lesbarkeit zu verbessern und das Teilen zu erleichtern.

In diesem Artikel werden Sie mit der DigitalOcean App Platform vertraut gemacht und sehen, wie einfach es ist, von der Bereitstellung einer Anwendung zur Zuordnung zu einer benutzerdefinierten Domain in nur wenigen Klicks zu gelangen.

Voraussetzungen

  1. Einen DigitalOcean-Account zum Zugriff auf die App Platform.

  2. Ein GitHub-Konto.

  3. Benutzerdefinierte Domain verfügbar bei NameCheap oder einer ähnlichen Plattform.

Was ist die DigitalOcean App-Plattform?

Die App-Plattform ist eine vollständig verwaltete Plattform als Dienstleistung (PaaS), die Entwicklern hilft, Anwendungen einfach zu erstellen, bereitzustellen und zu skalieren. Sie abstrahiert einen Großteil des Infrastrukturmanagements, sodass Sie sich auf den Code und die Bereitstellung konzentrieren können.

Es kann automatisch Code von Git-Anbietern wie GitHub und GitLab analysieren und erstellen und Ihre Anwendungen in die Cloud veröffentlichen. Es kann auch mit Container-Images veröffentlichen, die Sie bereits in das DigitalOcean Container Registry oder Docker Hub hochgeladen haben.

Mit Funktionen wie DDoS-Minderung, automatischen OS-Patch-Updates, vertikaler Skalierung, HTTP-Unterstützung, globalem CDN und Domainunterstützung macht die App-Plattform das Veröffentlichen und Verwalten Ihrer Apps einfach.

Schritt 1 – Bereitstellung mit der App-Plattform

Sobald die Anwendung bereit ist, können Sie sie aus Monorepos, Container-Images oder mit GitHub Actions bereitstellen.

Ein Monorepo ist ein versioniertes Code-Repository, das viele Projekte enthält. Während diese Projekte möglicherweise miteinander verbunden sind, sind sie oft logisch unabhängig und werden von verschiedenen Teams betrieben.

Lassen Sie uns sehen, wie wir Anwendungen mit der App-Plattform und GitHub bereitstellen können. Angenommen, Sie haben ein privates GitHub-Repository mit einer index.html-Datei, die diesen einfachen Hello-World-Code enthält:

index.html
<!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>

Über GitHub bereitstellen

  • Gehen Sie zur Apps-Seite 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.

  • Im Feld Quellverzeichnis geben Sie den Ordner an, der den Quellcode enthält, wie im Bild unten gezeigt. Da unser Demorepository nur aus einer index.html-Datei im Stammverzeichnis besteht, werden wir mit dem Standardwert / fortfahren. Wenn Ihr Code einer Monorepo-Struktur folgt, stellen Sie sicher, dass Sie das spezielle Verzeichnis auswählen, in dem sich der Code befindet.

Wählen Sie auto-deploy, dies wird automatisch neu bereitgestellt, wenn Sie eine Änderung pushen:

  • Konfigurieren Sie Ressourcen für Ihre App und klicken Sie auf Weiter. Dies ist, was Sie sehen werden:

  • Anschließend werden einige Überprüfungen durchgeführt, bevor die App schließlich bereitgestellt wird. Für kompliziertere Apps, wie solche, die eine API verwenden, müssen Sie möglicherweise Umgebungsvariablen hinzufügen, in den nächsten Seiten können Sie diese konfigurieren.

  • Im nächsten Schritt können Sie den Namen der Anwendung bearbeiten und die Ressource auswählen, unter der Ihre App bereitgestellt wird.

  • Dann klicken Sie auf Weiter, um die Seite Überprüfung anzuzeigen, auf der Sie weitere App-bezogene Informationen wie Abrechnung, Standort usw. sehen können. Klicken Sie dann abschließend auf Ressource erstellen, um die App bereitzustellen.

  • Dies wird einige Minuten dauern. Sobald die App bereitgestellt ist, können Sie die App unter der URL und anderen Details auf der Seite Übersicht anzeigen.

Wenn Sie alle oben genannten Schritte befolgen, wird Ihre Anwendung wie folgt aussehen: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Schritt 2: Zuordnung der Anwendung zu einer benutzerdefinierten Domain

Da Ihre Anwendung erfolgreich bereitgestellt wurde und über eine ondigitalocean.app-Domain verfügt, erfahren Sie in diesem Schritt, wie Sie sie einer benutzerdefinierten Domain zuordnen können.

Es gibt zwei Möglichkeiten, wie Sie eine benutzerdefinierte Domain zu Ihrer App hinzufügen können:

  1. Verwendung von Automatisierung

  2. Mit dem Bedienfeld verwenden

Für diesen Artikel erfahren Sie, wie Sie eine benutzerdefinierte Domain mithilfe des Bedienfelds konfigurieren können.

  • Melden Sie sich bei DigitalOcean Cloud an und wählen Sie die App aus, der Sie die Domain hinzufügen möchten, und klicken Sie dann auf die Registerkarte Einstellungen.

  • Klicken Sie dann auf den Bearbeiten-Link rechts von Domains und klicken Sie dann auf die Schaltfläche Domain hinzufügen.

  • Sobald Sie Ihren Domainnamen im Textfeld unten eingeben, erhalten Sie zwei Optionen zum Hinzufügen Ihrer benutzerdefinierten Domain.

  • Sie können die benutzerdefinierte Domain entweder unter Verwendung der Nameserver von DigitalOcean oder unter Verwendung eines CNAME-Anbieters hinzufügen.

  • 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. Überprüfen Sie unser Tutorial zu Nameserver von DigitalOcean von gängigen Domain-Registraren angeben für Anleitungen zur Delegierung Ihrer Domain an die Nameserver von DigitalOcean von beliebten Registraren.

  • Sie können auch einen CNAME-Eintrag für Ihre Domain hinzufügen. Wenn Ihr DNS-Anbieter nicht DigitalOcean ist, überprüfen Sie deren Dokumentation für Anweisungen. Verwenden Sie die copy-Schaltfläche, um das ondigitalocean.app-Alias zu kopieren und fügen Sie es in den CNAME-Eintrag bei Ihrem DNS-Anbieter ein, um Ihre benutzerdefinierte Domain auf Ihre App Platform-App zu verweisen. Sobald dies erledigt ist, klicken Sie auf die Domain hinzufügen-Schaltfläche.

Für fortgeschrittene Einstellungen im Zusammenhang mit der Domain verweisen Sie auf unsere Dokumentation zu Wie man Domains in der App-Plattform verwaltet.

Hinzufügen von auf Namecheap gekauften Domains

Sie können den obigen Schritten folgen, um benutzerdefinierte Domains hinzuzufügen, die auf jeder Plattform gekauft wurden. In diesem Beispiel sehen wir uns an, wie Sie die Einstellungen für eine auf Namecheap gekaufte Domain konfigurieren würden.

  • Melden Sie sich bei Ihrem Namecheap-Konto an. Klicken Sie auf Domainliste, wählen Sie die Domain aus, die Sie hinzufügen möchten, und klicken Sie dann auf Verwalten.

  • Gehen Sie dann zum Tab Erweiterte DNS und klicken Sie auf Neuen Eintrag hinzufügen.

  • Gehen Sie anschließend zum Steuerungspanel von DigitalOcean und kopieren Sie den Link aus dem unten angezeigten Feld.

  • Fügen Sie ihn in Namecheap ein und speichern Sie Ihre Änderungen.

Das war’s! Jetzt ist Ihre Anwendung mit Ihrer benutzerdefinierten Domain verknüpft.

Fazit

In diesem Artikel haben Sie gelernt, wie Sie Ihre Anwendungen bereitstellen und benutzerdefinierte Domains mit DigitalOcean verwalten können.

Benutzerdefinierte Domains können dazu beitragen, dass Ihre Website in Suchmaschinen höher eingestuft wird, da sie einzigartig und relevant für Ihre Marke sind. Es erleichtert auch den Menschen, sich die URL zu merken und auf Ihre Anwendung zuzugreifen.

Hier sind einige bewährte Verfahren für eine benutzerdefinierte Domain:

  • Stellen Sie die Sicherheit von SSL/TLS sicher, da sie Daten verschlüsselt und die SEO durch Bereitstellung einer sicheren Verbindung verbessert.

  • Überwachen Sie regelmäßig die Gesundheit der Domain, um Probleme zu erkennen und eine optimale Leistung für Benutzer aufrechtzuerhalten.

  • Erstellen Sie Backups, um sich vor Datenverlust zu schützen und eine schnelle Wiederherstellung zu ermöglichen, wenn Ihre Domain oder Website Probleme hat.

Nächste Schritte

Wenn Sie aus irgendeinem Grund beschließen, Ihre App einzustellen, stellen Sie sicher, dass Sie die benutzerdefinierte Domain entfernen, bevor Sie die App löschen. Gehen Sie dazu zum Steuerfeld, klicken Sie auf Ihre App und dann auf Einstellungen. Klicken Sie anschließend auf den Bearbeiten-Link rechts neben Domains und dem Menüpunkt mit den drei Punkten (…), und klicken Sie schließlich auf Domain entfernen, um die Domain zu entfernen.

Hier ist eine Liste von Ressourcen, die nützlich sein können:

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain