IBM Cloudant 에 정보를 저장하는 애플리케이션 빌드

로컬 워크스테이션에 저장된 소스 코드에서 Code Engine 애플리케이션을 빌드하는 방법을 학습합니다. 이 튜토리얼에서는 앱을 빌드하는 데 사용되는 샘플 소스를 사용합니다. 이 애플리케이션은 IBM Cloudant 데이터베이스에 연결하고 해당 앱의 입력을 저장합니다.

빌드 또는 이미지 빌드는 소스 코드에서 컨테이너 이미지를 작성하는 데 사용할 수 있는 메커니즘입니다. Code Engine은 Dockerfile 및 클라우드 네이티브 빌드팩에서의 빌드를 지원합니다.

시작하기 전에

모든 Code Engine 사용자에게는 종량과금제 계정이 있어야 합니다. 튜토리얼은 비용이 부과될 수 있습니다. 비용 추정기를 사용하여 예상 사용량을 기반으로 한 비용 추정을 생성하십시오. 자세한 정보는 Code Engine 가격을 참조하십시오.

IBM Cloudant 서비스 인스턴스 및 데이터베이스 작성

첫 번째 단계는 IBM Cloudant 서비스 인스턴스를 작성한 후 데이터베이스를 작성하는 것입니다. 콘솔에서 또는 CLI 명령을 사용하여 하나를 작성할 수 있습니다. 또한 애플리케이션에 전달할 수 있는 서비스 신임 정보를 작성하십시오.

IBM Cloudant 서비스 인스턴스를 작성하고 IBM Cloudant 의 단계를 따르십시오. 인스턴스 이름을 CloudantFruitCounter 로 지정하십시오. 서비스 신임 정보를 작성하여 태스크를 완료해야 합니다.
인스턴스에 대한 IBM Cloudant 대시보드를 열고 데이터베이스 작성을 클릭하십시오.
데이터베이스 작성 창에서 데이터베이스 이름 fruitcounter 을 입력하십시오.
파티션됨 옵션을 선택하지 말고 작성을 클릭하십시오.

로컬로 애플리케이션 테스트

Code Engine에서 애플리케이션으로 코드를 작성하기 전에 코드가 올바르게 작동하는지 로컬로 테스트하십시오.

IBM Cloudant 대시보드에서 IBM Cloudant 서비스 인증 정보를 검색하십시오. 신임 정보 검색에 대한 자세한 정보는 서비스 신임 정보 작성 을 참조하십시오.

서비스 신임 정보의 값으로 환경 변수를 설정하십시오.

export CLOUDANT_URL=<your_url>

export CLOUDANT_APIKEY=<your_key>

export DBNAME="fruitcounter"

fruit-counter 저장소를 복제하고 이 디렉토리로 변경한 후 종속 항목을 설치하고 시작하십시오.
```
git clone https://github.com/IBM/CodeEngine
cd CodeEngine/fruit-counter
npm install
npm run start
```
브라우저를 열고 http://localhost:8080로 이동하십시오.
선호하는 과일을 선택하고 선택사항을 제출하십시오. 이 앱은 선택사항을 수락하고 현재 총 피킹 수를 표시합니다.

IBM Cloudant 데이터베이스 대시보드로 이동하여 Cloudant 에 과일 선택사항이 등록되었는지 확인할 수 있습니다.

이 프로그램이 어떻게 작동하는지 살펴보겠습니다.

이 애플리케이션은 두 개의 기본 패키지를 사용하는 단순 Node.js 애플리케이션입니다.

@ibm-cloud/cloudant- IBM Cloudant 에 연결하고 데이터를 읽고 쓸 수 있습니다.
Express: 사용자가 선택한 과일을 제출하고 데이터의 현재 합계를 볼 수 있는 웹 서버를 작성합니다.

이 애플리케이션은 두 개의 기본 파일로 구성됩니다.

server.js: server.js 파일은 웹 서버를 실행하고 Cloudant와 통신하는 데 사용됩니다. 사용자가 과일 선택사항을 선택하면 프론트 엔드 페이지가 /fruit 라우트에 값을 제출하고 (아래 참조) app.route 함수는 과일 선택사항과 함께 새 문서를 Cloudant 에 저장한 후에 실행 총계를 다시 읽어 프론트 엔드 페이지로 돌아갑니다.; 읽기 조작은 Cloudant 디자인 문서 및 MapReduce 보기를 사용하여 문서를 집계합니다. 보기 및 디자인 문서에 대한 자세한 정보는 보기 작성(MapReduce) 을 참조하십시오.
index.html: index.html 파일은 Vue.js 프레임워크를 사용하는 애플리케이션의 웹 페이지입니다. 이 페이지가 로드되면 사용 가능한 과일 옵션이 표시됩니다.; 선택사항을 제출한 후 프레임워크는 애플리케이션의 /fruit 라우트에 대한 사용자의 과일 선택으로 HTTP POST 요청을 작성합니다. 애플리케이션 리턴에는 실행 중인 과일 선택사항의 총계가 포함되며, 이 총계가 표시됩니다.

Code Engine 에 애플리케이션 배치

이제 이 애플리케이션의 작동 방식을 이해했으므로 Code Engine에 배치할 수 있습니다. CODEENGINEREPO 를 이미지 저장소로 지정하여 공용 저장소에서 애플리케이션 을 배치하는 단계를 수행할 수 있습니다. 2단계에서로컬로 수집하고 설정한 환경 변수를 포함해야 합니다.

애플리케이션을 로컬로 테스트 할 때 저장소를 복제했으므로 app create 명령을 사용하여 로컬 소스에서 이미지를 빌드하고 이 빌드된 이미지를 참조하는 애플리케이션을 배치할 수 있습니다.

app create 명령을 실행하십시오. 애플리케이션의 이름과 소스 코드의 위치를 제공해야 합니다. 다음 예제에서는 docker 전략을 사용하고 현재 디렉토리 (.) 에서 소스 코드의 위치를 제공하는 myfruitcounter 라는 애플리케이션을 작성합니다. 또한 Cloudant에 연결하도록 환경 변수를 설정해야 합니다.

ibmcloud ce app create --name myfruitcounter --build-source . --strategy dockerfile --env CLOUDANT_URL=<your_url> --env CLOUDANT_APIKEY=<your_key> --env DBNAME=fruitcounter

출력 예

Creating application 'myfruitcounter'...
Packaging files to upload from source path '.'...
Submitting build run 'myfruitcounter-run-220727-142949868'...
Creating image 'private.us.icr.io/ce--6ef04-n2lgvg2l59v/app-myfruitcounter:220727-1929-y8ej0'...
Waiting for build run to complete...
Build run status: 'Running'
Build run completed successfully.
Run 'ibmcloud ce buildrun get -n myfruitcounter-run-220727-142949868' to check the build run status.
Waiting for application 'myfruitcounter' to become ready.
Configuration 'myfruitcounter' is waiting for a Revision to become ready.
Ingress has not yet been reconciled.
Waiting for load balancer to be ready.
Run 'ibmcloud ce application get -n myfruitcounter' to check the application status.
OK                                                

https://myfruitcounter.n2lfrg2876v.us-south.codeengine.appdomain.cloud

과일 선택도구 앱에 대해 제공된 URL을 열어 앱을 테스트하십시오. 가장 좋아하는 과일을 골라 제출하세요. 과일 선택의 현재 총계가 표시됩니다. 애플리케이션을 새로 고치고 다른 과일을 선택할 수 있습니다. 더하기는 현재 합계에 표시됩니다.