MEAN スタックを使用した最新の Web アプリケーション

このチュートリアルでは、費用が発生する場合があります。 コスト見積もりツールを使用して、予測使用量に基づいてコスト見積もりを生成します。

このチュートリアルでは、一般的な MEAN スタックを使用した Web アプリケーションの作成について説明します。 これは、M ongoDB、E xpress Web フレームワーク、A ngular フロントエンド・フレームワーク、および N ode.js ランタイムで構成されています。 MEANサンプルアプリをローカルで実行する方法、マネージド型データベース・アズ・ア・サービス DBasS を作成して使用する方法、アプリIBM Cloudにデプロイする方法、そして実行時とデータベースのリソースの両方をスケーリングする方法を学習します。

目標

  • Node.jsのサンプルアプリをローカルで作成して実行してみましょう。
  • 管理対象 Databases for MongoDB インスタンスを作成します。
  • IBM Cloud® Code Engine を使用して Node.jsをクラウドにデプロイします。
  • ランタイム CPU およびメモリー・リソースをスケーリングします。
  • データベース・メモリーとディスク・リソースをスケーリングします。

" caption-side="bottom"}*のアーキテクチャ{: caption="

  1. ユーザーが Web ブラウザーを使用してアプリケーションにアクセスします。
  2. Code Engine で実行されている Node.js アプリが Databases for MongoDB データベースにアクセスしてデータをフェッチします。

開始前に

このチュートリアルでは、以下が必要です。

  • IBM Cloud CLI - この CLI ツールを使用して IBM Cloud と対話します。
    • code- Code Engine リソースへの CLI アクセス用の engine/ce プラグイン (code-engine/ce)。
    • コンテナー・イメージを管理するためのオプションの Container Registry プラグイン (container-registry)。
  • git: ソース・コード・リポジトリーを複製します。
  • オプションですが、アプリをローカルで実行してテストしたい場合は、 Node.js をインストールする必要があります

ご使用のオペレーティング環境でこれらのツールをダウンロードおよびインストールするための手順は、チュートリアルの概説ガイドに記載されています。

これらのツールのインストールを回避するには、 Cloud Shell IBM Cloudから使用できます。

このチュートリアルでは、コマンド・ラインを使用してデータベース IBM Cloud® Code Engine のプロジェクトとアプリケーションを作成する方法について説明します。 コンパニオンの GitHub リポジトリー には、Terraform を使用してワークステーション上でローカルにプロビジョンする手順や、 Schematics を使用して数回のクリックで簡単にプロビジョンする手順があります。

クラウドでの MongoDB データベースのインスタンスの作成

このセクションでは、Databases for MongoDB インスタンスをクラウドに作成します。Databases for MongoDB は Database as a Service であり、構成が容易で、バックアップとスケーリングが組み込まれています。 IBM Cloudカタログで多種多様なデータベースが提供されています。 Databases for MongoDB インスタンスを作成するには、以下の手順を実行します。

  1. ログインしていない場合は、 ibmcloud login または ibmcloud login --sso を使用して対話的にログインしてください。 任意の IBM Cloud リージョンとリソース・グループをターゲットにします。 以下の例では、 ca-tor (Toronto) 領域と default リソース・グループを使用します。

    ibmcloud target -r ca-tor -g default
    

    その他の CLI コマンドについては、資料の一般的な IBM Cloud CLI (ibmcloud) コマンドのトピックを参照してください。

  2. コマンド・ラインを介して Databases for MongoDB のインスタンスを作成するか、コンソール UI を使用します。 このチュートリアルで使用するアプリケーションは、この名前でサービスを検索するように設定されているため、サービス名は mean-stack-mongodb と指定する必要があります。 <region> の場合は、自分に近いリージョンを選択できますが、このチュートリアルでは ca-tor を使用します。

    ibmcloud resource service-instance-create mean-stack-mongodb databases-for-mongodb standard ca-tor
    
  3. インスタンスの準備ができるまで待機します。 次のコマンドを使用してプロビジョニングの状況を確認できます。

    ibmcloud resource service-instance mean-stack-mongodb
    
  4. サービス状況が「作成成功」に変更されたことを確認したら、サービス・キーの作成に進むことができます。

    ibmcloud resource service-key-create mean-stack-mongodb-key --instance-name mean-stack-mongodb
    

MEAN アプリのローカルでの実行

このセクションでは、MEAN サンプル・コードを複製し、アプリケーションをローカルで実行して、IBM Cloud で実行されている MongoDB データベースへの接続をテストします。

  1. MEANサンプルコードを複製します。

    git clone https://github.com/IBM-Cloud/nodejs-MEAN-stack
    cd nodejs-MEAN-stack
    
  2. .env.example ファイルを .env にコピーします。

    cp .env.example .env
    
  3. .env ファイルで、独自の SESSION_SECRET を追加します。 MONGODB_URL および CERTIFICATE_BASE64 については、以下のコマンドを実行します。

    ibmcloud resource service-key mean-stack-mongodb-key --output json
    

    返された JSON 出力の中で、credentials -> connection -> mongodb -> composed の下に MONGODB_URL に必要な値、credentials -> connection -> mongodb -> certificate -> certificate_base64 の下に CERTIFICATE_BASE64 に必要な値を確認できます。 .env に追加された値に引用符やスペースが含まれていないことを確認してください。

  4. オプション - 必要なパッケージをインストールします。

    npm install
    
  5. オプション - アプリケーションをローカルで実行します。 出力に示されている URL を使用してアプリにアクセスし、新規ユーザーを作成してログインします。

    node server.js
    

