チュートリアル:Azure で Node.js と MongoDB のアプリを構築する

Azure App Service は、非常にスケーラブルな、自己適用型の Web ホスティング サービスを提供します。 このチュートリアルでは、Azure App Service on Windows で Node.js アプリを作成し、MongoDB データベースに接続する方法について説明します。 完了すると、MEAN アプリケーション (MongoDB、Express、AngularJS、および Node.js) が Azure App Service で実行されます。 サンプル アプリケーションでは、Sails.jsAngular 12 を組み合わせて使用します。

Azure App Service は、Linux オペレーティング システムを使用する、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供します。 このチュートリアルでは、App Service on Linux で Node.js アプリを作成して MongoDB データベースにローカルで接続し、Azure Cosmos DB の MongoDB 用 API でデータベースにデプロイする方法を示します。 完了すると、MEAN アプリケーション (MongoDB、Express、AngularJS、および Node.js) が App Service on Linux で実行されます。 サンプル アプリケーションでは、Sails.jsAngular 12 を組み合わせて使用します。

Azure App Service で実行される MEAN アプリ

ここでは、次の内容について学習します。

  • Azure で MongoDB データベースを作成する
  • Node.js アプリを MongoDB に接続する
  • Azure にアプリケーションをデプロイする
  • データ モデルを更新し、アプリを再デプロイする
  • Azure から診断ログをストリーミングする
  • Azure Portal でアプリを管理する

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

前提条件

このチュートリアルを完了するには、以下が必要です。

  • Azure Cloud Shell で Bash 環境を使用します。

    新しいウィンドウで Cloud Shell を起動する

  • 必要に応じて、Azure CLI をインストールして、CLI リファレンス コマンドを実行します。

    • ローカル インストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。 認証プロセスを完了するには、ターミナルに表示される手順に従います。 その他のサインイン オプションについては、Azure CLI でのサインインに関するページを参照してください。

    • 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。 拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。

    • az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。 最新バージョンにアップグレードするには、az upgrade を実行します。

ローカル Node.js アプリを作成する

この手順では、ローカル Node.js プロジェクトを設定します。

サンプル アプリケーションの複製

ターミナル ウィンドウから、cd コマンドで作業ディレクトリに移動します。

次のコマンドを実行して、サンプル レポジトリを複製します。

git clone https://github.com/Azure-Samples/mean-todoapp.git

注意

サンプル アプリの作成方法については、「https://github.com/Azure-Samples/mean-todoapp」を参照してください。

アプリケーションの実行

次のコマンドを実行して、必要なパッケージをインストールし、アプリケーションを起動します。

cd mean-todoapp
npm install
node app.js --alter

アプリが完全に読み込まれると、次のようなメッセージが表示されます。

debug: -------------------------------------------------------
debug: :: Fri Jul 09 2021 13:10:34 GMT+0200 (Central European Summer Time)

debug: Environment : development
debug: Port        : 1337
debug: -------------------------------------------------------

ブラウザーで http://localhost:1337 にアクセスします。 いくつかの ToDo 項目を追加します。

MEAN サンプル アプリケーションでは、ユーザー データをデータベースに格納します。 既定では、ディスクベースの開発データベースが使用されます。 ToDo 項目を作成して表示できる場合、アプリはデータの読み取りと書き込みを行います。

正常に読み込まれた MEAN アプリ

任意のタイミングで Node.js を停止するには、ターミナルで Ctrl+C キーを押します。

運用 MongoDB を作成する

この手順では、Azure で MongoDB データベースを作成します。 アプリを Azure にデプロイすると、このクラウド データベースがアプリで使用されます。

このチュートリアルでは、MongoDB に Azure Cosmos DB を使用します。 Cosmos DB は MongoDB のクライアント接続をサポートします。

リソース グループを作成する

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。 たとえば、後から簡単な手順で一度にリソース グループ全体を削除することもできます。

Cloud Shell で az group create コマンドを使用して、リソース グループを作成します。 次の例では、myResourceGroup という名前のリソース グループを "西ヨーロッパ" の場所に作成します。 Free レベルの App Service がサポートされているすべての場所を表示するには、az appservice list-locations --sku FREE コマンドを実行します。

az group create --name myResourceGroup --location "West Europe"

通常は、現在地付近の地域にリソース グループおよびリソースを作成します。

コマンドが完了すると、リソース グループのプロパティが JSON 出力に表示されます。

Cosmos DB アカウントを作成する

注意

