Vorbereitende Schritte

Aktivieren Sie die Webvorschau in der IBM Cloud-Konsole. Weitere Informationen zum Aktivieren der Webvorschau finden Sie im Abschnitt Cloud Shell-Funktionen für ein Konto aktivieren oder inaktivieren.

Ports für die Webvorschau

Sie können eine Vorschau einer App anzeigen, indem Sie auf das Symbol Webvorschau Symbol in der Menüleiste von Cloud Shell klicken. Die Webvorschau ist für alle Apps verfügbar, die an den folgenden Ports HTTP-Anforderungen überwacht:

• 3000
• 8080
• 8081
• 8082
• 8083
• 8084
• 9080

Wie bei Ihrem lokalen System kann an jedem Port zu jedem Zeitpunkt immer nur jeweils eine Anwendung ausgeführt werden. Wenn mehrere Ihrer Apps an demselben Port empfangsbereit sind, hat dies Portkonflikte zur Folge.

Vorschau von Apps anzeigen, die direkt in Cloud Shell ausgeführt werden

Cloud Shell umfasst eine Vielzahl von Plug-ins, Tools und Laufzeiten, die Sie für die Arbeit mit Apps, die Sie entwickeln, verwenden können. Da Cloud Shell-Speicher temporär ist, ist es für die Arbeit mit einer App am einfachsten, diese zunächst in Ihren Cloud Shell-Arbeitsbereich zu kopieren oder zu klonen, dann alle Änderungen vorzunehmen und anschließend eine Vorschau anzuzeigen.

Der folgende Beispielworkflow zeigt, wie Sie eine Vorschau einer Node.js Express-Beispielanwendung erstellen können, die in einem GitHub-Repository gehostet wird.

1. Erstellen Sie in einer Cloud Shell-Sitzung in Ihrem Ausgangsverzeichnis einen Klon Ihrer App-Quelle.

   git clone https://github.com/IBM/nodejs-express-app.git
   

   Wechseln Sie dann in das Verzeichnis, in dem sich der Klon Ihrer App befindet.

   cd nodejs-express-app
   

   An dieser Stelle können Sie alle Änderungen an Ihrem App-Code vornehmen, zum Beispiel mit dem Texteditor vim.

2. Starten Sie Ihre App in Cloud Shell.

   Zum Starten dieser Node.js-Beispielapp müssen Sie zunächst alle Projektabhängigkeiten herunterladen.

   npm install
   

   Anschließend können Sie die App starten, sodass sie auf einem Web-Server in Cloud Shell ausgeführt wird.

   npm run start
   

   Nachdem die App gestartet worden ist, sollten Sie die Nummer des Ports notieren, an dem Ihr Web-Server empfangsbereit ist. Als Port muss einer der für die Vorschau in Cloud Shell verfügbaren Ports verwendet werden. Wenn diese Beispielapp gestartet wird, gibt sie die folgenden Informationen aus, welche zeigen, dass sie an Port 3000 empfangsbereit ist:

   > nodejsexpressapp@1.0.0 start /home/my-user-name/nodejs-express-app
   > node server/server.js
   
   App UI available http://localhost:3000
   Swagger UI available http://localhost:3000/swagger/api-docs
   

3. Klicken Sie in der Menüleiste von Cloud Shell auf das Symbol Webvorschau und wählen Sie den Port aus, auf dem Ihr Server empfangsbereit ist. Wählen Sie für die Node.js-Beispielapp den Port mit der Portnummer 3000 aus.

   Ihre Webvorschau wird in einem neuen Browserfenster geöffnet und unter dem Äquivalent zu der Adresse http://localhost:3000 angezeigt. Es müsste jetzt die erste Anzeige der Benutzerschnittstelle Ihrer App zu sehen sein.

   Wenn eine Nachricht mit dem Inhalt angezeigt wird, dass nichts für eine Vorschau in Cloud Shell vorhanden ist, ist der Server, auf dem Ihre App ausgeführt wird, nicht am angegebenen Port empfangsbereit. Überprüfen Sie, ob der Server auch tatsächlich an dem Port empfangsbereit ist, den Sie für die Vorschau verwenden, und aktualisieren Sie die Anzeige der Vorschauseite.

Jetzt, wo Sie Ihre App in der Vorschau sehen, können Sie alle Änderungen sehen, die Sie vorgenommen haben, indem Sie die App bei Bedarf neu starten und die Seite aktualisieren. Stellen Sie sicher, dass Sie alle vorgenommenen Änderungen in Ihrem GitHub-Repository festschreiben oder Ihre Änderungen anderweitig herunterladen, da Ihr Arbeitsbereichsspeicher temporär ist.

Vorschau von Anwendungen, die in einem Kubernetes-Pod laufen

