チュートリアル: Azure に Node.js + MongoDB Web アプリをデプロイする

• アクティブなサブスクリプションが含まれる Azure アカウント。 Azure アカウントがない場合は、無料で作成できます。
• GitHub アカウント。 1 つ無料で取得することもできます。
• Express.js 開発に関する知識。
• (オプション) GitHub Copilot を試す場合は、GitHub Copilot アカウント。 30 日間の無料試用版が提供されています。

• アクティブなサブスクリプションが含まれる Azure アカウント。 Azure アカウントがない場合は、無料で作成できます。
• Azure Developer CLI がインストールされていること。 Azure Developer CLI が既にインストールされているため、Azure Cloud Shell の手順に従うことができます。
• Express.js 開発に関する知識。
• (オプション) GitHub Copilot を試す場合は、GitHub Copilot アカウント。 30 日間の無料試用版が提供されています。

2.App Service と Azure Cosmos DB を作成する

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

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

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

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

3.セキュリティで保護された接続のシークレット

作成ウィザードにより、接続文字列がアプリ設定として既に自動的に生成されています。 ただし、セキュリティのベスト プラクティスは、App Service からシークレットを完全に排除することです。 シークレットをキー コンテナーに移動し、サービス コネクタを利用してアプリ設定を Key Vault 参照に変更します。

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

4.サンプル コードをデプロイする

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

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

5.アプリの参照

6.診断ログをストリーミングする

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.');
    });
});

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

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

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

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

2.Azure リソースを作成してサンプル アプリをデプロイする

このステップでは、Azure リソースを作成し、サンプル アプリを App Service on Linux にデプロイします。 このチュートリアルで使用する手順では、App Service と Azure Cosmos DB を含む、既定でセキュリティ保護されたリソースのセットを作成します。

開発コンテナーには、既に Azure Developer CLI (AZD) が含まれています。

1. リポジトリのルートから、azd init を実行します。

   azd init --template nodejs-app-service-cosmos-redis-infra
   

2. メッセージが表示されたら、次の回答を入力します。

   Question	Answer
   The current directory is not empty. (現在のディレクトリが空ではありません。) Would you like to initialize a project here in '<your-directory>'? ('<ディレクトリ>' でプロジェクトを初期化しますか?)	Y
   What would you like to do with these files? (これらのファイルをどうしますか?)	Keep my existing files unchanged (既存のファイルを変更しないでそのままにする)
   Enter a new environment name (新しい環境の名前を入力してください)	一意の名前を入力します。 AZD テンプレートでは、この名前を Azure での Web アプリの DNS 名の一部として使用します (<app-name>-<hash>.azurewebsites.net)。 英数字とハイフンを使用できます。

3. azd auth login コマンドを実行し、プロンプトに従って Azure にサインインします。

   azd auth login
   

4. 必要な Azure リソースを作成し、azd up コマンドを使用してアプリ コードをデプロイします。 プロンプトに従って、Azure リソースの目的のサブスクリプションと場所を選択します。

   azd up
   

   azd up コマンドが完了するまで約 15 分かかります (大部分の時間は Redis キャッシュに費やされます)。 また、アプリケーション コードのコンパイルとデプロイも行われますが、後でコードを変更して App Service で動作するようにします。 実行中、このコマンドは、Azure のデプロイへのリンクを含む、プロビジョニングとデプロイのプロセスに関するメッセージを提供します。 完了すると、コマンドはデプロイ アプリケーションへのリンクも表示します。

   この AZD テンプレートには、次の Azure リソースを使用して既定でセキュリティ保護されたアーキテクチャを生成するファイル (azure.yaml と infra ディレクトリ) が含まれています。

   • [リソース グループ]: 作成されたすべてのリソースのコンテナー。
   • [App Service プラン]: App Service のコンピューティング リソースを定義します。 B1 レベルの Linux プランが作成されます。
   • [App Service]: アプリを表し、App Service プランで実行されます。
   • [仮想ネットワーク]: App Service アプリと統合され、バックエンド ネットワーク トラフィックを分離します。
   • MongoDB API を使用した Azure Cosmos DB アカウント: プライベート エンドポイントの背後からのみアクセスできます。 サーバー上にデータベースが自動的に作成されます。
   • [Azure Cache for Redis]: 仮想ネットワーク内からのみアクセスできます。
   • キー コンテナー: プライベート エンドポイントの背後からのみアクセスできます。 App Service アプリのシークレットを管理するために使用されます。
   • プライベート エンドポイント: 仮想ネットワーク内のキー コンテナー、データベース サーバー、Redis キャッシュのアクセス エンドポイント。
   • プライベート DNS ゾーン: 仮想ネットワーク内の Cosmos DB データベース、Redis Cache、キー コンテナーの DNS 解決を有効にします。
   • [Log Analytics ワークスペース]: アプリでログを配布するためのターゲット コンテナーとして機能します。ここでは、ログにクエリを実行することもできます。

   コマンドによるリソースの作成とアプリケーション コードのデプロイが初めて完了したときには、デプロイされたサンプル アプリはまだ機能しません。これは、Azure のデータベースに接続するために少し変更を加える必要があるためです。

3.接続文字列を確認する

使用している AZD テンプレートにより、接続変数がアプリ設定として既に自動的に生成されており、それらが便宜のためにターミナルに出力されます。 アプリの設定は、接続のシークレットをコード リポジトリに残さないための 1 つの方法です。

1. AZD の出力で、アプリ設定 AZURE_COSMOS_CONNECTIONSTRING を見つけます。 設定名のみが表示されます。 これらは、AZD の出力では次のようになります。

    App Service app has the following app settings:
            - AZURE_COSMOS_CONNECTIONSTRING
            - AZURE_REDIS_CONNECTIONSTRING
            - AZURE_KEYVAULT_RESOURCEENDPOINT
            - AZURE_KEYVAULT_SCOPE
    

   AZURE_COSMOS_CONNECTIONSTRING には、Azure の Cosmos DB データベースへの接続文字列が含まれています。 これは、後でコードで使用する必要があります。

2. 便宜のために、AZD テンプレートでは、アプリのアプリ設定ページへの直接リンクが示されます。 そのリンクを見つけ、それを新しいブラウザー タブで開きます。

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

4.サンプル コードを変更して再デプロイする

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

5.アプリの参照

1. AZD の出力で、アプリの URL を見つけ、ブラウザーでそこに移動します。 URL は、AZD の出力では次のようになります。

    Deploying services (azd deploy)
   
      (✓) Done: Deploying service web
      - Endpoint: https://<app-name>-<hash>.azurewebsites.net/
    

2. 一覧にいくつかのタスクを追加します。

   

   おめでとうございます。Azure Cosmos DB へのセキュリティで保護された接続を使用して、Web アプリが Azure App Service で実行されています。

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

6.診断ログをストリーミングする

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.');
    });
});

AZD の出力で、App Service ログをストリーミングするためのリンクを見つけ、ブラウザーでそこに移動します。 このリンクは、AZD の出力では次のようになります。

Stream App Service logs at: https://portal.azure.com/#@/resource/subscriptions/<subscription-guid>/resourceGroups/<group-name>/providers/Microsoft.Web/sites/<app-name>/logStream

Java アプリのログ記録の詳細については、シリーズの「.NET、Node.js、Python、Java アプリケーション用の Azure Monitor OpenTelemetry を有効にする」を参照してください。

問題がある場合は、 「トラブルシューティング」セクションを確認してください。

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

現在のデプロイ環境内のすべての Azure リソースを削除するには、azd down を実行し、プロンプトに従います。

azd down