Prima di iniziare

Abilita l'Anteprima Web nella console IBM Cloud. Per ulteriori informazioni su come abilitare l'anteprima Web, vedi Abilitazione o disabilitazione delle funzioni Cloud Shell per un account.

Porte di anteprima Web

È possibile visualizzare l'anteprima di un'applicazione facendo clic sull'icona Anteprima web nella barra dei menu Cloud Shell. L'anteprima web è disponibile per tutte le applicazioni in ascolto di richieste HTTP sulle seguenti porte:

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

Come per il tuo sistema locale, solo un'applicazione può essere eseguita su ogni porta in qualsiasi momento. Se hai più applicazioni che sono in ascolto sulla stessa porta, si ottiene un conflitto di porte.

Visualizzazione in anteprima delle applicazioni in esecuzione direttamente in Cloud Shell

Cloud Shell include molti plugin, strumenti e runtime che puoi utilizzare per gestire le applicazioni che stai sviluppando. Poiché l'archiviazione di Cloud Shell è temporanea, il modo più semplice di gestire un'applicazione è innanzitutto di copiarla o clonarla nel tuo spazio di lavoro Cloud Shell, apportare tutte le modifiche e poi visualizzarla in anteprima.

Il seguente esempio di flusso di lavoro mostra come è possibile visualizzare in anteprima un'applicazione di esempio Node.js Express ospitata in un repository GitHub.

1. In una sessione Cloud Shell, clona la tua origine dell'applicazione nella tua directory home.

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

   Quindi, passa alla directory in cui è stata clonata la tua applicazione.

   cd nodejs-express-app
   

   A questo punto, puoi apportare tutte le modifiche al tuo codice dell'applicazione, ad esempio tramite un editor di testo vim.

2. Avvia la tua applicazione in Cloud Shell.

   Per avviare questa applicazione di esempio Node.js, devi prima scaricare tutte le dipendenze del progetto.

   npm install
   

   Quindi, puoi avviare l'applicazione in modo che sia in esecuzione su un server web in Cloud Shell.

   npm run start
   

   Dopo aver avviato l'applicazione, annota la porta su cui è in ascolto il tuo server web. La porta deve essere una delle porte disponibili per poterla visualizzare in anteprima in Cloud Shell. Quando questa applicazione di esempio si avvia, genera le seguenti informazioni, che mostrano che è in ascolto sulla porta 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. Nella barra dei menu Cloud Shell, fare clic sull'icona Anteprima web e selezionare la porta di ascolto del server. Per l'applicazione di esempio Node.js, seleziona 3000.

   La tua anteprima web si apre in una nuova finestra del browser e mostra l'equivalente di http://localhost:3000. Dovresti visualizzare la prima schermata dell'IU della tua applicazione.

   Se visualizzi un messaggio che indica che non c'è nulla da visualizzare in anteprima in Cloud Shell, il server su cui è in esecuzione la tua applicazione non è in ascolto sulla porta selezionata. Verifica che il tuo server sia in ascolto sulla porta che stai visualizzando in anteprima e aggiorna la pagina dell'anteprima.

Ora che si sta visualizzando l'anteprima dell'applicazione, è possibile vedere le modifiche apportate riavviando l'applicazione, se necessario, e aggiornando la pagina. Assicurati di eseguire il commit di tutte le modifiche al tuo repository GitHub o altrimenti scarica le tue modifiche perché l'archiviazione del tuo spazio di lavoro è temporanea.

Anteprima delle applicazioni eseguite in un pod Kubernetes

Puoi anche utilizzare Cloud Shell per visualizzare in anteprima le applicazioni in esecuzione in Kubernetes, ad esempio un dashboard Prometheus o la tua applicazione web tipica. Poiché le applicazioni in esecuzione in un pod in un cluster Kubernetes utilizzano una porta interna, è necessario esporre la porta del pod. È possibile farlo creando un servizio o impostando il port forwarding.

Se crei un servizio, lo devi esporre pubblicamente, configurare l'autenticazione per l'accesso sicuro e configurare un programma di bilanciamento del carico dell'applicazione (ALB) per il servizio. Per ulteriori informazioni, vedere Collegamento delle applicazioni con i servizi.

Se stai sviluppando e verificando l'applicazione, l'inoltro della porta è un modo semplice con cui puoi visualizzare in anteprima velocemente le applicazioni nel tuo cluster. Richiede una configurazione iniziale molto più ridotta, ma deve essere riconfigurata ogni volta che il pod si riavvia. La seguente procedura ti guida attraverso la configurazione dell'inoltro della porta e la visualizzazione in anteprima di un'applicazione in esecuzione in un cluster IBM Cloud Kubernetes Service.

1. In una sessione Cloud Shell, configura il cluster in cui è in esecuzione la tua applicazione come contesto. Con questa impostazione è possibile utilizzare i comandi kubectl per lavorare con il cluster. Per ulteriori informazioni, vedere Installazione della CLI.

2. Trova il nome del pod in cui è in esecuzione la tua applicazione.

   kubectl get pods
   

   Il nome del pod viene elencato nella colonna NAME, ad esempio my-pod-123abc.

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

3. Individuare la porta del pod che si desidera visualizzare eseguendo il comando kubectl describe sul pod.

   kubectl describe pod my-pod-123abc
   

   Nella sezione Containers, la porta locale viene elencata come il valore di Port, ad esempio 6000 nel seguente esempio.

   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. Impostate il port forwarding eseguendo il comando kubectl port-forward. Assicurati di selezionare una delle porte disponibili per l'anteprima web in Cloud Shell.

   Ad esempio, il seguente comando è in ascolto sulla porta 8080 in locale ed esegue l'inoltro alla porta 6000 all'interno del pod.

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

   Dopo aver configurato l'inoltro della porta, puoi visualizzare in anteprima la tua applicazione.

5. Nella barra dei menu Cloud Shell, fare clic sull'icona Anteprima web e selezionare la porta che viene inoltrata al pod.

   La tua anteprima web si apre in una nuova finestra del browser. È possibile vedere la prima schermata dell'interfaccia utente dell'applicazione.

   Se viene visualizzato un messaggio che dice che non c'è nulla da visualizzare in anteprima in Cloud Shell, il server su cui gira l'applicazione non è in ascolto sulla porta selezionata. Verificare che il server sia in ascolto sulla porta interna del pod e che si stia inoltrando la porta di anteprima alla porta interna corretta.

Visualizzazione in anteprima di altri endpoint su una porta

Dopo aver aperto l'anteprima web, puoi visualizzare tutti gli altri endpoint su cui è in ascolto il tuo server sulla stessa porta. L'anteprima web si apre con un URL equivalente a http://localhost:<port>. Per visualizzare gli altri endpoint, aggiungi il percorso all'URL dell'anteprima web.

Ad esempio, l'applicazione di esempio Node.js genera i seguenti URL:

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

Per visualizzare l'IU Swagger, aggiungi /swagger/api-docs all'URL dell'anteprima web:

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