Code EngineによるサーバーレスWebアプリケーションとAPI
このチュートリアルは、IBM Cloud資料のソリューションチュートリアル、Serverless web application and API with Code Engine を意訳したものになります。
目次
概要
このチュートリアルでは、IBM Cloudを用いて、Object Storageのバケットを使用してサーバーレスWebアプリケーションを作成し、Code EngineとIBM CloudantをJSONドキュメントデータベースとして使用するアプリケーションバックエンドの実装を体験することができます。
静的Webサイトのアーキテクチャモデルは、JavaScript、API、およびマークアップを参照してJamstackと呼ばれることもあります。このチュートリアルでは、Object Storage（Cloud Object Storage）でホストされる静的Webサイトを作成します。Webサイトには、JavaScriptを使用してエントリを取得したり新しいエントリを追加したりするためのAPIにアクセスする「Guestbook」があります。また背後のデータベースと対話するためのAPIは、サーバーレスアプローチを使用して実装されます。これは、バックエンドアプリまたはマイクロサービスとしてCode Engineにデプロイされます。Code Engineは必要な場合にのみ実行されるため、使用時に料金が発生します。
このチュートリアルの目的
サーバーレスアーキテクチャによるバックエンドの実装方法を学ぶ
REST API によるサーバーレスアプリを公開する
静的Webサイトをホストする
Webアプリケーション用データベースの作成
IBM Cloudant サービスインスタンスを作成することから始めましょう。IBM Cloudantは、フルマネージドのJSONドキュメントデータベースです。これは、Apache CouchDBに基づいて構築されており、互換性があります。
IBM Cloud の「カタログ」で、カテゴリ「データベース」をクリックすると、「Cloudant」が表示されます。「Cloudant」をクリックします。
「Multitenant」タブで、「Available regions」でリージョン (=データセンター)を選びます。たとえば、「ダラス」にします。
「Instance name」と「Resource Group」に値が入っています。特にこだわりがなければ、そのままにします。
「Authentication method」は、「IAM」です。
「Plan」は、「Lite」です。
「Create」をクリックします。
IBM Cloudリソース・リストに戻り、「サービス」の下で、作成したIBM Cloudantインスタンスをクリックして、インスタンスの完全な詳細ページを開きます。
画面右上の「Launch Dashboard」をクリックします。Webブラウザで、新規にタブが作成され、Cloudantのダッシュボードが表示されます。
画面右上の「Create Database」をクリックします。データベース名には、「guestbook」と入力し、Partitioningにチェックは入れずに、「Create」をクリックします。
「サービスの詳細 IBM Cloud」タブに戻ります。[サービスの資格情報]に移動し、次の操作を行います。
「新しい資格情報をクリックします。」
「資格情報の作成」で、「名前」の欄に、for-guestbook、「役割」の欄は管理者とし、「追加」をクリックします。
作成した資格情報の鍵名をクリックし、中の情報を確認します。後で使うので、作業用のメモアプリに転記しておくと良いでしょう。
サーバーレスバックエンドの作成
Code Engineを使用してサーバーレスバックエンドアプリを作成します。サーバーレスアプリは実行時間に対してのみ料金が発生します。これは、ゲストブックのようにアクセス頻度の低いソリューションに最適です。
IBM Cloudの画面で、画面左上の「三」をクリックします。左側のペイン(枠)で、「Code Engine」>>「概要」の順にクリックします。
左側のペインで、「プロジェクト」をクリックします。その後、画面右端の「作成」をクリックします。
「プロジェクトの作成」画面で、「ロケーション」を選びます。例として、ダラスを選んでいます。
「名前」は、あなたのイニシャル-guestbook が良いでしょう。例として、kn-guestbookとしています。「リソースグループ」を選びます。例として、default としています。Cloudantの時と同じリソースグループにしましょう。
画面右下の「作成」をクリックします。
プロジェクトの状況が「アクティブ」になるまで待ちます。
プロジェクトの名前に表示されているプロジェクト名をクリックして、ダッシュボードにアクセスします。
ダッシュボード内で、「アプリケーション」>>「作成」の順にクリックします。
「アプリケーションの作成」画面で、「名前」を「guestbook-backend」とします。
「実行するコードの選択」で、「コンテナ・イメージ」の状態で、「イメージ参照」に「icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest」を入力します。
「エンドポイント」は「パブリック」です。
「ランタイム設定」の「インスタンス数」のうち、「インスタンスの最小数」は「1」にします。インスタンスの最大数は「2」にします。最小数を1にすると、初期テスト中のアプリの応答性が向上します。後で再びゼロに減らすことができます。
「インスタンス・リソース」の「CPUおよびメモリ」で「0.25個のvCPUと0.5GBのメモリ」を選びます。このタイプのアプリには、それほど多くのリソースは必要ありません。
最後に、「環境変数」セクションで、データベースサービスの資格情報を構成します。サービスバインディングを使用して実行することもできますが、これはより便利です。
「追加」をクリックします。
「環境変数の追加」で「リテラル値」を「CLOUDANT_URL」とします。「値」にIBM Cloudantの資格情報として作成した「for-guestbook」内のの「url」の値を貼り付けます。
環境変数の追加」で「リテラル値」を「CLOUDANT_APIKEY」とします。「値」には、IBM Cloudantの資格情報として作成した「for-guestbook」内のの「apikey」の値を貼り付けます。\
環境変数は、下記のように設定されます。
各項目を入力後、「アプリケーションの作成」画面で「作成」をクリックします。
「準備完了」と表示されるまで待ちます。
画面右上の「アプリケーションのテスト」>>「アプリケーションURL」の順にクリックします。
Code Engineで起動しているバックエンドアプリケーションが読み込まれ、「healthy」と表示されます。URLを後で使うのでひかえておきましょう。
ウェブアプリケーションのデプロイ
Object Storageのサービス有効化
IBM Cloud の「カタログ」で、カテゴリ「ストレージ」をクリックすると、「Object Storage」が表示されます。「Object Storage」をクリックします。
「インフラストラクチャの選択」で「IBM Cloud」を選びます。
「料金プランの選択」で「Lite」を選びます。
「リソースの選択」で「サービス名」と「リソース・グループの選択」はそのままで良いです。もちろん必要に応じて変えても構いません。
「作成」をクリックします。
バケットの作成
「Cloud Object Storage」の画面で、「バケットの作成」タブをクリックします。「バケットの作成」をクリックします。
「バケットのカスタマイズ」の矢印をクリックします。
「カスタム・バケット」の「固有のバケット名」に、バケット名を入力します。あなたのイニシャル-guestbook-bucket が良いでしょう。例として、kn-guestbook-bucketとしています。
「回復力」に「Regional」を選びます。
「ロケーション」を選びます。例として、us-south としています。
「ストレージクラス」は、標準（Smart Tier）のままとします。
「オブジェクト・バージョン管理」は「無効」のままとします。
「拡張構成」のうち「静的Webサイト・ホスティング」の「追加＋」をクリックします。
「リダイレクト・ルール・タイプの設定」は、「ルーティング・ルール（個別）」のままとします。
「インデックス文書」に「index.html」を入力します。
「パブリック・アクセス」のトグルスイッチをクリックし、「オフ」から「オン」に切り替えます。「パブリック・アクセスの有効化」のダイアログで、「有効化」をクリックします。
「保存」をクリックします。
「バケットの作成」をクリックします。
バケットが作成されます。
アプリケーションの設置
Githubリポジトリ、「IBM-Cloud/serverless-guestbook」から、Zip形式でダウンロードします。
https://github.com/IBM-Cloud/serverless-guestbook/archive/refs/heads/ce.zip「serverless-guestbook-ce.zip」を解凍します。「docs」フォルダ内の「guestbook.js」を編集します。例えば、Visual Studio Code を使って編集する良いでしょう。
「guestbook.js」の4行目の「apiUrl」の値を、「サーバーレスバックエンドの作成」で確認した「アプリケーションURL」に書き換えます。URLがスラッシュで終わらないようにしましょう。書き換え後、保存します。
作成したバケットに「guestbook.js」と「index.html」をドラッグ&ドロップでアップロードします。
アップロードが完了すると、次のように表示されます。
バケットの「Configuration」タブをクリックします。
「エンドポイント」の「静的 Web サイト・ホスティング・エンドポイント」で「パブリック」に表示されているURLに新規にタブを作ってアクセスします。
Webアプリケーション「Guestbook」が表示されます。
新しいエントリの追加を行います。Webアプリケーション「Guestbook」の「Add your message」における「Name」「Email」「Comment」に入力し、「Send your message」をクリックします。
記録されました。
データベースを確認します。Cloudantの「Dashboard」をクリックし、Cloudantのダッシュボード画面にアクセスします。
Cloudantのダッシュボードで、データベース名をクリックします。
データベース内の「All Documents」内のデータにアクセスします。先ほど登録したエントリーを確認することができます。
リソース削除
作成したバケットやCode Engineで稼働するアプリケーションを削除する方法について説明します。
バケットの削除
IBM Cloud リソースリストから、「Storage」内のObject Storageのサービス名をクリックします。
表示されているバケット名をクリックします。例 kn-guestbook-bucket。
バケット内のファイルは「オブジェクト」と言います。バケットを削除するためには、バケット内のオブジェクトをすべて削除する必要があります。「guestbook.js」と「index.html」にチェックを入れてから、「オブジェクトの削除」をクリックします。
「オブジェクトの削除」のダイアログで、「削除」をクリックします。
バケット画面の画面右上に表示されている「アクション」>>「バケットの削除」をクリックします。
「バケットの削除」のダイアログで、「削除」をクリックします。
Object Storageのサービス削除（オプション）
IBM Cloud リソースリストにアクセスします。
「Storage」内の「Object Storage (Cloud Object Storage)のサービス名」の行において、右端の「︙」>>「削除」の順にクリックします。
「IAM 対応サービスの削除」のダイアログが表示されます。「削除」をクリックします。
「Object Storage (Cloud Object Storage)」のサービスが削除されます。
データベースの削除（オプション）
IBM Cloud リソースリストにアクセスします。
「サービスおよびソフトウェア」内の「Cloudantのサービス名」の行において、右端の「︙」>>「削除」の順にクリックします。
「リソースの削除」のダイアログが表示されます。「削除」をクリックします。
Code Engine内のプロジェクトおよびアプリケーションの削除
IBM Cloud リソースリストにアクセスします。
「Code Engine」内のサービス（プロジェクト）名をクリックします。
プロジェクトの画面で、「アクション」>>「プロジェクトの削除」の順にクリックします。
「プロジェクトの削除」のダイアログが表示されます。「削除」をクリックします。プロジェクト内のアプリケーションごと削除されます。
Code Engine内のプロジェクトが削除されました。
IBM Cloud リソースリストにアクセスします。