预览应用程序
您可以预览在 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