预览应用程序

您可以预览在 IBM® Cloud Shell 中运行的应用程序，就像在本地运行一样。 Cloud Shell网络预览可在只有您才能访问的 URL 上提供应用程序用户界面或端点。有了这项功能，您就有机会在将应用程序部署到可公开访问的位置之前，查看对应用程序所做的更改。

准备工作

在 IBM Cloud 控制台中启用 Web 预览。有关如何启用 Web 预览的更多信息，请参阅为帐户启用或禁用 Cloud Shell 功能。

Web 预览端口

您可以通过单击 Cloud Shell 菜单栏中的 Web 预览 图标来预览应用程序。网络预览适用于通过以下端口监听 HTTP 请求的任何应用程序：

3000
8080
8081
8082
8083
8084
9080

与本地系统一样，任何时候都只能在每个端口上运行一个应用程序。如果您有多个应用程序正在同一端口上侦听，那么会导致端口冲突。

预览直接在 Cloud Shell 中运行的应用程序

Cloud Shell 包含大量可用于处理正在开发的应用程序的插件，工具和运行时。由于 Cloud Shell 存储器是临时存储器，因此使用应用程序的最简单方法是首先将其复制或克隆到 Cloud Shell 工作空间，进行任何更改，然后进行预览。

以下示例工作流程显示如何预览 GitHub 存储库中托管的 Node.js Express 样本应用程序。

在 Cloud Shell 会话中，将应用程序源克隆到主目录。
```
git clone https://github.com/IBM/nodejs-express-app.git
```
然后，切换到克隆应用程序的目录。
```
cd nodejs-express-app
```
此时，您可以对应用程序代码进行任何更改，例如使用 vim 文本编辑器。
在 Cloud Shell中启动应用程序。

要启动此 Node.js 样本应用程序，首先需要下载任何项目依赖关系。
```
npm install
```
然后，您可以启动应用程序，以使其在 Cloud Shell中的 Web 服务器上运行。
```
npm run start
```
应用程序启动后，请记下 Web 服务器正在侦听的端口。该端口必须是其中一个可用端口，才能在 Cloud Shell中预览该端口。当此样本应用程序启动时，它将输出以下信息，这将显示它正在侦听端口 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
```
在 Cloud Shell 菜单栏中，单击 Web 预览 图标，然后选择服务器正在侦听的端口。对于 Node.js 样本应用程序，选择 3000。

您的 Web 预览将在新的浏览器窗口中打开，并显示等效于 http://localhost:3000 的内容。您应该会看到应用程序 UI 的第一个屏幕。

如果您看到一条消息，指出在 Cloud Shell中没有要预览的内容，那么运行应用程序的服务器未在所选端口上侦听。验证服务器是否正在侦听您正在预览的端口，然后刷新预览页面。

现在您正在预览应用程序，如果需要，您可以重启应用程序并刷新页面，查看您所做的任何更改。请确保将任何更改落实回 GitHub 存储库，或者下载更改，因为工作空间存储器是临时的。

预览在 Kubernetes pod 中运行的应用程序

您还可以使用 Cloud Shell 来预览在 Kubernetes中运行的应用程序，例如 Prometheus 仪表板或典型 Web 应用程序。由于在 Kubernetes 集群的 pod 中运行的应用程序使用内部端口，因此需要公开 pod 的端口。您可以通过创建服务或设置端口转发来做到这一点。

如果创建服务，那么需要公开该服务，设置认证以保护访问权，并为该服务设置应用程序负载均衡器 (ALB)。有关更多信息，请参阅将应用程序与服务连接。

如果您正在进行应用程序开发和测试，那么端口转发是一种更简单的方法，可以快速预览集群中的应用程序。它所需的前期配置要少得多，但每次重新启动 pod 时也必须重新配置。以下步骤将指导您设置端口转发并预览正在 IBM Cloud Kubernetes Service 集群中运行的应用程序。

在 Cloud Shell 会话中，将运行应用程序的集群设置为上下文。使用此设置，您可以使用 kubectl 命令来处理您的群集。有关详细信息，请参阅安装 CLI。

查找运行应用程序的 pod 的名称。

kubectl get pods

Pod 名称列示在 NAME 列下，例如 my-pod-123abc。

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

在 pod 上运行 kubectl describe 命令，在 pod 中找到要显示的端口。

kubectl describe pod my-pod-123abc

在 Containers 部分下，本地端口列示为 Port 值，如以下示例中的 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

通过运行 kubectl port-forward 命令来设置端口转发。确保在 Cloud Shell中选择其中一个可用端口进行 Web 预览。

例如，以下命令在本地侦听端口 8080，并将其转发到 pod 中的端口 6000。
```
kubectl port-forward pod/my-pod-123abc 8080:6000
```
现在，已设置端口转发，您可以预览应用程序。
在 Cloud Shell 菜单栏中，单击 Web 预览 图标，然后选择要转发到 pod 的端口。

您的网页预览会在新的浏览器窗口中打开。您可以看到应用程序用户界面的第一个屏幕。

如果显示Cloud Shell中无内容可预览，则表示运行应用程序的服务器没有在所选端口上监听。验证服务器是否正在侦听 pod 的内部端口，以及您是否正在将预览的端口转发到正确的内部端口。

预览端口上的其他端点

打开 Web 预览后，可以在同一端口上查看服务器正在侦听的任何其他端点。网页预览打开的 URL 相当于 http://localhost:<port>。要查看另一个端点，请在网络预览 URL 中添加路径。

例如，Node.js 样本应用程序输出以下 URL:

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

要查看 Swagger 用户界面，请在网页预览 URL 中添加 /swagger/api-docs：

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