このチュートリアルでは、ご利用の Azure サブスクリプションに Azure Cosmos DB データベースを作成しますが、そのためには料金が発生します。 「Azure Cosmos DB を無料で試す」で、無料の Azure Cosmos DB アカウントを 7 日間体験できるので、そちらをご利用ください。 MongoDB タイルの [作成] ボタンをクリックするだけで、無料の MongoDB データベースを Azure に作成できます。 データベースが作成されたら、ポータルの [接続文字列] に移動して Azure Cosmos DB 接続文字列を取得してください。後でこのチュートリアルの中で使用します。

Cloud Shell で、az cosmosdb create コマンドを使用して Cosmos DB アカウントを作成します。

次のコマンドで、 <cosmosdb-name> プレースホルダーを一意の Cosmos DB 名で置き換えます。 この名前は、Cosmos DB エンドポイント (https://<cosmosdb-name>.documents.azure.com/) の一部として使用されるため、Azure のすべての Cosmos DB アカウントで一意である必要があります。 この名前に含めることができるのは英小文字、数字、およびハイフン (-) 文字のみで、文字数は 3 ~ 50 文字にする必要があります。

az cosmosdb create --name <cosmosdb-name> --resource-group myResourceGroup --kind MongoDB

--kind MongoDB パラメーターにより、MongoDB のクライアント接続が有効になります。

Cosmos DB アカウントが作成されると、Azure CLI によって次の例のような情報が表示されます。

{
  "apiProperties": {
    "serverVersion": "3.6"
  },
  "backupPolicy": {
    "periodicModeProperties": {
      "backupIntervalInMinutes": 240,
      "backupRetentionIntervalInHours": 8,
      "backupStorageRedundancy": "Geo"
    },
    "type": "Periodic"
  },
  "capabilities": [
    {
      "name": "EnableMongo"
    }
  ],
  "connectorOffer": null,
  "consistencyPolicy": {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "cors": [],
  "databaseAccountOfferType": "Standard",
  "defaultIdentity": "FirstPartyIdentity",
  "disableKeyBasedMetadataWriteAccess": false,
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  ...
  < Output truncated for readability >
}

アプリを運用 MongoDB に接続する

この手順では、MongoDB 接続文字列を使用して、サンプル アプリケーションを、先ほど作成した Cosmos DB データベースに接続します。

データベース キーの取得

Cosmos DB データベースに接続するには、データベース キーが必要です。 Cloud Shell で、az cosmosdb keys list コマンドを使用して主キーを取得します。

az cosmosdb keys list --name <cosmosdb-name> --resource-group myResourceGroup

Azure CLI によって次の例のような情報が表示されます。

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

primaryMasterKey の値をコピーします。 この情報は、次の手順に必要です。

サンプル アプリケーションでの接続文字列の構成

ローカル リポジトリの config/datastores.js で、既存の内容を次のコードに置き換え、変更を保存します。

module.exports.datastores = {
  default: {
    adapter: 'sails-mongo',
    url: process.env.MONGODB_URI,
    ssl: true,
  },
};

Cosmos DB では TLS/SSL が必須なので、ssl: true オプションは必須です。 url は、次に設定する環境変数に設定されます。

ターミナルで MONGODB_URI 環境変数を設定します。 2 つの <cosmosdb-name> プレースホルダーを Cosmos DB データベース名で置き換え、 <cosmosdb-key> プレースホルダーを前の手順でコピーしたキーで置き換えます。

export MONGODB_URI=mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp

注意

この接続文字列は、Sails.js のドキュメントで定義されている形式に従います。

MongoDB でアプリケーションをテストする

ローカル ターミナル ウィンドウで、node app.js --alter をもう一度実行します。

node app.js --alter

再度 http://localhost:1337 に移動します。 ToDo 項目を作成して表示できる場合、アプリは Azure の Cosmos DB データベースを使用してデータの読み取りと書き込みを行います。

ターミナルで、Ctrl+C キーを押して Node.js を停止します。

アプリを Azure にデプロイする

この手順では、MongoDB に接続している Node.js アプリケーションを Azure App Service にデプロイします。

デプロイ ユーザーを構成する

FTP およびローカルの Git では、"デプロイ ユーザー" を使用して Azure Web アプリにデプロイできます。 デプロイ ユーザーを構成すると、すべての Azure デプロイでこのユーザーを使用できます。 アカウントレベルのデプロイのユーザー名とパスワードは、Azure サブスクリプションの資格情報とは異なります。

デプロイ ユーザーを構成するには、Azure Cloud Shell で az webapp deployment user set コマンドを実行します。 <username> と <password> を、デプロイ ユーザーのユーザー名とパスワードで置き換えます。

  • ユーザー名は、Azure 内で一意である必要があります。ローカル Git プッシュの場合、"@" 記号を含めることはできません。
  • パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。
az webapp deployment user set --user-name <username> --password <password>

JSON 出力には、パスワードが null として表示されます。 'Conflict'. Details: 409 エラーが発生した場合は、ユーザー名を変更します。 'Bad Request'. Details: 400 エラーが発生した場合は、より強力なパスワードを使用します。

Web アプリのデプロイに使用するユーザー名とパスワードを記録します。

App Service プランを作成する

Cloud Shell で az appservice plan create コマンドを使用して、App Service プランを作成します。

次の例では、B1 価格レベルの myAppServicePlan という名前の App Service プランを作成します。

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "UK West",
  "hostingEnvironmentProfile": null,
  "hyperV": false,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "isXenon": false,
  "kind": "app",
  "location": "ukwest",
  "maximumElasticWorkerCount": 1,
  "maximumNumberOfWorkers": 0,
  < JSON data removed for brevity. >
} 

Cloud Shell で az appservice plan create コマンドを使用して、App Service プランを作成します。

次の例では、B1 価格レベルの myAppServicePlan という名前の App Service プランを作成します。

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "linux",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Web アプリを作成する

myAppServicePlan App Service プランで Web アプリを作成します。

Cloud Shell で、az webapp create コマンドを使用することができます。 次の例では、<app-name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。 ランタイムは NODE|14-lts に設定されています。 サポートされているすべてのランタイムを確認するには、az webapp list-runtimes を実行します。

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような出力が表示されます。

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Git デプロイが有効な、空の Web アプリが作成されました。

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git 形式で出力されます。 この URL は後で必要になるので保存しておいてください。

myAppServicePlan App Service プランで Web アプリを作成します。

Cloud Shell で、az webapp create コマンドを使用することができます。 次の例では、<app-name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。 ランタイムは NODE|14-lts に設定されています。 サポートされているすべてのランタイムを確認するには、az webapp list-runtimes --linux を実行します。

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような出力が表示されます。

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "clientCertExclusionPaths": null,
  "clientCertMode": "Required",
  "cloningInfo": null,
  "containerSize": 0,
  "customDomainVerificationId": "54184270DF7B3B4BF30221B6303E789C324E4783C8DF1FBAA3D111FC72328CE9",
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Git デプロイが有効な、空の Web アプリが作成されました。

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git 形式で出力されます。 この URL は後で必要になるので保存しておいてください。

環境変数の構成

サンプル アプリケーションは、config/datastores.jsMONGODB_URI 環境変数を使用するように既に構成されていることに注意してください。 App Service で、アプリ設定を使用してこの変数を挿入します。

アプリ設定を設定するには、Cloud Shell で az webapp config appsettings set コマンドを使用します。

次の例では、Azure アプリの MONGODB_URI アプリ設定を構成します。 <app-name><cosmosdb-name> 、および <cosmosdb-key> の各プレースホルダーを置き換えます。

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI='mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp' DEPLOYMENT_BRANCH='main'

注意

DEPLOYMENT_BRANCH は、App Service にデプロイする Git ブランチを展開エンジンに通知する特殊なアプリ設定です。

Git から Azure へのプッシュ

  1. main ブランチをデプロイするため、App Service アプリの既定のデプロイ ブランチを main に設定する必要があります (「デプロイ ブランチを変更する」を参照)。 Cloud Shell で、az webapp config appsettings set コマンドを使用して DEPLOYMENT_BRANCH アプリ設定を設定します。

    az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'
    
  2. ローカル ターミナル ウィンドウで、ローカル Git リポジトリに Azure リモートを追加します。 <deploymentLocalGitUrl-from-create-step> を、「Web アプリを作成する」で保存した Git リモートの URL で置き換えます。

    git remote add azure <deploymentLocalGitUrl-from-create-step>
    
  3. アプリをデプロイするために、次のコマンドで Azure リモートにプッシュします。 Git Credential Manager によって資格情報の入力を求めるメッセージが表示されたら、Azure portal へのサインインに使用する資格情報ではなく、「デプロイ ユーザーを構成する」で作成した資格情報を入力してください。

    git push azure main
    

    このコマンドの実行には、数分かかる場合があります。 実行中、次の例のような情報が表示されます。

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 318 bytes | 318.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id '4eb0ca7190'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Creating app_offline.htm
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'package.json'
remote: Deleting app_offline.htm
remote: Looking for app.js/server.js under site root.
remote: Using start-up script app.js
remote: Generated web.config.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      main -> main

ヒント

Git のデプロイ中に、展開エンジンでは、ビルド オートメーションの一部として npm install --production が実行されます。

  • package.json で定義されているように、postinstall スクリプトは npm install によって取得され、ng build を実行して Angular の実稼働ファイルを生成し、アセット フォルダーにデプロイします。
  • package.jsonscriptsでは、node_modules/.bin にインストールされているツールを使用できます。 npm install にも node_modules/.bin/ng がインストールされたので、それを使用して Angular クライアント ファイルをデプロイすることができます。 この npm 動作は、Azure App Service でもまったく同じです。 package.jsondevDependencies にあるパッケージがインストールされていません。 運用環境で必要なすべてのパッケージを dependencies に移動する必要があります。

アプリで既定のオートメーションをバイパスしてカスタム オートメーションを実行する必要がある場合は、「Grunt/Bower/Gulp を実行する」を参照してください。

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 347 bytes | 347.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Deploy Async
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'f776be774a'.
remote: Repository path is /home/site/repository
remote: Running oryx build...
remote: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
remote: You can report issues at https://github.com/Microsoft/Oryx/issues
remote: 
remote: Oryx Version: 0.2.20210420.1, Commit: 85c6e9278aae3980b86cb1d520aaad532c814ed7, ReleaseTagName: 20210420.1
remote: 
remote: Build Operation ID: |qwejn9R4StI=.5e8a3529_
remote: Repository Commit : f776be774a3ea8abc48e5ee2b5132c037a636f73
.
.
.
remote: Deployment successful.
remote: Deployment Logs : 'https://<app-name>.scm.azurewebsites.net/newui/jsonviewer?view_url=/api/deployments/a6fcf811136739f145e0de3be82ff195bca7a68b/log'
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
   4f7e3ac..a6fcf81  main -> main

ヒント

Git のデプロイ中に、展開エンジンでは、ビルド オートメーションの一部として npm install が実行されます。

  • package.json で定義されているように、postinstall スクリプトは npm install によって取得され、ng build を実行して Angular の実稼働ファイルを生成し、アセット フォルダーにデプロイします。
  • package.jsonscriptsでは、node_modules/.bin にインストールされているツールを使用できます。 npm install にも node_modules/.bin/ng がインストールされたので、それを使用して Angular クライアント ファイルをデプロイすることができます。 この npm 動作は、Azure App Service でもまったく同じです。 ビルド オートメーションが完了すると、完了したリポジトリ全体が /home/site/wwwroot フォルダーにコピーされ、そこからアプリがホストされます。

アプリで既定のオートメーションをバイパスしてカスタム オートメーションを実行する必要がある場合は、「Grunt/Bower/Gulp を実行する」を参照してください。

Azure アプリを参照する

Web ブラウザーを使用して、デプロイされたアプリを参照します。

https://<app-name>.azurewebsites.net 

ブラウザーで ToDo 項目を作成して表示できる場合は、Azure のサンプル アプリが MongoDB (Cosmos DB) データベースに接続されています。

Azure App Service で実行される MEAN アプリ

お疲れさまでした。 データ主導型の Node.js アプリが Azure App Service で実行されています。

データ モデルを更新し、再デプロイする

この手順では、Todo データ モデルを変更し、変更内容を Azure に発行します。

サーバー側モデルを更新する

Sails.js では、サーバー側モデルと API コードの変更は、データ モデルを変更するのと同じように簡単です。これは、規定でモデルの共通ルートを Sails.js が既に定義しているためです。

ローカル リポジトリで、api/models/Todo.js を開き、done 属性を追加します。 完了すると、スキーマ コードは次のようになります。

module.exports = {

  attributes: {
    value: {type: 'string'},
    done: {type: 'boolean', defaultsTo: false}
  },

};

クライアント コードを更新する

変更する必要があるファイルは、クライアント モデル、HTML テンプレート、コンポーネントファイルの 3 つです。

client/src/app/todo.ts を開き、done プロパティを追加します。 完了すると、モデルは次のようになります。

export class Todo {
    id!: String;
    value!: String;
    done!: Boolean;
}

client/src/app/app.component.html を開きます。 唯一の <span> 要素のすぐ上に、次のコードを追加して、各 ToDo 項目の先頭にチェックボックスを追加します。

<input class="form-check-input me-2" type="checkbox" [checked]="todo.done" (click)="toggleDone(todo.id, i)" [disabled]="isProcessing">

client/src/app/app.component.ts を開きます。 最後の右中かっこ (}) のすぐ上に、次のメソッドを挿入します。 チェックボックスがクリックされると、上記のテンプレート コードによって呼び出され、サーバー側データを更新します。

