Code Engine을(를) 사용하는 서버리스 웹 애플리케이션 및 API

이 튜토리얼에서는 비용이 발생할 수 있습니다. Cost Estimator를 사용하여 예상 사용량을 기반으로 비용 추정값을 생성하십시오.

이 튜토리얼에서는 Object Storage의 버킷을 사용하고 IBM Cloud Code Engine 및 IBM Cloudant을(를) JSON 문서 데이터베이스로 사용하여 애플리케이션 백엔드를 구현하는 서버리스 웹 애플리케이션을 작성합니다.

정적 웹 사이트는 성능과 보안에 좋습니다. 이의 아키텍처 모델은 JavaScript, API 및 Markup과 관련하여 Jamstack이라고도 합니다. 이 튜토리얼에서는 Object Storage에 호스트되는 정적 웹 사이트를 작성합니다. 웹사이트에는 항목을 검색하거나 새 항목을 추가하기 위한 API에 액세스하기 위해 JavaScript를 사용하는 방명록이 있습니다. 지원 데이터베이스와의 상호 작용을 위한 API는 서버리스 접근 방식을 사용하여 구현됩니다. 이는 백엔드 애플리케이션 또는 마이크로서비스로 IBM Cloud Code Engine에 배치됩니다. 백엔드는 필요한 경우에만 실행되므로 사용 시 비용이 발생합니다.

목표

  • 서버리스 백엔드 및 데이터베이스 배치
  • REST API를 서버리스 앱으로 노출
  • 정적 웹 사이트 호스팅

이 튜토리얼에 표시된 애플리케이션은 사용자가 메시지를 게시할 수 있는 단순 방명록 웹 사이트입니다.

*
아키텍처 다이어그램 *

  1. 사용자가 Object Storage의 버킷에서 호스팅되는 애플리케이션에 액세스합니다.
  2. 웹 애플리케이션이 백엔드 API를 호출합니다.
  3. 백엔드 API를 사용하는 앱이 Code Engine에 배치됩니다.
  4. 백엔드에서는 IBM Cloudant을(를) 사용하여 guestbook 항목을 저장하고 검색합니다.

방명록 데이터베이스 작성

IBM Cloudant 서비스 인스턴스를 작성하여 시작하십시오. IBM Cloudant은(는) 완전히 관리되는 JSON 문서 데이터베이스입니다. Apache CouchDB를 기반으로 하며 호환됩니다.

  1. 카탈로그의 서비스 아래에 있는 데이터베이스 카테고 리로 이동합니다. IBM Cloudant 타일을 클릭하십시오. 새 대화 상자에서 다음을 수행하십시오.

    1. 멀티테넌트에서 지역을 선택하십시오.

    2. Cloudant 인스턴스 구성에서 서비스에 대해 고유한 이름을 선택하십시오(예: <yourinitials>-guestbook-db).

    3. 리소스 그룹을 선택하십시오.

    4. 인증 메소드로 IAM을 선택하십시오.

    5. Lite 플랜을 선택하십시오. 계정에 Lite 플랜이 이미 있는 경우 다른 서비스 플랜을 선택하십시오.

    6. 작성을 클릭하십시오.

  2. IBM Cloud 서비스 아래에서, 생성한 IBM Cloudant 클릭하여 인스턴스 상세 정보 페이지를 엽니다. 참고: 서비스 상태가 Active로 변경될 때까지 대기해야 할 수도 있습니다.
  3. 대시보드 실행을 클릭하여 새 탭에서 대시보드를 실행하십시오.
  4. 오른쪽 상단에서 데이터베이스 작성을 클릭하십시오. 이름에 guestbook 를 입력하고 분할 에서 비분할을 선택합니다. 작성을 클릭하여 데이터베이스를 작성하십시오.

서버리스 백엔드 작성

이 섹션에서는 Code Engine을(를) 사용하여 서버리스 백엔드 애플리케이션을 작성합니다. 서버리스 앱은 실행 시간에 대해서만 비용이 발생하므로 방명록과 같이 자주 액세스하지 않는 솔루션에 이상적입니다.

