앱 미리보기

로컬에서 실행하는 경우와 마찬가지로 IBM® Cloud Shell에서 실행 중인 앱을 미리 볼 수 있습니다. Cloud Shell 웹 미리보기에서는 본인만 액세스할 수 있는 URL에서 앱 UI 또는 엔드포인트를 사용할 수 있습니다. 이 기능을 사용하면 공개적으로 액세스할 수 있는 위치에 앱을 배포하기 전에 앱의 변경 사항을 확인할 수 있습니다.

시작하기 전에

IBM Cloud 콘솔에서 웹 미리보기를 사용으로 설정합니다. 웹 미리보기를 사용으로 설정하는 방법에 대한 자세한 정보는 계정의 클라우드 쉘 기능 사용 또는 사용 안함을 참조하십시오.

웹 미리보기 포트

Cloud Shell 메뉴 표시줄에서 웹 미리보기 아이콘 을 클릭하여 앱을 미리 볼 수 있습니다. 웹 미리보기는 다음 포트에서 HTTP 요청을 청취하는 앱에 사용할 수 있습니다.

3000
8080
8081
8082
8083
8084
9080

로컬 시스템과 마찬가지로 언제든지 각 포트에서 하나의 앱만 실행할 수 있습니다. 동일한 포트에서 청취 중인 앱이 여러 개 있는 경우 포트 충돌이 발생합니다.

Cloud Shell에서 직접 실행되는 앱 미리보기

Cloud Shell에는 개발 중인 앱으로 작업하는 데 사용할 수 있는 플러그인, 도구 및 런타임이 많이 포함되어 있습니다. Cloud Shell 스토리지는 일시적이므로 앱으로 작업하는 가장 쉬운 방법은 먼저 Cloud Shell 작업공간으로 앱을 복사 또는 복제하여 변경한 후 미리보는 것입니다.

다음 예제 워크플로에서는 Node.js Express 샘플 앱 리포지토리에 호스팅된 GitHub을 미리 볼 수 있는 방법을 보여 줍니다.

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의 웹 서버에서 실행되도록 앱을 시작할 수 있습니다.
```
npm run start
```
앱이 시작되면 웹 서버가 청취 중인 포트를 기록해 두십시오. 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 메뉴 표시줄에서 웹 미리보기 아이콘 을 클릭하고 서버가 청취 중인 포트를 선택하십시오. Node.js 샘플 앱의 경우 3000을 선택하십시오.

웹 미리보기가 새 브라우저 창에서 열리고 http://localhost:3000과 동등한 내용이 표시됩니다. 앱 UI의 첫 번째 화면이 표시되어야 합니다.

Cloud Shell에서 미리보기할 내용이 없다는 메시지가 표시된다면 앱이 실행 중인 서버가 선택한 포트에서 청취 중이지 않은 것입니다. 서버가 미리보기할 포트에서 청취 중인지 확인한 후 미리보기 페이지를 새로 고치십시오.

이제 앱을 미리 보았으므로 필요한 경우 앱을 다시 시작하고 페이지를 새로 고침하여 변경 사항을 확인할 수 있습니다. 작업공간 스토리지는 일시적이므로 변경사항을 GitHub 저장소로 다시 커미트하거나 변경사항을 다운로드하십시오.

Kubernetes 파드에서 실행되는 앱 미리보기

Cloud Shell을 사용하여 Prometheus 대시보드 또는 일반적인 웹 앱과 같이 Kubernetes에서 실행 중인 앱을 미리볼 수도 있습니다. Kubernetes 클러스터의 파드에서 실행 중인 앱은 내부 포트를 사용하므로 파드의 포트를 노출해야 합니다. 서비스를 만들거나 포트 포워딩을 설정하여 이를 수행할 수 있습니다.

서비스를 작성하는 경우 서비스를 공개적으로 노출하고, 보안 액세스를 위해 인증을 설정하고, 서비스에 대한 애플리케이션 로드 밸런서(ALB)를 설정해야 합니다. 자세한 내용은 서비스와 애플리케이션 연결하기를 참조하세요.

앱 개발 및 테스트를 수행하는 경우 포트 전달은 클러스터의 앱을 빠르게 미리볼 수 있는 간단한 방법입니다. 사전 구성이 훨씬 덜 필요하지만 파드가 다시 시작될 때마다 다시 구성해야 합니다. 다음 단계는 포트 전달을 설정하고 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
```

파드에서 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에서 웹 미리보기에 사용 가능한 포트 중 하나를 선택해야 합니다.

예를 들어 다음 명령은 로컬에서 포트 8080을 청취하고 이를 팟(Pod) 내의 포트 6000으로 전달합니다.
```
kubectl port-forward pod/my-pod-123abc 8080:6000
```
포트 전달이 설정되었으므로 앱을 미리볼 수 있습니다.
Cloud Shell 메뉴 표시줄에서 웹 미리보기 아이콘 을 클릭하고 팟(Pod)에 전달되는 포트를 선택하십시오.

웹 미리보기가 새 브라우저 창에서 열립니다. 앱 UI의 첫 화면을 볼 수 있습니다.

Cloud Shell에 미리 볼 내용이 없다는 메시지가 표시되면 앱이 실행 중인 서버가 선택한 포트에서 수신 대기하고 있지 않은 것입니다. 서버가 팟(Pod)의 내부 포트를 청취하고 있으며 올바른 내부 포트로 미리 보고 있는 포트를 전달하는지 확인하십시오.

포트에서 다른 엔드포인트 미리보기

미리보기를 연 후에는 동일한 포트에서 서버가 청취 중인 다른 엔드포인트를 확인할 수 있습니다. 웹 미리보기는 http://localhost:<port>에 해당하는 URL에서 열립니다. 다른 엔드포인트를 보려면 웹 미리보기 URL에 경로를 추가하십시오.

예를 들어 Node.js 샘플 앱은 다음 URL을 출력합니다.

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

Swagger UI를 보려면 웹 미리보기 URL에 /swagger/api-docs를 추가하십시오.

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