Sie können Cloud Shell auch zur Vorschau von Apps verwenden, die in Kubernetes ausgeführt werden, wie zum Beispiel ein Prometheus-Dashboard oder Ihre typische Web-App. Da Anwendungen, die in einem Pod in einem Kubernetes-Cluster ausgeführt werden, einen internen Port verwenden, müssen Sie den Port des Pods freigeben. Dazu können Sie entweder einen Dienst erstellen oder eine Portweiterleitung einrichten.

Wenn Sie einen Service erstellen, müssen Sie diesen Service öffentlich zugänglich machen, den Zugriff mittels Authentifizierung sichern und eine Lastausgleichsfunktion für Anwendungen bzw. Application Load Balancer (ALB) für den Service einrichten. Weitere Informationen finden Sie unter Verbinden von Anwendungen mit Diensten.

Wenn Sie Apps entwickeln und testen, ist die Portweiterleitung die einfachere Methode, um rasch eine Vorschau der Apps in Ihrem Cluster zu erhalten. Es erfordert viel weniger Vorabkonfiguration, aber Sie müssen es auch bei jedem Neustart des Pods neu konfigurieren. Die folgenden Schritte zeigen im Einzelnen, wie Sie die Portweiterleitung und die Vorschau einer App einrichten, die in einem IBM Cloud Kubernetes Service-Cluster ausgeführt wird.

1. Legen Sie in einer Cloud Shell-Sitzung als Kontext fest, in welchem Cluster Ihre App ausgeführt wird. Mit dieser Einstellung können Sie kubectl Befehle verwenden, um mit Ihrem Cluster zu arbeiten. Weitere Informationen finden Sie unter Installation der CLI.

2. Suchen Sie den Namen des Pods, in dem Ihre App ausgeführt wird.

   kubectl get pods
   

   Der Name des Pods wird in der Spalte unter NAME aufgeführt, zum Beispiel my-pod-123abc.

   NAME            READY   STATUS    RESTARTS   AGE
   my-pod-123abc   1/1     Running   0          9d
   

3. Suchen Sie den Port im Pod, den Sie anzeigen möchten, indem Sie den Befehl kubectl describe auf dem Pod ausführen.

   kubectl describe pod my-pod-123abc
   

   Im Abschnitt Containers wird der lokale Port als Wert für Port aufgeführt, was im vorliegenden Beispiel der Angabe 6000 entspricht.

   Containers:
     cluster-agent:
     Container ID:   containerd://1234abcd5678efab90cde603e4ba6986fdaf26daae94c4f309
     Image:          us.icr.io/my-registry/my-image:0.5.0-dev.0.1234
     Image ID:       us.icr.io/my-registry/my-image@sha256:abc123def456abc789def012
     Port:           6000/TCP
     Host Port:      0/TCP
   

4. Richten Sie die Portweiterleitung ein, indem Sie den Befehl kubectl port-forward ausführen. Stellen Sie sicher, dass Sie einen der für die Webvorschau in Cloud Shell verfügbaren Ports auswählen.

   Der folgende Befehl gibt zum Beispiel die lokale Empfangsbereitschaft an Port 8080 und die Weiterleitung an Port 6000 im Pod an.

   kubectl port-forward pod/my-pod-123abc 8080:6000
   

   Nachdem die Portweiterleitung jetzt eingerichtet ist, können Sie eine Vorschau Ihrer App anzeigen.

5. Klicken Sie in der Menüleiste von Cloud Shell auf das Symbol Webvorschau und wählen Sie den Port aus, der an Ihren Pod weitergeleitet wird.

   Ihre Webvorschau wird in einem neuen Browserfenster geöffnet. Sie können den ersten Bildschirm der Benutzeroberfläche Ihrer Anwendung sehen.

   Wenn Sie eine Meldung sehen, die besagt, dass es in Cloud Shell nichts zur Vorschau gibt, hört der Server, auf dem Ihre Anwendung läuft, nicht auf dem ausgewählten Port. Überprüfen Sie, ob Ihr Server am internen Port des Pods empfangsbereit ist und der Port, den Sie für die Vorschau verwenden, an den richtigen internen Port weitergeleitet wird.

Vorschau anderer Endpunkte an einem Port anzeigen

Nachdem Sie die Webvorschau geöffnet haben, können Sie alle anderen Endpunkte anzeigen, die Ihr Server an demselben Port überwacht. Die Webvorschau wird unter einer URL geöffnet, die http://localhost:<port> entspricht. Wenn Sie einen anderen Endpunkt anzeigen möchten, fügen Sie den entsprechenden Pfad zu der URL für die Webvorschau hinzu.

Die Node.js-Beispielapp gibt zum Beispiel die folgenden URLs aus:

App UI available http://localhost:3000
Swagger UI available http://localhost:3000/swagger/api-docs

Wenn Sie die Swagger-Benutzerschnittstelle (UI) anzeigen möchten, fügen Sie /swagger/api-docs wie folgt zu der URL für die Webvorschau hinzu:

https://p3000-abcd1234-ef56-a1b2-b122-a122560ba24f.dp3.us-south.shell.cloud.ibm.com/swagger/api-docs