Code Engine 프로젝트 작성

  1. IBM Cloud Code Engine 개요 페이지로 이동하십시오.
  2. 왼쪽 분할창에서 프로젝트를 클릭한 후 작성을 클릭하십시오.
    • 위치를 선택하십시오.
    • 프로젝트 이름으로 <yourinitials>-guestbook을(를) 사용하고 이전과 동일한 리소스 그룹을 선택하십시오.
    • 작성을 클릭하십시오.
    • 프로젝트 status가 활성으로 변경될 때까지 기다리십시오.
  3. 프로젝트 대시보드를 입력하려면 프로젝트 이름을 클릭하십시오.

백엔드 애플리케이션 작성 및 배치

  1. 프로젝트 대시보드에서 애플리케이션을 클릭한 후 작성을 클릭하십시오.
  2. 새 대화 상자에서 이름으로 guestbook-backend을(를) 입력하십시오.
  3. 컨테이너 이미지를 선택된 상태로 두고 icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest을(를) 이미지 참조로 사용하십시오. 이미 존재하는 컨테이너 이미지를 사용합니다.
  4. 인스턴스 리소스 아래에서 CPU와 메모리에 0.25 vCPU / 0.5 GB을(를) 선택하십시오. 이 유형의 앱에는 많은 리소스가 필요하지 않습니다.
  5. 최소 인스턴스 수를 1로 늘리고 최대 인스턴스 수를 2로 줄입니다. 최소 1은 초기 테스트 중에 앱의 응답성을 높입니다. 나중에 다시 0으로 줄일 수 있습니다.
  6. guestbook의 새 백엔드 앱을 배치하려면 작성을 클릭하십시오. 서비스 바인딩을 작성하는 다음 단계가 없으면 코드 오류와 함께 배치에 실패합니다.
  7. 데이터베이스에 대한 서비스 바인딩을 작성하십시오.
    1. 서비스 바인딩 탭을 클릭합니다.
    2. 작성을 클릭하십시오.
    3. IBM Cloud 서비스 인스턴스 를 클릭하고 드롭 다운에서 데이터베이스를 선택하십시오.
    4. 역할 을 작성자로 두십시오.
    5. 추가 를 클릭하십시오.
  8. 프로비저닝이 녹색으로 표시되고 준비되었다는 보고를 기다리십시오. 테스트 애플리케이션을 클릭한 후 애플리케이션 URL에서 클릭하십시오. 백엔드 앱은 healthy(이)라는 페이지를 로드하고 리턴해야 합니다. 다음 파트에 필요하므로 애플리케이션 URL을 기억하거나 복사하십시오.

사전 빌드된 컨테이너 이미지를 사용하는 대신 자체적으로 이미지를 빌드할 수 있습니다. 이는 Code Engine의 도움으로 또는 외부에서 수행할 수 있습니다. 사전 빌드된 컨테이너 이미지를 사용하지 않고 개인용 컨테이너 레지스트리를 사용하는 경우 추가 단계가 필요할 수 있습니다. https://github.com/IBM-Cloud/serverless-guestbook/tree/ce 는 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce에서 확인할 수 있습니다

웹 앱 배치

IBM Cloudant 데이터베이스를 사용하는 guestbook JavaScript 애플리케이션의 파일을 포함하는 정적 웹 사이트 호스팅으로 구성된 Object Storage 버킷을 작성하십시오.

Object Storage 인스턴스를 작성하십시오.

  1. 카탈로그에서 Object Storage를 선택하십시오.
  2. 인프라에 대해 IBM Cloud를 선택하고 플랜에 대해 표준을 선택하십시오.
  3. 인스턴스에 대해 고유한 서비스 이름(예: <yourinitials>-guestbook-cos)을 입력하십시오.
  4. 리소스 그룹을 선택하십시오.
  5. 작성을 클릭하십시오.