toggleDone(id:any, i:any) {
  console.log("Toggled checkbox for " + id);
  this.isProcessing = true;
  this.Todos[i].done = !this.Todos[i].done;
  this.restService.updateTodo(id, this.Todos[i])
  .subscribe((res) => {
      console.log('Data updated successfully!');
      this.isProcessing = false;
    }, (err) => {
      console.log(err);
      this.Todos[i].done = !this.Todos[i].done;
  });
}

変更をローカルでテストする

ローカル ターミナル ウィンドウで、更新された Angular クライアント コードを、package.json で定義したビルド スクリプトでコンパイルします。

npm run build

変更を node app.js --alter でもう一度テストします。 サーバー側モデルを変更したため、--alter フラグを使用して Sails.js による Cosmos DB データベースのデータ構造の変更が実行されます。

node app.js --alter

http://localhost:1337 に移動します。 ToDo 項目の前にチェックボックスが表示されます。 チェックボックスをオンまたはオフにすると、Azure の Cosmos DB データベースが更新され、ToDo 項目が実行されたことが示されます。

完成したデータと UI の追加

ターミナルで、Ctrl+C キーを押して Node.js を停止します。

Azure に変更を発行する

ローカル ターミナル ウィンドウで、変更を Git にコミットし、コード変更を Azure にプッシュします。

