IBM Cloud Docs
Serverunabhängige Webanwendung und API mit Code Engine

Serverunabhängige Webanwendung und API mit Code Engine

Für dieses Lernprogramm können Kosten anfallen. Mit dem Kostenschätzer können Sie eine Kostenschätzung für Ihre voraussichtliche Nutzung generieren.

In diesem Lernprogramm erstellen Sie eine serverunabhängige Webanwendung mit einem Bucket in Object Storage und implementieren das Anwendungs-Back-End mit IBM Cloud Code Engine und IBM Cloudant als JSON-Dokumentdatenbank.

Statische Websites eignen sich hervorragend für Leistung und Sicherheit. Ihr Architekturmodell wird in Bezug auf JavaScript, API und Markup manchmal als Jamstack bezeichnet. In diesem Lernprogramm erstellen Sie eine statische Website, die auf Object Storage gehostet wird. Die Website verfügt über ein Gästebuch, das JavaScript verwendet, um auf eine API zuzugreifen, um Einträge abzurufen oder einen neuen Eintrag hinzuzufügen. Die API für die Interaktion mit der Sicherungsdatenbank wird mit einem serverunabhängigen Ansatz implementiert. Er wird als Back-End-App oder Mikroservice in IBM Cloud Code Engine bereitgestellt. Das Back-End wird nur ausgeführt, wenn es erforderlich ist. Dadurch fallen Gebühren an, wenn es verwendet wird.

Ziele

  • Serverunabhängiges Back-End und eine Datenbank bereitstellen
  • Bereitstellen einer REST-API als serverunabhängige App
  • Eine statische Website hosten

Die in diesem Lernprogramm gezeigte Anwendung ist eine Gästebuch-Website, in der Benutzer Nachrichten posten können.

des

  1. Der Benutzer greift auf die Anwendung zu, die im Bucket in Object Storage gehostet wird
  2. Die Webanwendung ruft eine Back-End-API auf.
  3. Die App mit der Back-End-API wird in Code Engine implementiert.
  4. Das Back-End verwendet IBM Cloudant zum Speichern und Abrufen von Gästebucheinträgen.

Datenbank 'guestbook' für Gästebuch erstellen

Beginnen wir mit der Erstellung einer IBM Cloudant-Serviceinstanz. IBM Cloudant ist eine vollständig verwaltete JSON-Dokumentdatenbank. Es basiert auf Apache CouchDB und ist mit diesem kompatibel.

  1. Gehen Sie im Katalog unter "Services " zur Kategorie "Datenbanken ". Klicken Sie auf die Kachel für IBM Cloudant. Gehen Sie in dem Dialogfenster, das daraufhin geöffnet wird, wie folgt vor:

    1. Wählen Sie unter Multi-Tenant eine Region aus.

    2. Wählen Sie unter Cloudant-Instanz konfigurieren einen eindeutigen Namen für den Service aus, z. B. <yourinitials>-guestbook-db.

    3. Wählen Sie eine Ressourcengruppe aus.

    4. Wählen Sie IAM als Authentifizierungsmethode aus.

    5. Wählen Sie den Lite-Plan aus. Wenn Sie in Ihrem Konto bereits einen Lite-Plan verwenden, wählen Sie einen anderen Serviceplan aus.

    6. Klicken Sie auf Erstellen.

  2. Zurück in IBM Cloud Ressourcenliste, unter Dienstleistungen, klicken Sie auf die von Ihnen erstellte IBM Cloudant-Instanz, um die Seite mit den vollständigen Details der Instanz zu öffnen. Hinweis: Gegebenenfalls müssen Sie warten, bis sich der Status für den Service in Active ändert.
  3. Klicken Sie auf Dashboard starten, um das Dashboard auf einer neuen Browserregisterkarte zu öffnen.
  4. Klicken Sie in der rechten oberen Ecke auf Datenbank erstellen. Geben Sie guestbook als Namen ein und wählen Sie unter Partitionierung die Option Nicht partitioniert aus. Klicken Sie auf Erstellen, um die Datenbank zu erstellen.

Serverloses Back-End erstellen