Cloud シェルを使用すると、右上の アイコンをクリックし、ポート 8080 でプレビューをクリックすることで、アプリケーションを開くことができます。

クラウドへのアプリのデプロイ

IBM Cloud® Code Engine は、ウェブアプリ、マイクロサービス、イベント駆動型機能、バッチジョブなどのコンテナ化されたワークロードを実行する、完全に管理されたサーバーレスプラットフォームです。 このセクションでは、Code Engine プロジェクトを作成し、コンテナー化された Node.js アプリをそのプロジェクトにデプロイします。 前のセクションでは、ソースコードが .env を読み取り、 MongoDBへの URL と認証情報を取得します。 アプリの実行時に読み取られるものと同じキー/値を含めるために、プロジェクト内にシークレットを作成します。

アプリケーションのコンテナー・イメージは既にビルドされており、パブリック IBM Cloud Container Registry にプッシュされています。 この事前ビルドされたコンテナー・イメージを使用して、アプリケーションをデプロイします。

  1. IBM Cloud Code Engine でプロジェクトを作成します。

    ibmcloud code-engine project create --name mean-stack
    
  2. アプリケーションをローカルで実行するために以前に使用した .env ファイルのキー/値を含むシークレットをプロジェクト内に作成します。このシークレットは、クラウドで実行されているアプリケーションによって取り込まれます。 シークレットについて詳しくは、 シークレットの操作 を参照してください。

    ibmcloud code-engine secret create --name mean-stack-secrets --from-env-file .env
    
  3. https://github.com/IBM-Cloud/nodejs-MEAN-stack リポジトリーからダウンロードしたものと同じソース・コードに基づくパブリック・コンテナー・イメージに基づいて、アプリケーションを作成します。 このイメージの作成に使用するステップに関心がある場合は、create-container-image.md を参照してください。

    ibmcloud code-engine application create --name mean-stack-application --image icr.io/solution-tutorials/tutorial-mean-stack --env-from-secret mean-stack-secrets
    
  4. コードがプッシュされると、ブラウザーにアプリを表示できるようになります。 https://mean-stack.<CE_SUBDOMAIN>.ca-tor.codeengine.appdomain.cloud/ のようなホスト名が生成されています。 CE_SUBDOMAIN は、プロジェクトの作成時に決定されるプロジェクトとその値に注入される変数です。 コンソール・ダッシュボードまたはコマンド・ラインからアプリケーション URL を取得できます。 アプリケーションにアクセスすると、以下のような画面が表示されます

    ライブ・アプリ
    ライブ・アプリ

Code Engine での計算リソースのスケーリング

Code Engine は、アプリケーションへの HTTP 接続を含めた着信要求の負荷を満たすために、システム内の要求の数とアプリケーションのスケーリング・インスタンスの上下をモニターします。 サービスで追加の計算リソースが必要な場合、または割り振られる計算リソースの量を削減する場合は、特定のアプリケーション・ページでこれらの変更を行うことができます。

  1. Code Engine の「プロジェクト」ページに移動します。

  2. 前に作成した 「平均スタック」 プロジェクトをクリックします。

  3. 「概要」 の下で、「アプリケーション」 をクリックします。

  4. 前に作成した 「平均スタック・アプリケーション」 をクリックします。

  5. 「構成」 をクリックしてから 「ランタイム」 をクリックし、現在の構成を表示します。

    「リソースのスケーリング」
    「リソースのスケーリング」

  6. 「編集して新規リビジョンを作成」 をクリックして、CPU およびメモリーインスタンスの最小/最大数 だけでなく、並行性 も調整します。

  7. 「保存して作成」 をクリックして、変更をトリガーします。 完了すると、アプリケーションが Deploying および Ready であることを示します。

Databases for MongoDB でのデータベース・リソースのスケーリング

サービスが追加ストレージを必要とする場合や、サービスに割り振られたストレージの量を減らす場合は、リソースをスケーリングします。

  1. 「データベース」 の下の 「リソース・リスト」 から Databases for MongoDB サービス・インスタンスにアクセスします。
  2. 「リソース」 パネルをクリックします。
    「リソースのスケーリング」
    「リソースのスケーリング」
  3. スライダー を調整して、Databases for MongoDB データベース・サービスに割り振られたストレージを増減させます。
  4. 「デプロイメントのスケーリング」 をクリックして、スケール変更をトリガーし、ダッシュボード概要に戻ります。 スケール変更が進行中であることが示されます。
  5. 代わりに、使用量の増加に合わせてデータベース・リソースを自動的に増加するように自動スケーリング・ルールを構成することもできます。

リソースを削除する

リソースを削除するには、以下の手順を実行します。

  1. 以下のコマンドでプロジェクトを削除すると、そのプロジェクトのすべてのコンポーネント(アプリケーション、ジョブなど)も削除されます。
    ibmcloud code-engine project delete --name mean-stack
    
  2. Databases for MongoDB サービス・キーを削除します。
    ibmcloud resource service-key-delete mean-stack-mongodb-key
    
  3. Databases for MongoDB サービスを削除します。
    ibmcloud resource service-instance-delete mean-stack-mongodb
    

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

関連コンテンツ