Avant de commencer

Activez l'Aperçu Web dans la console IBM Cloud. Pour plus d'informations sur l'activation de l'aperçu Web, voir Activation ou désactivation des fonctions shell Cloud pour un compte.

Ports d'aperçu Web

Vous pouvez prévisualiser une application en cliquant sur l'icône d'Aperçu Web dans la barre de menus Cloud Shell. L'aperçu Web est disponible pour toutes les applications qui écoutent les demandes HTTP sur les ports suivants :

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

Comme sur votre système local, une seule application peut s'exécuter sur chaque port à un moment donné. L'utilisation de plusieurs applications à l'écoute sur le même port entraîne des conflits sur ce port.

Aperçu des applications s'exécutant directement dans Cloud Shell

Cloud Shell comprend de nombreux plug-in, outils et environnements d'exécution utilisables pour le développement de vos applications. L'espace de stockage de Cloud Shell étant temporaire, le moyen le plus simple de travailler sur une application est de la copier ou de la cloner dans l'espace de travail Cloud Shell, d'effectuer les modifications, puis de les prévisualiser.

L'exemple de flux de travail suivant montre comment vous pouvez prévisualiser un Node.js Express sample app qui est hébergé dans un dépôt GitHub.

1. Dans une session Cloud Shell, clonez la source de votre application dans votre répertoire de base.

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

   Puis, placez-vous dans le répertoire dans lequel votre application a été clonée.

   cd nodejs-express-app
   

   A ce stade, vous pouvez apporter toutes les modifications que vous souhaitez au code de votre application, par exemple dans l'éditeur de texte vim.

2. Démarrez votre application dans Cloud Shell.

   Pour démarrer cet exemple d'application Node.js, vous devez d'abord télécharger les dépendances du projet.

   npm install
   

   Vous pouvez ensuite démarrer l'application de manière qu'elle s'exécute sur un serveur Web dans Cloud Shell.

   npm run start
   

   Une fois l'application lancée, notez le port sur lequel votre serveur Web est à l'écoute. Pour que l'application puisse être prévisualisée dans Cloud Shell, le port doit être l'un des ports disponibles. Au démarrage, l'exemple d'application génère les informations suivantes, qui montrent qu'il est à l'écoute sur le port 3000.

   > 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. Dans la barre de menus Cloud Shell, cliquez sur l'icône Aperçu Web , puis sélectionnez le port d'écoute de votre serveur. Pour l'exemple d'application Node.js, sélectionnez 3000.

   Votre aperçu Web s'ouvre dans une nouvelle fenêtre de navigateur et affiche l'équivalent de http://localhost:3000. Le premier écran de l'interface utilisateur de votre application doit normalement s'afficher.

   Un message indiquant qu'il n'y a rien à prévisualiser dans Cloud Shell signifie que le serveur sur lequel s'exécute votre application n'est pas à l'écoute sur le port sélectionné. Vérifiez que votre serveur est à l'écoute sur le port prévisualisé et actualisez la page d'aperçu.

Maintenant que vous avez un aperçu de votre application, vous pouvez voir toutes les modifications que vous avez apportées en redémarrant l'application si nécessaire et en actualisant la page. N'oubliez pas de valider vos changements dans votre référentiel GitHub ou de les télécharger, car l'espace de stockage de votre espace de travail est temporaire.

Prévisualisation des applications exécutées dans un pod Kubernetes

Vous pouvez également utiliser Cloud Shell pour prévisualiser les applications qui s'exécutent dans Kubernetes, par exemple un tableau de bord Prometheus ou votre application Web standard. Étant donné que les applications exécutées dans un pod dans un cluster Kubernetes utilisent un port interne, vous devez exposer le port du pod. Vous pouvez le faire en créant un service ou en mettant en place une redirection de port.

Si vous créez un service, vous devez l'exposer publiquement, configurer l'authentification pour sécuriser son accès et configurer un équilibreur de charge d'application (ALB) qui lui soit destiné. Pour plus d'informations, voir Connecter les applications avec les services.

Si vous faites du développement et des tests d'application, l'acheminement de port permet de prévisualiser rapidement et plus simplement des applications dans votre cluster. Il nécessite beaucoup moins de configuration initiale, mais vous devez également le reconfigurer à chaque redémarrage du pod. La procédure suivante vous permet de configurer l'acheminement de port et de prévisualiser une application qui s'exécute dans un cluster IBM Cloud Kubernetes Service.

1. Dans une session Cloud Shell, définissez le cluster sur lequel votre application s'exécute en tant que contexte. Avec ce paramètre, vous pouvez utiliser les commandes kubectl pour travailler avec votre cluster. Pour plus d'informations, voir Installation du CLI.

2. Identifiez le nom du pod sur lequel s'exécute votre application.

   kubectl get pods
   

   Le nom du pod figure dans la colonne NAME, par exemple : my-pod-123abc.

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

3. Recherchez le port du module que vous souhaitez afficher en exécutant la commande kubectl describe sur le module.

   kubectl describe pod my-pod-123abc
   

   A la section Containers, le port local est la valeur de l'attribut Port, dans cet exemple : 6000.

   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. Configurez le transfert de port en exécutant la commande kubectl port-forward. Vous devez sélectionner l'un des ports disponibles pour l'aperçu Web dans Cloud Shell.

   Par exemple, la commande suivante est à l'écoute sur le port 8080 en local et le réachemine vers le port 6000 dans le pod.

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

   Maintenant que l'acheminement de port est configuré, vous pouvez prévisualiser votre application.

5. Dans la barre de menus Cloud Shell, cliquez sur l'icône Aperçu Web , puis sélectionnez le port envoyé à votre pod.

   Votre aperçu Web s'ouvre dans une nouvelle fenêtre de navigateur. Vous pouvez voir le premier écran de l'interface utilisateur de votre application.

   Si vous voyez un message indiquant qu'il n'y a rien à prévisualiser dans Cloud Shell, c'est que le serveur sur lequel votre application est exécutée n'écoute pas sur le port sélectionné. Vérifiez que votre serveur est en mode écoute sur le port interne du pod et que vous réacheminez le port que vous prévisualisez sur le port interne correct.

Aperçu d'autres noeuds finaux sur un port

Un fois qu'il est ouvert, l'aperçu Web permet d'afficher les autres noeuds finaux écoutés par votre serveur sur le même port. L'aperçu Web s'ouvre à une adresse URL équivalente à http://localhost:<port>. Pour afficher un autre noeud final, ajoutez son chemin à l'adresse URL de l'aperçu Web.

L'exemple d'application Node.js génère les informations d'adresse URL suivantes :

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

Pour afficher l'interface utilisateur de Swagger, ajoutez /swagger/api-docs à l'URL de l'aperçu Web :

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