git commit -am "added done field"
git push azure main

git push が完了したら、Azure アプリに移動し、新機能を試します。

Azure に発行されたモデルとデータベースの変更

以前に追加した記事は引き続き表示されます。 Cosmos DB の既存のデータは失われません。 また、データ スキーマは更新され、既存のデータはそのまま残ります。

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

Azure App Service で Node.js アプリケーションを実行している場合、コンソール ログをターミナルにパイプできます。 このようにすると、アプリケーション エラーのデバッグに役立つ同じ診断メッセージを取得できます。

ログのストリーミングを開始するには、Cloud Shell で az webapp log tail コマンドを使用します。

az webapp log tail --name <app-name> --resource-group myResourceGroup

ログのストリーミングが開始されたら、ブラウザーで Azure アプリを最新の情報に更新して、Web トラフィックを取得します。 ターミナルにパイプされたコンソール ログが表示されます。

Ctrl+C キーを押して、任意のタイミングでログのストリーミングを停止します。

App Service のアプリケーション コード内から生成されたコンソール ログにアクセスするには、Cloud Shell で次のコマンドを実行して、診断ログを有効にします。

az webapp log config --resource-group <resource-group-name> --name <app-name> --docker-container-logging filesystem --level Verbose

--level で有効な値は、ErrorWarningInfo、および Verbose です。 後続の各レベルには、前のレベルが含まれます。 たとえば、Error にはエラー メッセージのみが含まれ、Verbose にはすべてのメッセージが含まれます。

