Azure に Node.js + MongoDB Web アプリをデプロイします

Azure App Service は、Linux オペレーティング システムを使用する、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供します。 このチュートリアルでは、MongoDB データベースに接続された Azure App Service でセキュリティ保護された Node.js アプリを作成する方法について説明します (Azure Cosmos DB と MongoDB API を使用)。 このチュートリアルを終了すると、Azure App Service on Linux で実行される Express.js アプリが完成します。

Express.js アプリが Azure App Service にデプロイされ、MongoDB データが Azure Cosmos DB 内でホストされる仕組みを示す図。

この記事では、既に Node.js の開発に慣れており、Node と MongoDB がローカルにインストールされていることを前提としています。 アクティブなサブスクリプションを持つ Azure アカウントも必要です。 Azure アカウントがない場合は、無料で作成できます

サンプル アプリケーション

このチュートリアルに従うには、リポジトリ (https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app) からサンプル アプリケーションを複製またはダウンロードします。

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

アプリケーションをローカルで実行したい場合は、次のようにします。

  • npm install を実行して、パッケージの依存関係をインストールします。
  • .env.sample ファイルを .env にコピーし、DATABASE_URL の値に MongoDB の URL を設定します (たとえば mongodb://localhost:27017/ など)。
  • npm start でアプリケーションを起動します。
  • アプリを表示するには、http://localhost:3000 を参照します。

1. App Service と Cosmos DB の作成

この手順では、Azure リソースを作成します。 このチュートリアルで使用する手順では、App Service と MongoDB 用 Azure Cosmos DB API を含む既定でセキュリティ保護された一連のリソースを作成します。 作成手順では、次のように指定します。

  • 名前: Web アプリの名前。 Web アプリの DNS 名の一部として https://<app-name>.azurewebsites.net の形式で使われる名前です。
  • 世界でアプリを物理的に実行するためのリージョン
  • アプリのランタイム スタック。 アプリで使うノードのバージョンを選びます。
  • アプリのホスティング プラン。 これは、アプリの一連の機能と容量のスケーリングを含む価格レベルです。
  • アプリのリソース グループ。 リソース グループを使うと、アプリケーションに必要なすべての Azure リソースを (論理コンテナーに) グループ化できます。

Azure portal にサインインし、以下の手順に従って Azure App Service リソースを作成します。

手順 1. Azure portal で次の操作を行います。

  1. Azure portal の上部にある検索バーに「Web app database」と入力します。
  2. [Marketplace] の見出しの下にある [Web アプリとデータベース] というラベルの付いた項目を選びます。 作成ウィザードに直接移動することもできます。

上部にあるツール バーの検索ボックスを使用して、Web アプリとデータベースの作成ウィザードを検索する方法を示すスクリーンショット。

手順 2. [Web アプリとデータベースの作成] ページで、次のようにフォームに入力します。

  1. リソース グループ[新規作成] を選択して、名前として msdocs-expressjs-mongodb-tutorial を使用します。
  2. リージョン → 任意の近くの Azure リージョン。
  3. 名前 → msdocs-expressjs-mongodb-XYZXYZ は任意の 3 つのランダム文字。 この名前は Azure 全体で一意である必要があります。
  4. ランタイム スタック → Node 16 LTS
  5. ホスティング プラン → Basic 準備ができたら、後で運用価格レベルにスケールアップできます。
  6. MongoDB 用 Cosmos DB API は、データベース エンジンとして既定で選択されています。 Azure Cosmos DBは、100% MongoDB 互換の API を提供するクラウド ネイティブ データベースです。 生成されるデータベース名 (<app-name>-database) をメモします。 この情報は後で必要になります。
  7. [Review + create](レビュー + 作成) を選択します。
  8. 検証が完了した後、 [作成] を選択します。

[Web アプリとデータベース] ウィザードで新しいアプリとデータベースを構成する方法を示すスクリーンショット。

手順 3. デプロイが完了するまでに数分かかる場合があります。 デプロイが完了したら、[リソースに移動] ボタンを選択します。 App Service アプリに直接移動しますが、次のリソースが作成されます。

  • リソース グループ → 作成されたすべてのリソースのコンテナーです。
  • App Service プラン → App Service のコンピューティング リソースを定義します。 Basic レベルの Linux プランが作成されます。
  • App Service → アプリを表し、App Service プランで実行されます。
  • 仮想ネットワーク → App Service アプリと統合され、バックエンドのネットワーク トラフィックを分離します。
  • プライベート エンドポイント →仮想ネットワーク内のデータベース リソースのアクセス エンドポイントです。
  • ネットワーク インターフェイス → プライベート エンドポイントのプライベート IP アドレスを表します。
  • MongoDB 向けの Cosmos DB API →プライベート エンドポイントの背後からのみアクセスできます。 サーバー上にデータベースとユーザーが作成されます。
  • プライベート DNS ゾーン → 仮想ネットワーク内の Cosmos DB サーバーの DNS 解決を有効にします。

デプロイ プロセスが完了したことを示すスクリーンショット。

2. データベース接続の設定

作成ウィザードによって、既に MongoDB URI が生成されていますが、アプリには DATABASE_URL 変数と DATABASE_NAME 変数が必要です。 この手順では、アプリに必要な形式でアプリ設定を作成します。

手順 1. App Service ページの左側メニューで、[構成] を選びます。

App Service の [構成] ページを開く方法を示すスクリーンショット。

手順 2. [構成] ページの [アプリケーション設定] タブで、DATABASE_NAME 設定を作成します。

  1. [新しいアプリケーション設定] を選択します。
  2. [名前] フィールドに「DATABASE_NAME」と入力します。
  3. [値] フィールドに、作成ウィザードで自動的に生成されたデータベース名 (msdocs-expressjs-mongodb-XYZ-database など) を入力します。
  4. [OK] を選択します。

自動生成された接続文字列を確認する方法を示すスクリーンショット。

ステップ 3.

  1. ページの一番下までスクロールして、接続文字列 [MONGODB_URI] を選びます。 これは、作成ウィザードによって生成されたものです。
  2. [値] フィールドで [コピー] ボタンを選び、次の手順で使うためにテキスト ファイルに値を貼り付けます。 これは、MongoDB 接続文字列の URI 形式です。
  3. [キャンセル] を選択します。

アプリ設定の作成方法を示すスクリーンショット。

ステップ 4.

  1. 手順 2 と同じ手順を使用して、DATABASE_URL という名前のアプリ設定を作成し、MONGODB_URI 接続文字列からコピーしたもの (mongodb://...) に値を設定します。
  2. 上部のメニュー バーで [保存] を選択します。
  3. メッセージが表示されたら、[Continue](続行) を選択します。

[構成] ページで設定を保存する方法を示すスクリーンショット。

3. サンプル コードのデプロイ

この手順では、GitHub Actions を使って GitHub のデプロイを構成します。 これは、App Service にデプロイする多くの方法の 1 つにすぎませんが、デプロイ プロセスで継続的インテグレーションを実現する優れた方法でもあります。 既定では、GitHub リポジトリに git push があるたびにビルドとデプロイのアクションが起動されます。

手順 1. 新しいブラウザー ウィンドウで次を行います。

  1. GitHub アカウントにサインインします。
  2. https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app に移動します。
  3. [Fork] を選択します。
  4. [Create fork] (フォークの作成) を選択します。

サンプル GitHub リポジトリのフォークを作成する方法を示すスクリーンショット。

手順 2. GitHub のページで、. キーを押して、ブラウザーで Visual Studio Code を開きます。

GitHub で Visual Studio Code のブラウザー エクスペリエンスを開く方法を示すスクリーンショット。

手順 3. ブラウザーの Visual Studio Code で、config/connection.js をエクスプローラーで開きます。 getConnectionInfo 関数内で、MongoDB 接続用に先ほど作成したアプリ設定 (DATABASE_URL および DATABASE_NAME) が使用されていることを確認します。

ブラウザーの Visual Studio Code と、開いたファイルを示すスクリーンショット。

手順 4. App Service ページに戻り、左側のメニューから [デプロイ センター] を選びます。

App Service でデプロイ センターを開く方法を示すスクリーンショット。

手順 5. デプロイ センターのページで次を行います。

  1. [ソース] で、[GitHub] を選びます。 既定では、ビルド プロバイダーとして GitHub Actions が選ばれます。
  2. GitHub アカウントにサインインし、プロンプトに従って Azure を承認します。
  3. [組織] で、自分のアカウントを選びます。
  4. リポジトリで、msdocs-nodejs-mongodb-azure-sample-app を選択します。
  5. [ブランチ][main] を選びます。
  6. 上部のメニューから、[保存] を選択します。 App Service は、選んだ GitHub リポジトリの .github/workflows ディレクトリに、ワークフロー ファイルをコミットします。

GitHub Actions を使って CI/CD を構成する方法を示すスクリーンショット。

手順 6. デプロイ センターのページで次を行います。

  1. [ログ] を選択します。 デプロイの実行は既に開始されています。
  2. デプロイの実行のログ項目で、[ビルドまたはデプロイ ログ] を選びます。

デプロイ センターでデプロイ ログを開く方法を示すスクリーンショット。

手順 7. GitHub リポジトリにアクセスし、GitHub アクションが実行されていることを確認します。 ワークフロー ファイルでは、ビルドとデプロイという 2 つの異なるステージを定義します。 GitHub が実行されて、[完了] の状態が表示されるまで待ちます。 約 15 分ほどかかります。

GitHub の実行が進行中であることを示すスクリーンショット。

4. アプリの参照

手順 1. App Service ページで次を行います。

  1. 左側のメニューから [概要] を選びます。
  2. アプリの URL を選びます。 直接、https://<app-name>.azurewebsites.net に移動することもできます。

Azure portal から App Service を起動する方法を示すスクリーンショット。

手順 2. 一覧にいくつかのタスクを追加します。 セキュリティ保護されたデータ主導型の Node.js アプリが Azure App Service で実行されるようになりました。

App Service で実行されている Express.js アプリのスクリーンショット。

5. 診断ログのストリーミング

Azure App Service は、アプリケーションの問題を診断するために、コンソールに記録されたすべてのメッセージをキャプチャします。 サンプル アプリは、この機能を示すために、各エンドポイントにコンソール ログ メッセージを出力します。 たとえば、get エンドポイントでは、データベースから取得したタスクの数に関するメッセージと、何か問題が発生した場合のエラーメッセージが出力されます。

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

手順 1. App Service ページで次を行います。

  1. 左側のメニューから、[App Service ログ] を選びます。
  2. [アプリケーション ログ記録][ファイル システム] を選びます。

Azure portal で App Service のネイティブ ログを有効にする方法を示すスクリーンショット。

手順 2. 左側のメニューから [ログ ストリーム] を選択します。 プラットフォーム ログとコンテナー内のログを含む、アプリのログが表示されます。

Azure portal でログ ストリームを表示する方法を示すスクリーンショット。

6. Kudu を使用したデプロイされたファイルの検査

Azure App Service は、Kudu という Web ベースの診断コンソールを提供しており、Web アプリのサーバー ホスティング環境を調査することができます。 Kudu を使用して、Azure にデプロイされたファイルを表示し、アプリケーションのデプロイ履歴を確認し、ホスト環境で SSH セッションを開くこともできます。

手順 1. App Service ページで次を行います。

  1. 左側のメニューから [高度なツール] を選択します。
  2. [Go] \(移動) を選択します。 直接、https://<app-name>.scm.azurewebsites.net に移動することもできます。

App Service の Kudu のページに移動する方法を示すスクリーンショット。

手順 2. Kudu のページで [配置] を選択します。

ホスティング環境に関するさまざまな情報が表示されている Kudu SCM アプリのメイン ページのスクリーンショット。

Git または zip デプロイを使用して App Service にコードをデプロイした場合は、Web アプリのデプロイの履歴が表示されます。

App Service アプリの JSON 形式のデプロイ履歴を示すスクリーンショット。

手順 3. Kudu のホームページに戻り、[Site wwwroot](サイトの wwwroot) を選択します。

選択された [Site wwwroot](サイトの wwwroot) を示すスクリーンショット。

デプロイされたフォルダー構造を確認してクリックし、ファイルを参照および表示できます。

wwwroot ディレクトリにデプロイされたファイルのスクリーンショット。

7.リソースをクリーンアップする

完了したら、リソース グループを削除することで、Azure サブスクリプションからすべてのリソースを削除できます。

手順 1. Azure portal の上部にある検索バーで次を行います。

  1. リソース グループ名を入力します。
  2. リソース グループを選択します。

Azure portal でリソース グループを検索し、そこに移動する方法を示すスクリーンショット。

手順 2. [リソース グループ] ページで、[リソース グループの削除] を選択します。

Azure portal の [リソースグループの削除] ボタンの場所を示すスクリーンショット。

ステップ 3.

  1. リソース グループの名前を入力して、削除を確定します。
  2. [削除] を選択します。

Azure portal でリソース グループを削除するための確認ダイアログを示すスクリーンショット。 :

よく寄せられる質問

この設定にはいくらかかりますか。

作成リソースの価格は次のとおりです。

  • App Service プランは Basic レベルで作成され、スケールアップまたはスケールダウンできます。 「App Service の価格」をご覧ください。
  • Cosmos DB サーバーは 1 つのリージョンで作成して、他のリージョンに配布することができます。 「Azure Cosmos DB の価格」をご覧ください。
  • 仮想ネットワークでは、ピアリングなどの追加機能を構成しない限り、料金は発生しません。 「Azure Virtual Network の価格」を参照してください。
  • プライベート DNS ゾーンでは、少額の料金が発生します。 「Azure DNS の価格」を参照してください。

仮想ネットワークの背後でセキュリティ保護されている Cosmos DB サーバーに他のツールで接続するにはどうすればよいですか。

  • コマンドライン ツールからの基本的なアクセスには、アプリの SSH ターミナルから mongosh を実行できます。 アプリのコンテナーには mongosh が付属していないため、手動でインストールする必要があります。 インストールされたクライアントは、アプリの再起動後は保持されない点に注意してください。
  • MongoDB GUI クライアントから接続するには、マシンが仮想ネットワーク内にある必要があります。 たとえば、サブネットの 1 つに接続されている Azure VM、または Azure 仮想ネットワークとサイト間 VPN で接続されているオンプレミス ネットワーク内のマシンが該当します。
  • ポータルの Cosmos DB 管理ページの Mongo シェルから接続するには、マシンも仮想ネットワーク内にある必要があります。 代わりに、ローカル コンピューターの IP アドレスに対して Cosmos DB サーバーのファイアウォールを開くこともできますが、構成の攻撃対象領域が増えることになります。

GitHub Actions でのローカル アプリの開発はどのように行いますか。

App Service から自動生成されたワークフロー ファイルを例にとると、git push ごとに新しいビルドとデプロイの実行が起動されます。 GitHub リポジトリのローカル クローンから、必要な更新を行い、それを GitHub にプッシュします。 次に例を示します。

git add .
git commit -m "<some-message>"
git push origin main

GitHub Actions のデプロイが遅いのはなぜですか。

App Service から自動生成されるワークフロー ファイルは、ビルドしてからデプロイする、2 つのジョブの実行を定義しています。 各ジョブは独自のクリーンな環境で実行されるため、ワークフロー ファイルでは deploy ジョブが build ジョブからのファイルに確実にアクセスできるようにします。

2 つのジョブのプロセスでかかる時間のほとんどは、成果物のアップロードとダウンロードに費やされます。 必要であれば、2 つのジョブを 1 つにまとめて、アップロードとダウンロードの手順を不要にすることで、ワークフロー ファイルを簡略化することができます。

次の手順