In diesem Abschnitt erstellen Sie die serverunabhängige Back-End-App mit Code Engine. Für serverlose Apps fallen nur Gebühren für die Ausführungszeit an, die ideal für selten benötigte Lösungen wie ein Gästebuch ist.

Code Engine-Projekt erstellen

  1. Navigieren Sie zur Seite IBM Cloud Code Engine Übersicht.
  2. Klicken Sie im linken Teilfenster auf Projekte und anschließend auf Erstellen.
    • Wählen Sie eine Position (Standort) aus.
    • Verwenden Sie <yourinitials>-guestbook als Projektnamen und wählen Sie dieselbe Ressourcengruppe wie zuvor aus.
    • Klicken Sie auf Erstellen.
    • Warten Sie, bis sich der status des Projects zu Aktiv ändert.
  3. Klicken Sie auf den Projektnamen, um das Projekt-Dashboard aufzurufen.

Back-End-App erstellen und implementieren

  1. Klicken Sie im Projekt-Dashboard auf Anwendungen und anschließend auf Erstellen.
  2. Geben Sie im neuen Dialog guestbook-backend als Namen ein.
  3. Lassen Sie Container-Image ausgewählt und verwenden Sie icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest als Bildreferenz. Sie verwendet ein bereits vorhandenes Container-Image.
  4. Wählen Sie unter Instanzressourcen 0.25 vCPU / 0.5 GB für CPU und Hauptspeicher aus. Für diesen App-Typ sind nicht viele Ressourcen erforderlich.
  5. Erhöhen Sie die Mindestanzahl der Instanzen auf 1 und reduzieren Sie die Maximalanzahl der Instanzen auf 2. Das Minimum von eins macht die App während der ersten Tests reaktionsfähiger. Sie könnten sie später wieder auf null reduzieren.
  6. Klicken Sie auf Erstellen, um die neue Back-End-App für das Gästebuch bereitzustellen. Beachten Sie, dass die Implementierung ohne den nächsten Schritt zur Erstellung einer Servicebindung mit einem Codefehler fehlschlägt.
  7. Erstellen Sie eine Servicebindung für die Datenbank.
    1. Klicken Sie auf die Registerkarte "Service-Bindungen ".
    2. Klicken Sie auf Erstellen.
    3. Klicken Sie auf IBM Cloud-Serviceinstanz und wählen Sie Ihre Datenbank aus der Dropdown-Liste aus.
    4. Übernehmen Sie für Role den Wert Writer.
    5. Klicken Sie auf Hinzufügen.
  8. Warten Sie, bis die Bereitstellung als grün und bereit gemeldet wird. Klicken Sie auf Anwendung testen und anschließend auf Anwendungs-URL. Die Back-End-App sollte geladen werden und eine Seite mit dem Hinweis healthy zurückgeben. Speichern oder kopieren Sie die Anwendungs-URL, da sie für den nächsten Teil benötigt wird.

Anstatt das vordefinierte Container-Image zu verwenden, können Sie das Image selbst erstellen. Dies kann außerhalb von oder mit Hilfe von Code Engine erfolgen. Wenn Sie das vordefinierte Container-Image nicht verwenden und wenn Verwendung einer privaten Container-Registry. Möglicherweise sind zusätzliche Schritte erforderlich. Die Quelle finden Sie unter https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

Web-App bereitstellen

Erstellen Sie ein Object Storage-Bucket, das mit statischem Website-Hosting konfiguriert ist und die Dateien für die Gästebuch-JavaScript-Anwendung enthält, die die IBM Cloudant-Datenbank verwendet.

Erstellen Sie eine Object Storage-Instanz:

  1. Wählen Sie Object Storage im Katalog aus.
  2. Wählen Sie IBM Cloud als Infrastruktur und Standard als Plan aus.
  3. Geben Sie einen eindeutigen Servicenamen für die Instanz ein, zum Beispiel <yourinitials>-guestbook-cos.
  4. Wählen Sie eine Ressourcengruppe aus.
  5. Klicken Sie auf Erstellen