정적 웹 사이트 호스팅용으로 구성된 버킷을 작성하십시오.

  1. 버킷 작성을 클릭하십시오.
  2. 버킷 사용자 정의를 클릭하십시오.
  3. 모든 IBM 계정에서 고유한 버킷 이름을 입력하십시오. <yourinitials>-guestbook을(를) 사용해 보십시오.
  4. 복원성을 지역으로 선택하십시오.
  5. IBM Cloudant 인스턴스와 일치하는 위치 를 선택하십시오.
  6. 스토리지 클래스 기본값을 유지하십시오.
  7. 정적 웹 사이트 호스팅으로 스크롤하고 추가를 클릭하십시오.
  8. 라우팅 규칙(개별)을 선택된 상태로 유지하고 인덱스 문서 index.html을 추가하십시오.
  9. 공용 액세스를 클릭하여 켜짐으로 설정하십시오.
  10. 저장을 클릭하십시오.
  11. 맨 아래로 스크롤하여 버킷 작성을 클릭하십시오.

https://github.com/IBM-Cloud/serverless-guestbook/tree/ce의 docs 디렉토리에 있는 파일을 버킷에 복사하십시오.

  1. 새 탭에서 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce를 여십시오.

  2. 코드를 클릭한 후 Zip 다운로드를 클릭하여 Zip 파일을 다운로드하십시오.

  3. 파일의 압축을 풀고 압축을 푼 파일의 docs 디렉토리로 이동하십시오.

  4. guestbook.js 편집- apiUrl 값을 이전 섹션의 애플리케이션 URL로 바꾸십시오.

    URI가 슬래시 (/) 로 끝나지 않는지 확인하십시오. 그렇지 않으면 앱이 작동하지 않습니다.

  5. 버킷 오브젝트 보기를 열고 guestbook.js 및 index.html 파일을 COS 버킷으로 끌어서 놓으십시오.

  6. 버킷의 구성 탭으로 이동하십시오. 엔드포인트 섹션 에서 정적 웹사이트 호스팅 엔드포인트 섹션을 찾습니다. 공개 엔드포인트를 브라우저 탭에 복사합니다.

  7. 방명록 페이지가 표시되어야 합니다.

  8. guestbook에 새 항목을 추가하십시오.

Guestbook 스크린샷
Guestbook 스크린샷

자원 제거

작성된 버킷 및 Object Storage 서비스를 삭제하려면 다음을 수행하십시오.

  1. Object Storage 버킷 오브젝트로 이동하십시오.
  2. 버킷의 모든 오브젝트를 선택하려면 제목 행의 상자를 선택하십시오.
  3. 오브젝트 삭제를 클릭하십시오.
  4. 버킷 오브젝트 페이지 조치 메뉴의 오른쪽 상단에서 버킷 삭제를 선택하십시오.
  5. Object Storage 오른쪽 상단에서 작업 메뉴를 선택한 다음 인스턴스 삭제를 선택합니다

작성된 IBM Cloudant 서비스를 삭제하려면 다음을 수행하십시오.

  1. 자원 목록 으로 이동하십시오.
  2. 데이터베이스 아래에서, <yourinitials>-guestbook-db 서비스 옆의 작업 메뉴를 클릭합니다
  3. 삭제 아이콘을 클릭하십시오.

애플리케이션 및 프로젝트 Code Engine을(를) 삭제하려면 다음을 수행하십시오.

  1. Code Engine 랜딩 페이지로 이동하십시오.
  2. 왼쪽 분할창에서 프로젝트를 클릭하십시오.
  3. 프로젝트 목록에서 guestbook 프로젝트를 확인한 후 삭제를 클릭하십시오.

리소스에 따라 즉시 삭제되지 않고 보유될 수 있습니다(기본 7일 동안). 리소스를 영구적으로 삭제하여 재확보하거나 보유 기간 내에 리소스를 복원할 수 있습니다. 리소스 재확보 사용 방법은 이 문서를 참조하십시오.

관련 컨텐츠