Code Engine を使用したサーバーレス Web アプリケーションおよび API

目標

• サーバーレス・バックエンドとデータベースをデプロイする
• REST API をサーバーレス・アプリとして公開する
• 静的 Web サイトをホスティングする

このチュートリアルに示すアプリケーションは、ユーザーがメッセージを投稿できる単純なゲストブック Web サイトです。

{: caption="図

1. ユーザーは、Object Storage のバケットでホストされるアプリケーションにアクセスします。
2. Web アプリケーションがバックエンド API を呼び出します。
3. バックエンド API を使用するアプリが Code Engineにデプロイされます。
4. バックエンドは、IBM Cloudant を使用して、ゲストブック・エントリーを保管および取得します。

Guestbook データベースの作成

まず、IBM Cloudant サービス・インスタンスを作成します。 IBM Cloudant は、完全に管理された JSON 文書データベースです。 Apache CouchDB に基づいて構築されており、Apache CouchDB と互換性があります。

1. カタログで、「サービス」 の下の 「データベース」 カテゴリーに移動します。 「IBM Cloudant」 タイルをクリックします。 新規ダイアログで、以下のようにします。

   1. 「マルチテナント」 でリージョンを選択します。

   2. 「Cloudant インスタンスの構成 (Configure Cloudant instance)」 の下で、このサービスを表す固有の 名前 (<yourinitials>-guestbook-db など) を選択します。

   3. リソース・グループを選択します。

   4. 認証方式として IAM を選択します。

   5. 「ライト」 プランを選択します。 アカウントに既に「ライト」プランが存在する場合は、他のサービス・プランを選択します。

   6. 「作成」 をクリックします。

2. IBM Cloud リソース・リストに戻り、「サービス」 で、作成した IBM Cloudant インスタンスをクリックして、インスタンスの全詳細ページを開きます。 注: 場合によってはサービスの状況がActiveに変わるまで待つ必要があります。
3. 「ダッシュボードの起動 (Launch Dashboard)」 をクリックして、新しいブラウザー・タブでダッシュボードを開きます。
4. 右上の 「データベースの作成 (Create Database)」 をクリックします。 guestbook を名前として入力し、 パーティショニングでは 「非パーティショニング」 を選択します。 **「作成」**をクリックしてデータベースを作成します。

サーバーレス・バックエンドの作成

このセクションでは、Code Engineを使用してサーバーレス・バックエンド・アプリを作成します。 サーバーレス・アプリは、実行時間に対してのみ課金されます。これは、ゲストブックなどのアクセス頻度の低いソリューションに適しています。

Web アプリのデプロイ

IBM Cloudant データベースを使用する guestbook JavaScript アプリケーションのファイルを含む静的 Web サイト・ホスティングを使用して構成された Object Storage バケットを作成します。

以下のようにして、Object Storage インスタンスを作成します。

1. カタログから Object Storage を選択します。
2. インフラストラクチャーの場合は IBM Cloud を選択し、プランの場合は 標準 を選択します。
3. インスタンスを表す固有のサービス名 (<yourinitials>-guestbook-cos など) を選択します。
4. リソース・グループを選択します。
5. 作成 をクリックします。

静的 Web サイト・ホスティングを構成したバケットを以下のようにして作成します。

1. 「バケットの作成」 をクリックします。
2. バケットのカスタマイズ をクリックします。
3. すべての IBM アカウントで固有のバケット名を入力してください。 <yourinitials>-guestbook を試行してください。
4. 「回復力」に 「リージョン (Regional)」 を選択します。
5. IBM Cloudant インスタンスと整合性のある 所在地 を選択します。
6. ストレージ・クラス をデフォルトのままにする
7. 静的 Web サイト・ホスティング までスクロールダウンし、追加 + をクリックします。
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. 「Code」 、「Download ZIP」 の順にクリックし、zip ファイルをダウンロードします。

3. ファイルを unzip し、unzip されたファイルの docs ディレクトリーに移動します。

4. Guestbook.js を編集します。API URL の値を前のセクションのアプリケーション URL に置き換えます。

   URI の末尾がスラッシュ (/) でないことを確認してください。 そうでない場合、アプリは機能しません。

5. バケットの 「オブジェクト」 ビューを開き、guestbook.js ファイルおよび index.html ファイルを COS バケットにドラッグ・アンド・ドロップします。

6. バケットの 構成 タブにナビゲートします。 エンドポイントのセクションで、 静的ウェブサイトホスティングエンドポイントのセクションを見つけます。 パブリックエンドポイントをブラウザのタブにコピーします。

7. ゲストブック・ページが表示されます。

8. ゲストブックに新規エントリーを追加します。

リソースを削除する

作成したバケットおよび Object Storage サービスを削除するには、以下のようにします。

1. Object Storage のバケットのオブジェクトに移動します
2. タイトル行のボックスにチェック・マークを付け、バケット内のすべてのオブジェクトを選択します
3. 「オブジェクトの削除」 をクリックします
4. バケット・オブジェクト・ページの右上の 「アクション」 メニューで、「バケットの削除」 を選択します
5. Object Storageの右上にある Actionsメニュー でDelete Instance を選択します

作成された IBM Cloudant サービスを削除するには、以下のようにします。

1. リソース・リスト にナビゲートします。
2. データベースの下にある <yourinitials>-guestbook-db サービスの隣にあるアクションメニューをクリックします
3. 「削除」 をクリックします。

アプリケーションおよびプロジェクト Code Engineを削除するには、以下のようにします。

1. Code Engine ランディング・ページにナビゲートします。
2. 左側のペインで、プロジェクト をクリックします。
3. プロジェクトのリストで、ゲストブック・プロジェクトを確認し、削除 をクリックします。

リソースによっては、即時に削除されずに保持される場合があります (デフォルトでは 7 日間)。 リソースを完全に削除して再利用することも、保存期間内に復元することもできます。 リソースの再利用を使用する方法については、この資料を参照してください。

関連コンテンツ

• サーバーレス・コンピューティング
• サーバーレス・デプロイメント・モデル
• IBM Cloud Code Engine の紹介