Erstellen Sie ein Bucket, das für das Hosting statischer Websites konfiguriert ist:

  1. Klicken Sie auf Bucket erstellen.
  2. Klicken Sie auf Bucket anpassen.
  3. Geben Sie einen Bucketnamen ein, der für alle IBM-Konten eindeutig ist. Versuchen Sie <yourinitials>-guestbook.
  4. Wählen Sie für die Ausfallsicherheit Regional aus.
  5. Wählen Sie einen Standort aus, der mit der IBM Cloudant-Instanz konsistent ist.
  6. Behalten Sie die Speicherklasse-Standardeinstellung bei
  7. Blättern Sie abwärts zu Statisches Website-Hosting und klicken Sie auf Hinzufügen+.
  8. Lassen Sie die Routing-Regeln (einzeln) ausgewählt und fügen Sie das Indexdokument index.html hinzu.
  9. Klicken Sie für den öffentlichen Zugriff auf Ein
  10. Klicken Sie auf Speichern.
  11. Blättern Sie bis zum Ende abwärts und klicken Sie auf Bucket erstellen

Kopieren Sie die Dateien im Verzeichnis docs von https://github.com/IBM-Cloud/serverless-guestbook/tree/ce in das Bucket:

  1. Öffnen Sie https://github.com/IBM-Cloud/serverless-guestbook/tree/ce in einer neuen Registerkarte.

  2. Laden Sie eine ZIP-Datei herunter, indem Sie auf Code und dann ZIP-Datei herunterladen klicken.

  3. Dekomprimieren Sie die Datei und navigieren Sie zum Verzeichnis docs der dekomprimierten Datei.

  4. Bearbeiten Sie guestbook.js - ersetzen Sie den Wert von API-URL durch die Anwendungs-URL aus dem vorherigen Abschnitt.

    Stellen Sie sicher, dass der URI nicht mit einem Schrägstrich (/) endet. Andernfalls funktioniert die App nicht.

  5. Öffnen Sie die Bucketansicht Objekte und ziehen Sie die Dateien guestbook.js und index.html in das COS-Bucket und legen Sie sie dort ab.

  6. Navigieren Sie zur Registerkarte Konfiguration für das Bucket. Suchen Sie im Abschnitt "Endpunkte" den Abschnitt "Statische Website-Hosting-Endpunkte ". Kopieren Sie den öffentlichen Endpunkt in eine Browser-Registerkarte.

  7. Sie sollten die Gästebuchseite sehen.

  8. Neue Einträge zum Gästebuch hinzufügen.

Screenshot für Gästebuch
Screenshot für Gästebuch

Ressourcen entfernen

So löschen Sie das erstellte Bucket und den Object Storage-Service:

  1. Navigieren Sie zu den Object Storage-Bucketobjekten
  2. Wählen Sie das Kästchen in der Titelzeile aus, um alle Objekte im Bucket auszuwählen
  3. Klicken Sie auf Objekte löschen.
  4. Wählen Sie rechts oben im Menü Aktionen auf der Bucketobjektseite Bucket löschen aus
  5. Wählen Sie oben rechts im Menü "Instanz bearbeiten" Object Storage die Option "Instanz löschen" aus

Gehen Sie folgendermaßen vor, um den erstellten IBM Cloudant-Service zu löschen:

  1. Navigieren Sie zur Ressourcenliste.
  2. Klicken Sie unter "Datenbanken" auf das Aktionsmenü neben dem <yourinitials>-guestbook-db-Dienst
  3. Klicken Sie auf Löschen.

Um die Anwendung und das Projekt Code Engine zu löschen,

  1. Navigieren Sie zur Landing-Page von Code Engine.
  2. Klicken Sie im linken Teilfenster auf Projekte.
  3. Überprüfen Sie in der Liste der Projekte das Gästebuchprojekt und klicken Sie anschließend auf Löschen.

Je nach Ressource wird diese möglicherweise nicht sofort gelöscht, sondern (standardmäßig für 7 Tage) aufbewahrt. Sie können die Ressource zurückfordern, indem Sie sie permanent löschen oder innerhalb des Aufbewahrungszeitraums wiederherstellen. In diesem Dokument erfahren Sie mehr zur Verwendung der Ressourcenrückforderung.

Zugehörige Inhalte