診断ログがオンになったら、次のコマンドを実行して、ログのストリームを確認します。

az webapp log tail --resource-group <resource-group-name> --name <app-name>

コンソール ログがすぐに表示されない場合は、30 秒以内にもう一度確認します。

注意

https://<app-name>.scm.azurewebsites.net/api/logs/docker で、ブラウザーからログ ファイルを検査することもできます。

任意のタイミングでログのストリーミングを停止するには、Ctrl+C と入力します。

Azure アプリを管理する

Azure portal に移動し、お客様が作成したアプリを表示します。

左側のメニューで [App Services] をクリックしてから、お客様の Azure アプリの名前をクリックします。

Azure アプリへのポータル ナビゲーション

既定では、ポータルにはアプリの [概要] ページが表示されます。 このページでは、アプリの動作状態を見ることができます。 ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクも行うことができます。 ページの左側にあるタブは、開くことができるさまざまな構成ページを示しています。

Azure Portal の [App Service] ページ

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

前の手順では、リソース グループ内に Azure リソースを作成しました。 これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。

az group delete --name myResourceGroup

このコマンドの実行には、少し時間がかかる場合があります。

次のステップ

ここで学習した内容は次のとおりです。

  • Azure で MongoDB データベースを作成する
  • Node.js アプリを MongoDB に接続する
  • Azure にアプリケーションをデプロイする
  • データ モデルを更新し、アプリを再デプロイする
  • Azure からターミナルにログをストリーミングする
  • Azure Portal でアプリを管理する

次のチュートリアルに進み、カスタム DNS 名をアプリにマップする方法を学習してください。

または、他のリソースを参照してください。