アプリのプレビュー

IBM® Cloud Shellで実行中のアプリは、ローカルで実行しているときと同じようにプレビューできます。 Cloud Shell の Web プレビューでは、自分しかアクセスできない URL で、アプリの UI およびエンドポイントが提供されます。この機能を使えば、一般にアクセス可能な場所にアプリをデプロイする前に、アプリの変更を確認することができます。

開始前に

IBM Cloud コンソールで** Web プレビュー**を有効にします。 Web プレビューを有効にする方法について詳しくは、アカウントの Cloud Shell フィーチャーの有効化または無効化を参照してください。

Web プレビューのポート

Cloud Shell メニュー・バーの Web プレビュー・アイコンをクリックすると、アプリをプレビューできます。以下のポートで HTTP 要求を listen するアプリであれば、どのアプリでも Web プレビューを利用できます。

3000
8080
8081
8082
8083
8084
9080

ローカル・システムと同様に、各ポートで実行できるアプリは常に 1 つだけです。複数のアプリが同じポートで listen すると、ポートの競合が発生します。

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 サーバーが listen しているポートをメモします。 Cloud Shell でアプリをプレビューするには、利用可能なポートに記載しているいずれかのポートでなければなりません。このサンプル・アプリが開始すると、ポート 3000 を listen していることを示す、以下の情報が出力されます。
```
> 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 プレビュー・アイコンをクリックし、サーバーが listen しているポートを選択します。 Node.js サンプル・アプリの場合は、3000 を選択します。

Web プレビューが新しいブラウザー・ウィンドウで開かれ、http://localhost:3000 に相当するものが表示されます。アプリの UI の最初の画面が表示されます。

Cloud Shell にプレビューするものがないというメッセージが表示された場合は、アプリを実行しているサーバーが、選択したポートで listen していません。プレビューしているポートをサーバーが listen していることを確認してから、プレビュー・ページを更新してください。

アプリをプレビューしている今、必要に応じてアプリを再起動し、ページをリフレッシュすることで、変更を確認することができます。ワークスペースのストレージは一時的なストレージであるため、変更した場合は必ず GitHub リポジトリーにコミットするか、変更内容をダウンロードしてください。

Kubernetes ポッドで実行されるアプリのプレビュー

また、Cloud Shell を使用して、Prometheus ダッシュボードや一般的な Web アプリなど、Kubernetes で実行されているアプリをプレビューすることもできます。 Kubernetes クラスタ内のポッドで実行されているアプリは内部ポートを使用するため、ポッドのポートを公開する必要があります。サービスを作成するか、ポートフォワーディングを設定することで可能だ。

サービスを作成する場合は、サービスを公開し、アクセスを保護するための認証をセットアップし、サービスのアプリケーション・ロード・バランサー (ALB) をセットアップする必要があります。詳細については、アプリケーションとサービスの接続を参照してください。

アプリを開発およびテストしている場合は、ポート転送のほうが、クラスター内のアプリを素早く簡単にプレビューできます。前もって設定する必要ははるかに少ないが、ポッドが再起動するたびに再設定する必要もある。以下の手順で、ポート転送のセットアップ、および IBM Cloud Kubernetes Service クラスター内で実行されているアプリのプレビューについて、段階的に説明します。

Cloud Shell セッションで、アプリが実行されているクラスターをコンテキストとして設定します。この設定により、kubectl コマンドを使ってクラスタを操作することができます。詳細については、CLIのインストールを参照してください。
アプリが実行されているポッドの名前を調べます。
```
kubectl get pods
```
ポッド名は、NAME 列の下に、例えば my-pod-123abc のように表示されます。
```
NAME            READY   STATUS    RESTARTS   AGE
my-pod-123abc   1/1     Running   0          9d
```

ポッド上で kubectl describeコマンドを実行して、表示したいポッド内のポートを見つけます。

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 を listen し、そのポートを同じポッド内のポート 6000 に転送します。
```
kubectl port-forward pod/my-pod-123abc 8080:6000
```
ポート転送をセットアップしたので、アプリをプレビューできます。
Cloud Shell メニュー・バーで、Web プレビュー・アイコンをクリックし、ポッドに転送するポートを選択します。

Web プレビューが新しいブラウザー・ウィンドウで開かれます。アプリのUIの最初の画面が表示されます。

Cloud Shellにプレビューするものがないというメッセージが表示された場合は、アプリが動作しているサーバーが選択したポートでリッスンしていません。サーバーがポッドの内部ポートを listen していること、およびプレビューしているポートを正しい内部ポートに転送していることを確認します。

ポートの他のエンドポイントのプレビュー

Web プレビューを開いたら、同じポートでサーバーが listen している他のエンドポイントも表示できます。 Web プレビューは、http://localhost:<port>に相当する URL で開きます。別のエンドポイントを表示するには、その Web プレビューの URL にパスを追加します。

例えば、Node.js サンプル・アプリは、以下の URL を出力します。

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

Swagger UI を表示するには、Web プレビューの URL に /swagger/api-docs を追加します。

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