預覽應用程式

您可以預覽正在運行的應用程式IBM® Cloud Shell就像您在本地運行它們一樣。這Cloud Shell Web 預覽可讓您的應用程式 UI 或端點在只有您可以存取的 URL 上可用。借助此功能，您有機會在將應用程式部署到可公開存取的位置之前查看對應用程式的變更。

開始之前

在 IBM Cloud 主控台中啟用 Web 預覽。如需如何啟用 Web 預覽的相關資訊，請參閱啟用或停用帳戶的 Cloud Shell 特性。

Web 預覽埠

您可以透過按一下 Cloud Shell 功能表列中的 Web 預覽 圖示來預覽應用程式。 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。您應該會看到應用程式使用者介面的第一個畫面。

如果您看到一則訊息，指出在 Cloud Shell中沒有可預覽的內容，則您應用程式執行所在的伺服器不會在選取的埠上接聽。請驗證您的伺服器正在您正在預覽的埠上接聽，並重新整理預覽頁面。

現在您正在預覽應用程序，如果需要，您可以透過重新啟動應用程式並刷新頁面來查看所做的任何更改。請務必將任何變更確定回 GitHub 儲存庫，否則請下載您的變更，因為您的工作區儲存體是暫時的。

預覽運行在Kubernetes莢

您也可以使用 Cloud Shell 來預覽在 Kubernetes中執行的應用程式，例如 Prometheus 儀表板或一般 Web 應用程式。因為在 pod 中運行的應用程式Kubernetes集群使用內部端口，需要暴露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 describePod 上的指令。

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 的埠。

您的網頁預覽將在新的瀏覽器視窗中開啟。您可以看到應用程式 UI 的第一個畫面。

如果您看到一則訊息，提示沒有任何內容可供預覽Cloud Shell，運行您的應用程式的伺服器未偵聽所選連接埠。請驗證您的伺服器正在 Pod 的內部埠上接聽，且您正在將您正在預覽的埠轉遞至正確的內部埠。

預覽埠上的其他端點

開啟 Web 預覽之後，您可以檢視伺服器在相同埠上接聽的任何其他端點。 Web 預覽將在相當於以下內容的 URL 上開啟 http://localhost:<port>。若要查看另一個端點，請新增 Web 預覽 URL 的路徑。

例如，Node.js 範例應用程式會輸出下列 URL:

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

要查看 Swagger UI，請新增 /swagger/api-docs 到網路預覽 URL：

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