Visualizando apps

Você pode visualizar aplicativos que estão sendo executados em IBM® Cloud Shell da mesma forma que faria se estivesse executando-os localmente. A visualização da web do Cloud Shell disponibiliza o terminal ou a IU de seu app em uma URL que só pode ser acessada por você. Com esse recurso, você tem a chance de visualizar as alterações no seu aplicativo antes de implantá-lo em um local acessível ao público.

Antes de Iniciar

Ative a Visualização da web no console do IBM Cloud. Para obter mais informações sobre como ativar a visualização da web, consulte Ativando ou desativando recursos do Cloud Shell para uma conta.

Portas de visualização da web

É possível visualizar um app clicando no ícone Visualização prévia da web Visualização prévia da web na barra de menu do Cloud Shell. A visualização da web está disponível para qualquer app que atenda a solicitações de HTTP nas portas a seguir:

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

Assim como em seu sistema local, apenas um app pode ser executado em cada porta ao mesmo tempo. Se você tiver vários apps que estão atendendo na mesma porta, haverá conflitos de porta.

Visualizando apps em execução diretamente no Cloud Shell

O Cloud Shell inclui vários plug-ins, ferramentas e tempos de execução que podem ser usados para trabalhar com os apps que você está desenvolvendo. Como o armazenamento do Cloud Shell é temporário, a maneira mais fácil de trabalhar com um app é primeiro copiá-lo ou cloná-lo para sua área de trabalho do Cloud Shell, fazer todas as mudanças e, em seguida, visualizá-las.

O fluxo de trabalho de exemplo a seguir mostra como você pode visualizar um aplicativo de amostra do Node.js Express que está hospedado em um repositório GitHub.

  1. Em uma sessão do Cloud Shell, clone sua origem de app para seu diretório inicial.

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

    Em seguida, mude para o diretório no qual seu app foi clonado.

    cd nodejs-express-app

    Nesse momento, é possível fazer qualquer mudança em seu código de seu app, como por exemplo, usar o editor de texto vim.

  2. Inicie seu app no Cloud Shell.

    Para iniciar este app de amostra Node.js, primeiro é necessário fazer o download de todas as dependências do projeto.

    npm install

    Em seguida, é possível iniciar o app para que ele esteja em execução em um servidor da web no Cloud Shell.

    npm run start

    Após o app ser iniciado, observe em qual porta seu servidor da web está atendendo. A porta deve ser uma das portas disponíveis para que seja possível visualizá-la no Cloud Shell. Quando esse app de amostra for iniciado, ele exibirá as informações a seguir, que mostram que ele está atendendo na 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. Na barra de menus do Cloud Shell, clique no ícone Visualização da Web Visualização da Web e selecione a porta onde seu servidor está atendendo. Para o app de amostra Node.js, selecione 3000.

    A visualização da web é aberta em uma nova janela do navegador e mostra o equivalente a http://localhost:3000. Deve ser possível ver a primeira tela da IU de seu app.

    Se você vir uma mensagem dizendo que não há nada a ser visualizado no Cloud Shell, o servidor no qual seu app está sendo executado não estará atendendo na porta selecionada. Verifique se o servidor está atendendo na porta que você está visualizando e atualize a página de visualização.

Agora que está visualizando o aplicativo, você pode ver todas as alterações feitas reiniciando o aplicativo, se necessário, e atualizando a página. Certifique-se de confirmar qualquer mudança para o seu repositório GitHub ou fazer download de suas mudanças porque seu armazenamento de área de trabalho é temporário.

Visualização de aplicativos executados em um pod Kubernetes

Também é possível usar o Cloud Shell para visualizar apps que estão em execução no Kubernetes, como um painel do Prometheus ou seu app da web típico. Como os aplicativos que estão sendo executados em um pod em um cluster Kubernetes usam uma porta interna, você precisa expor a porta do pod. Você pode fazer isso criando um serviço ou configurando o encaminhamento de porta.

Se você criar um serviço, será necessário expô-lo publicamente, configurar a autenticação para proteger o acesso e configurar um balanceador de carga do aplicativo (ALB) para o serviço. Para obter mais informações, consulte Conectando aplicativos com serviços.

Se você estiver desenvolvendo apps e realizando testes, o encaminhamento de porta será uma maneira mais simples de visualizar rapidamente apps em seu cluster. Ele exige muito menos configuração inicial, mas você também deve reconfigurá-lo sempre que o pod for reiniciado. As etapas a seguir mostram como configurar o encaminhamento de porta e visualizar um app que está em execução em um cluster do IBM Cloud Kubernetes Service.

  1. Em uma sessão do Cloud Shell, configure o cluster no qual seu app está sendo executado como o contexto. Com essa configuração, você pode usar comandos kubectl para trabalhar com seu cluster. Para obter mais informações, consulte Instalando a CLI.

  2. Localize o nome do pod no qual seu app está sendo executado.

    kubectl get pods

    O nome do pod é listado sob a coluna NAME, por exemplo, my-pod-123abc.

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

  3. Localize a porta no pod que você deseja exibir executando o comando kubectl describe no pod.

    kubectl describe pod my-pod-123abc

    Na seção Containers, a porta local está listada como o valor Port, como 6000 no exemplo a seguir.

    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. Configure o encaminhamento de porta executando o comando kubectl port-forward. Certifique-se de selecionar uma das portas disponíveis para visualização da web no Cloud Shell.

    Por exemplo, o comando a seguir atende na porta 8080 localmente e encaminha-a para a porta 6000 dentro do pod.

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

    Agora que o encaminhamento de porta está configurado, é possível visualizar o app.

  5. Na barra de menu do Cloud Shell, clique no ícone Visualização da Web Visualização da Web e selecione a porta que está sendo encaminhada para o seu pod.

    Sua visualização da web é aberta em uma nova janela do navegador. Você pode ver a primeira tela da interface do usuário do seu aplicativo.

    Se você vir uma mensagem que diz que não há nada para visualizar em Cloud Shell, o servidor em que seu aplicativo está sendo executado não está escutando na porta selecionada. Verifique se o seu servidor está atendendo na porta interna do pod e que você está encaminhando a porta que você está visualizando para a porta interna correta.

Visualizando outros terminais em uma porta

Depois de abrir a visualização da web, é possível visualizar todos os outros terminais que o seu servidor está atendendo na mesma porta. A visualização da web abre em uma URL que é o equivalente a http://localhost:<port>. Para visualizar outro terminal, inclua o caminho na URL de visualização da web.

Por exemplo, o app de amostra Node.js supera as URLs a seguir:

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

Para visualizar a IU do Swagger, inclua /swagger/api-docs na URL de visualização da web:

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