チュートリアル:Azure で Node.js と MongoDB のアプリを構築するTutorial: Build a Node.js and MongoDB app in Azure

Azure App Service は、非常にスケーラブルな、自己適用型の Web ホスティング サービスを提供します。Azure App Service provides a highly scalable, self-patching web hosting service. このチュートリアルでは、Azure App Service on Windows で Node.js アプリを作成し、MongoDB データベースに接続する方法について説明します。This tutorial shows how to create a Node.js app in App Service on Windows and connect it to a MongoDB database. 完了すると、MEAN アプリケーション (MongoDB、Express、AngularJS、および Node.js) が Azure App Service で実行されます。When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. 単純化するために、サンプル アプリケーションでは MEAN.js Web フレームワークを使用します。For simplicity, the sample application uses the MEAN.js web framework.

Azure App Service は、Linux オペレーティング システムを使用する、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供します。Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. このチュートリアルでは、App Service on Linux で Node.js アプリを作成して MongoDB データベースにローカルで接続し、Azure Cosmos DB の MongoDB 用 API でデータベースにデプロイする方法を示します。This tutorial shows how to create a Node.js app in App Service on Linux, connect it locally to a MongoDB database, then deploy it to a database in Azure Cosmos DB's API for MongoDB. 完了すると、MEAN アプリケーション (MongoDB、Express、AngularJS、および Node.js) が App Service on Linux で実行されます。When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in App Service on Linux. 単純化するために、サンプル アプリケーションでは MEAN.js Web フレームワークを使用します。For simplicity, the sample application uses the MEAN.js web framework.

Azure App Service で実行されている MEAN.js アプリ

ここでは、次の内容について学習します。What you'll learn:

  • Azure で MongoDB データベースを作成するCreate a MongoDB database in Azure
  • Node.js アプリを MongoDB に接続するConnect a Node.js app to MongoDB
  • Azure にアプリケーションをデプロイするDeploy the app to Azure
  • データ モデルを更新し、アプリを再デプロイするUpdate the data model and redeploy the app
  • Azure から診断ログをストリーミングするStream diagnostic logs from Azure
  • Azure Portal でアプリを管理するManage the app in the Azure portal

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

前提条件Prerequisites

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

  1. Git をインストールするInstall Git
  2. Node.js および NPM をインストールするInstall Node.js and NPM
  3. Bower をインストールする (MEAN.js で必要です)Install Bower (required by MEAN.js)
  4. Gulp.js をインストールします (MEAN.js で必要です)Install Gulp.js (required by MEAN.js)
  5. MongoDB Community Edition をインストールして実行するInstall and run MongoDB Community Edition

ローカル MongoDB をテストするTest local MongoDB

ターミナル ウィンドウを開き、cd コマンドで MongoDB インストールの bin ディレクトリに移動します。Open the terminal window and cd to the bin directory of your MongoDB installation. このチュートリアルでは、ターミナル ウィンドウを使ってすべてのコマンドを実行します。You can use this terminal window to run all the commands in this tutorial.

ターミナルで mongo を実行して、ローカルの MongoDB サーバーに接続します。Run mongo in the terminal to connect to your local MongoDB server.

mongo

接続に成功した場合、MongoDB データベースは既に稼働しています。If your connection is successful, then your MongoDB database is already running. 成功しない場合は、「Install MongoDB Community Edition (MongoDB Community Edition をインストールする)」の手順に従って、ローカルの MongoDB データベースが開始されていることを確認します。If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. 多くの場合、MongoDB はインストールされていますが、mongod を実行して起動する必要があります。Often, MongoDB is installed, but you still need to start it by running mongod.

MongoDB データベースのテストが完了したら、ターミナルで Ctrl+C キーを押します。When you're done testing your MongoDB database, type Ctrl+C in the terminal.

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

この手順では、ローカル Node.js プロジェクトを設定します。In this step, you set up the local Node.js project.

サンプル アプリケーションの複製Clone the sample application

ターミナル ウィンドウから、cd コマンドで作業ディレクトリに移動します。In the terminal window, cd to a working directory.

次のコマンドを実行して、サンプル レポジトリを複製します。Run the following command to clone the sample repository.

git clone https://github.com/Azure-Samples/meanjs.git

このサンプル レポジトリには、MEAN.js レポジトリのコピーが含まれています。This sample repository contains a copy of the MEAN.js repository. このコピーは App Service で実行するために変更されています (詳細については、MEAN.js リポジトリの README ファイルをご覧ください)。It is modified to run on App Service (for more information, see the MEAN.js repository README file).

アプリケーションの実行Run the application

次のコマンドを実行して、必要なパッケージをインストールし、アプリケーションを起動します。Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

config.domain の警告は無視します。Ignore the config.domain warning. アプリが完全に読み込まれると、次のようなメッセージが表示されます。When the app is fully loaded, you see something similar to the following message:

--
MEAN.JS - Development EnvironmentMEAN.JS - Development Environment

Environment:     development Server:        http://0.0.0.0:3000 Database:        mongodb://localhost/mean-dev App version:   0.5.0 MEAN.JS version:0.5.0 --Environment:     development Server:          http://0.0.0.0:3000 Database:        mongodb://localhost/mean-dev App version:     0.5.0 MEAN.JS version: 0.5.0 --

ブラウザーで http://localhost:3000 にアクセスします。Navigate to http://localhost:3000 in a browser. 上部のメニューの [サインアップ] をクリックし、テスト ユーザーを作成します。Click Sign Up in the top menu and create a test user.

MEAN.js サンプル アプリケーションでは、ユーザー データをデータベースに格納します。The MEAN.js sample application stores user data in the database. ユーザーを作成してサインインすると、アプリがローカルの MongoDB データベースにデータを書き込みます。If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

MongoDB に正常に接続されている MEAN.js

[管理者] > [Manage Articles](記事の管理) を選択して、いくつかの記事を追加します。Select Admin > Manage Articles to add some articles.

任意のタイミングで Node.js を停止するには、ターミナルで Ctrl+C キーを押します。To stop Node.js at any time, press Ctrl+C in the terminal.

Azure Cloud Shell を使用するUse Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell で Bash または PowerShell を使用して、Azure サービスを操作できます。You can use either Bash or PowerShell with Cloud Shell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を開始するには:To start Azure Cloud Shell:

オプションOption 例とリンクExample/Link
コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. [使ってみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. 新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell を開始します。Start Cloud Shell.

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。Select the Copy button on a code block to copy the code.

  3. Windows と Linux では Ctrl+Shift+V キーを選択し、macOS では Cmd+Shift+V キーを選択して、コードを Cloud Shell セッションに貼り付けます。Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Enter キーを選択して、コードを実行します。Select Enter to run the code.

運用 MongoDB を作成するCreate production MongoDB

この手順では、Azure で MongoDB データベースを作成します。In this step, you create a MongoDB database in Azure. アプリを Azure にデプロイすると、このクラウド データベースがアプリで使用されます。When your app is deployed to Azure, it uses this cloud database.

このチュートリアルでは、MongoDB に Azure Cosmos DB を使用します。For MongoDB, this tutorial uses Azure Cosmos DB. Cosmos DB は MongoDB のクライアント接続をサポートします。Cosmos DB supports MongoDB client connections.

リソース グループを作成するCreate a resource group

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。A resource group is a logical container into which Azure resources, such as web apps, databases, and storage accounts, are deployed and managed. たとえば、後から簡単な手順で一度にリソース グループ全体を削除することもできます。For example, you can choose to delete the entire resource group in one simple step later.

Cloud Shell で az group create コマンドを使用して、リソース グループを作成します。In the Cloud Shell, create a resource group with the az group create command. 次の例では、myResourceGroup という名前のリソース グループを "西ヨーロッパ" の場所に作成します。The following example creates a resource group named myResourceGroup in the West Europe location. Free レベルの App Service がサポートされているすべての場所を表示するには、az appservice list-locations --sku FREE コマンドを実行します。To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

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

通常は、現在地付近の地域にリソース グループおよびリソースを作成します。You generally create your resource group and the resources in a region near you.

コマンドが完了すると、リソース グループのプロパティが JSON 出力に表示されます。When the command finishes, a JSON output shows you the resource group properties.

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

注意

このチュートリアルでは、ご利用の Azure サブスクリプションに Azure Cosmos DB データベースを作成しますが、そのためには料金が発生します。There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Azure Cosmos DB を無料で試す」で、無料の Azure Cosmos DB アカウントを 7 日間体験できるので、そちらをご利用ください。To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. MongoDB タイルの [作成] ボタンをクリックするだけで、無料の MongoDB データベースを Azure に作成できます。Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. データベースが作成されたら、ポータルの [接続文字列] に移動して Azure Cosmos DB 接続文字列を取得してください。後でこのチュートリアルの中で使用します。Once the database is created, navigate to Connection String in the portal and retrieve your Azure Cosmos DB connection string for use later in the tutorial.

Cloud Shell で、az cosmosdb create コマンドを使用して Cosmos DB アカウントを作成します。In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

次のコマンドで、 <cosmosdb-name> プレースホルダーを一意の Cosmos DB 名で置き換えます。In the following command, substitute a unique Cosmos DB name for the <cosmosdb-name> placeholder. この名前は、Cosmos DB エンドポイント (https://<cosmosdb-name>.documents.azure.com/) の一部として使用されるため、Azure のすべての Cosmos DB アカウントで一意である必要があります。This name is used as the part of the Cosmos DB endpoint, https://<cosmosdb-name>.documents.azure.com/, so the name needs to be unique across all Cosmos DB accounts in Azure. この名前に含めることができるのは英小文字、数字、およびハイフン (-) 文字のみで、文字数は 3 ~ 50 文字にする必要があります。The name must contain only lowercase letters, numbers, and the hyphen (-) character, and must be between 3 and 50 characters long.

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

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

Cosmos DB アカウントが作成されると、Azure CLI によって次の例のような情報が表示されます。When the Cosmos DB account is created, the Azure CLI shows information similar to the following example:

{
  "consistencyPolicy":
  {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "databaseAccountOfferType": "Standard",
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  "failoverPolicies": 
  ...
  < Output truncated for readability >
}

アプリを運用 MongoDB に接続するConnect app to production MongoDB

この手順では、MongoDB 接続文字列を使用して、MEAN.js サンプル アプリケーションを、先ほど作成した Cosmos DB データベースに接続します。In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

データベース キーの取得Retrieve the database key

Cosmos DB データベースに接続するには、データベース キーが必要です。To connect to the Cosmos DB database, you need the database key. Cloud Shell で、az cosmosdb list-keys コマンドを使用して主キーを取得します。In the Cloud Shell, use the az cosmosdb list-keys command to retrieve the primary key.

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

Azure CLI によって次の例のような情報が表示されます。The Azure CLI shows information similar to the following example:

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

primaryMasterKey の値をコピーします。 この情報は、次の手順に必要です。You need this information in the next step.

Node.js アプリケーションでの接続文字列の構成Configure the connection string in your Node.js application

ローカルの MEAN.js リポジトリの "config/env/ " フォルダーに、"local-production.js" という名前のファイルを作成します。In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. .gitignore は既に、このファイルがリポジトリにアクセスできないように構成されます。.gitignore is already configured to keep this file out of the repository.

ここに次のコードをコピーします。Copy the following code into it. 2 つの <cosmosdb-name> プレースホルダーを Cosmos DB データベース名で置き換え、 <primary-master-key> プレースホルダーを前の手順でコピーしたキーで置き換えます。Be sure to replace the two <cosmosdb-name> placeholders with your Cosmos DB database name, and replace the <primary-master-key> placeholder with the key you copied in the previous step.

module.exports = {
  db: {
    uri: 'mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false'
  }
};

Cosmos DB では SSL が必須なので、ssl=true オプションは必須です。The ssl=true option is required because Cosmos DB requires SSL.

変更を保存します。Save your changes.

運用モードでのアプリケーションのテストTest the application in production mode

ローカル ターミナル ウィンドウで次のコマンドを実行して、運用環境用のスクリプトを小さくしてバンドルします。In a local terminal window, run the following command to minify and bundle scripts for the production environment. このプロセスにより、運用環境に必要なファイルが生成されます。This process generates the files needed by the production environment.

gulp prod

ローカル ターミナル ウィンドウで次のコマンドを実行して、config/env/local-production.js で構成した接続文字列を使用します。In a local terminal window, run the following command to use the connection string you configured in config/env/local-production.js. 証明書エラーと config.domain の警告は無視します。Ignore the certificate error and the config.domain warning.

# Bash
NODE_ENV=production node server.js

# Windows PowerShell
$env:NODE_ENV = "production" 
node server.js

NODE_ENV=production により、運用環境で実行するよう Node.js に指示する環境変数を設定します。NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js により、リポジトリのルートにある server.js を使用して Node.js サーバーを起動します。node server.js starts the Node.js server with server.js in your repository root. このようにして、Node.js アプリケーションを Azure に読み込みます。This is how your Node.js application is loaded in Azure.

アプリが読み込まれたら、運用環境で実行されていることを確認します。When the app is loaded, check to make sure that it's running in the production environment:

--
MEAN.JSMEAN.JS

Environment:     production Server:        http://0.0.0.0:8443 Database:        mongodb://< cosmosdb-name>:< primary-master-key>@< cosmosdb-name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false App version:   0.5.0 MEAN.JS version:0.5.0Environment:     production Server:          http://0.0.0.0:8443 Database:        mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false App version:     0.5.0 MEAN.JS version: 0.5.0

ブラウザーで http://localhost:8443 にアクセスします。Navigate to http://localhost:8443 in a browser. 上部のメニューの [サインアップ] をクリックし、テスト ユーザーを作成します。Click Sign Up in the top menu and create a test user. ユーザーの作成とサインインに成功すると、アプリが Azure の Cosmos DB データベースにデータを書き込みます。If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

ターミナルで、Ctrl+C キーを押して Node.js を停止します。In the terminal, stop Node.js by typing Ctrl+C.

アプリを Azure にデプロイするDeploy app to Azure

この手順では、MongoDB に接続している Node.js アプリケーションを Azure App Service にデプロイします。In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

デプロイ ユーザーを構成するConfigure a deployment user

FTP およびローカルの Git では、"デプロイ ユーザー" を使用して Azure Web アプリにデプロイできます。FTP and local Git can deploy to an Azure web app by using a deployment user. デプロイ ユーザーを構成すると、すべての Azure デプロイでこのユーザーを使用できます。Once you configure your deployment user, you can use it for all your Azure deployments. アカウントレベルのデプロイのユーザー名とパスワードは、Azure サブスクリプションの資格情報とは異なります。Your account-level deployment username and password are different from your Azure subscription credentials.

デプロイ ユーザーを構成するには、Azure Cloud Shell で az webapp deployment user set コマンドを実行します。To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. <username> と <password> を、デプロイ ユーザーのユーザー名とパスワードで置き換えます。Replace <username> and <password> with a deployment user username and password.

  • ユーザー名は、Azure 内で一意である必要があり、ローカル Git プッシュの場合は "@" シンボルを含めることはできません。The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
az webapp deployment user set --user-name <username> --password <password>

JSON 出力には、パスワードが null として表示されます。The JSON output shows the password as null. 'Conflict'. Details: 409 エラーが発生した場合は、ユーザー名を変更します。If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 エラーが発生した場合は、より強力なパスワードを使用します。If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Web アプリのデプロイに使用するユーザー名とパスワードを記録します。Record your username and password to use to deploy your web apps.

App Service プランを作成するCreate an App Service plan

Cloud Shell で az appservice plan create コマンドを使用して、App Service プランを作成します。In the Cloud Shell, create an App Service plan with the az appservice plan create command.

次の例では、Free 価格レベルの myAppServicePlan という名前の App Service プランを作成します。The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

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

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。When the App Service plan has been created, the Azure CLI shows information similar to the following example:

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

Cloud Shell で az appservice plan create コマンドを使用して、リソース グループに App Service プランを作成します。In the Cloud Shell, create an App Service plan in the resource group with the az appservice plan create command.

次の例では、myAppServicePlan という名前の App Service プランを、Free 価格レベル (--sku F1) で Linux コンテナー (--is-linux) に作成します。The following example creates an App Service plan named myAppServicePlan in the Free pricing tier (--sku F1) and in a Linux container (--is-linux).

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

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "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 アプリを作成するCreate a web app

myAppServicePlan App Service プランで Web アプリを作成します。Create a web app in the myAppServicePlan App Service plan.

Cloud Shell で、az webapp create コマンドを使用することができます。In the Cloud Shell, you can use the az webapp create command. 次の例では、<app-name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). ランタイムは NODE|6.9 に設定されています。The runtime is set to NODE|6.9. サポートされているすべてのランタイムを確認するには、az webapp list-runtimes を実行します。To see all supported runtimes, run az webapp list-runtimes.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような出力が表示されます。When the web app has been created, the Azure CLI shows output similar to the following example:

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 アプリが作成されました。You’ve created an empty web app, with git deployment enabled.

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git 形式で出力されます。The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. この URL は後で必要になるので保存しておいてください。Save this URL as you need it later.

myAppServicePlan App Service プランで Web アプリを作成します。Create a web app in the myAppServicePlan App Service plan.

Cloud Shell で、az webapp create コマンドを使用することができます。In the Cloud Shell, you can use the az webapp create command. 次の例では、<app-name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). ランタイムは NODE|6.9 に設定されています。The runtime is set to NODE|6.9. サポートされているすべてのランタイムを確認するには、az webapp list-runtimes --linux を実行します。To see all supported runtimes, run az webapp list-runtimes --linux.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような出力が表示されます。When the web app has been created, the Azure CLI shows output similar to the following example:

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 アプリが作成されました。You’ve created an empty web app, with git deployment enabled.

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git 形式で出力されます。The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. この URL は後で必要になるので保存しておいてください。Save this URL as you need it later.

環境変数の構成Configure an environment variable

既定では、MEAN.js プロジェクトは config/env/local-production.js を Git リポジトリ外で保持します。By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. したがって、Azure アプリでは、アプリ設定を使用して MongoDB 接続文字列を定義します。So for your Azure app, you use app settings to define your MongoDB connection string.

アプリ設定を設定するには、Cloud Shell で az webapp config appsettings set コマンドを使用します。To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

次の例では、Azure アプリの MONGODB_URI アプリ設定を構成します。The following example configures a MONGODB_URI app setting in your Azure app. <app-name><cosmosdb-name> 、および <primary-master-key> の各プレースホルダーを置き換えます。Replace the <app-name>, <cosmosdb-name>, and <primary-master-key> placeholders.

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI="mongodb://<cosmosdb-name>:<primary-master-key>@<cosmosdb-name>.documents.azure.com:10250/mean?ssl=true"

Node.js コードでは、任意の環境変数にアクセスする場合と同じように、process.env.MONGODB_URI を使用して、このアプリ設定にアクセスします。In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

ローカル MEAN.js リポジトリで、運用環境固有の構成を含む config/env/production.js を開きます (config/env/local-production.js ではありません)。In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. 既定の MEAN.js アプリは、作成した MONGODB_URI 環境変数を使用するように既に構成されています。The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

db: {
  uri: ... || process.env.MONGODB_URI || ...,
  ...
},

Git から Azure へのプッシュPush to Azure from Git

ローカル ターミナル ウィンドウで、ローカル Git リポジトリに Azure リモートを追加します。Back in the local terminal window, add an Azure remote to your local Git repository. <deploymentLocalGitUrl-from-create-step> を、「Web アプリを作成する」で保存した Git リモートの URL で置き換えます。Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

git remote add azure <deploymentLocalGitUrl-from-create-step>

アプリをデプロイするために、次のコマンドで Azure リモートにプッシュします。Push to the Azure remote to deploy your app with the following command. Git Credential Manager によって資格情報の入力を求めるメッセージが表示されたら、Azure portal へのサインインに使用する資格情報ではなく、「デプロイ ユーザーを構成する」で作成した資格情報を入力してください。When Git Credential Manager prompts you for credentials, make sure you enter the credentials you created in Configure a deployment user, not the credentials you use to sign in to the Azure portal.

git push azure master

このコマンドの実行には、数分かかる場合があります。This command may take a few minutes to run. 実行中、次の例のような情報が表示されます。While running, it displays information similar to the following example:

Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 489 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c7c716eee'.
remote: Running custom deployment command...
remote: Running deployment command...
remote: Handling node.js deployment.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      master -> master

デプロイ プロセスにより、npm install の後、Gulp が実行されます。You may notice that the deployment process runs Gulp after npm install. App Service では、デプロイ時に Gulp および Grunt タスクが実行されません。そのため、このサンプル リポジトリには、それを有効にする追加の 2 つのファイルがルート ディレクトリにあります。App Service does not run Gulp or Grunt tasks during deployment, so this sample repository has two additional files in its root directory to enable it:

  • .deployment - このファイルは、カスタム デプロイ スクリプトとして bash deploy.shを実行するよう App Service に指示します。.deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh- カスタム デプロイ スクリプト。deploy.sh - The custom deployment script. ファイルを確認すると、npm installbower install の後に gulp prod が実行されることがわかります。If you review the file, you will see that it runs gulp prod after npm install and bower install.

この方法を使用して、Git ベースのデプロイに任意の手順を追加できます。You can use this approach to add any step to your Git-based deployment. 任意の時点で Azure アプリを再起動しても、これらの自動タスクが App Service によって再び実行されることはありません。If you restart your Azure app at any point, App Service doesn't rerun these automation tasks. 詳細については、「Run Grunt/Bower/Gulp」(Grunt/Bower/Gulp を実行する) を参照してください。For more information, see Run Grunt/Bower/Gulp.

Azure アプリを参照するBrowse to the Azure app

Web ブラウザーを使用して、デプロイされたアプリを参照します。Browse to the deployed app using your web browser.

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

上部のメニューの [サインアップ] をクリックし、ダミー ユーザーを作成します。Click Sign Up in the top menu and create a dummy user.

操作が成功し、作成したユーザーにアプリが自動的にサインインすれば、Azure の MEAN.js アプリは MongoDB (Cosmos DB) データベースに接続しています。If you are successful and the app automatically signs in to the created user, then your MEAN.js app in Azure has connectivity to the MongoDB (Cosmos DB) database.

Azure App Service で実行されている MEAN.js アプリ

[管理者] > [Manage Articles](記事の管理) を選択して、いくつかの記事を追加します。Select Admin > Manage Articles to add some articles.

お疲れさまでした。Congratulations! データ主導型の Node.js アプリが Azure App Service で実行されています。You're running a data-driven Node.js app in Azure App Service.

データ モデルを更新し、再デプロイするUpdate data model and redeploy

この手順では、article データ モデルを変更し、変更内容を Azure に発行します。In this step, you change the article data model and publish your change to Azure.

データ モデルを更新するUpdate the data model

ローカル MEAN.js リポジトリで、"modules/articles/server/models/article.server.model.js" を開きます。In your local MEAN.js repository, open modules/articles/server/models/article.server.model.js.

ArticleSchemacomment という String 型を追加します。In ArticleSchema, add a String type called comment. 完了すると、スキーマ コードは次のようになります。When you're done, your schema code should look like this:

const ArticleSchema = new Schema({
  ...,
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  comment: {
    type: String,
    default: '',
    trim: true
  }
});

記事コードを更新するUpdate the articles code

comment を使用するように、articles コードの残りの部分を更新します。Update the rest of your articles code to use comment.

5 つのファイルを変更する必要があります (1 つのサーバー コントローラーと 4 つのクライアント ビュー)。There are five files you need to modify: the server controller and the four client views.

modules/articles/server/controllers/articles.server.controller.js を開きます。Open modules/articles/server/controllers/articles.server.controller.js.

update 関数に article.comment の割り当てを追加します。In the update function, add an assignment for article.comment. 完成した update 関数のコードを次に示します。The following code shows the completed update function:

exports.update = function (req, res) {
  let article = req.article;

  article.title = req.body.title;
  article.content = req.body.content;
  article.comment = req.body.comment;

  ...
};

modules/articles/client/views/view-article.client.view.html を開きます。Open modules/articles/client/views/view-article.client.view.html.

</section> 終了タグのすぐ上に、comment と残りの記事データを表示する次の行を追加します。Just above the closing </section> tag, add the following line to display comment along with the rest of the article data:

<p class="lead" ng-bind="vm.article.comment"></p>

modules/articles/client/views/list-articles.client.view.html を開きます。Open modules/articles/client/views/list-articles.client.view.html.

</a> 終了タグのすぐ上に、comment と残りの記事データを表示する次の行を追加します。Just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" ng-bind="article.comment"></p>

modules/articles/client/views/admin/list-articles.client.view.html を開きます。Open modules/articles/client/views/admin/list-articles.client.view.html.

<div class="list-group"> 要素内の </a> 終了タグのすぐ上に、comment と残りの記事データを表示する次の行を追加します。Inside the <div class="list-group"> element and just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" data-ng-bind="article.comment"></p>

modules/articles/client/views/admin/form-article.client.view.html を開きます。Open modules/articles/client/views/admin/form-article.client.view.html.

次のような送信ボタンを含む <div class="form-group"> 要素を探します。Find the <div class="form-group"> element that contains the submit button, which looks like this:

<div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>

このタグのすぐ上に、もう 1 つ <div class="form-group"> 要素を追加して、ユーザーが comment フィールドを編集できるようにします。Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. 新しい要素は次のようになります。Your new element should look like this:

<div class="form-group">
  <label class="control-label" for="comment">Comment</label>
  <textarea name="comment" data-ng-model="vm.article.comment" id="comment" class="form-control" cols="30" rows="10" placeholder="Comment"></textarea>
</div>

変更をローカルでテストするTest your changes locally

すべての変更を保存します。Save all your changes.

ローカル ターミナル ウィンドウで、変更を運用モードでもう一度テストします。In the local terminal window, test your changes in production mode again.

# Bash
gulp prod
NODE_ENV=production node server.js

# Windows PowerShell
gulp prod
$env:NODE_ENV = "production" 
node server.js

ブラウザーで http://localhost:8443 にアクセスし、サインインしていることを確認します。Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

[管理者] > [Manage Articles](記事の管理) を選択し、 + ボタンを選択して記事を追加します。Select Admin > Manage Articles, then add an article by selecting the + button.

新しい Comment テキスト ボックスが表示されます。You see the new Comment textbox now.

記事に追加されたコメント フィールド

ターミナルで、Ctrl+C キーを押して Node.js を停止します。In the terminal, stop Node.js by typing Ctrl+C.

Azure に変更を発行するPublish changes to Azure

ローカル ターミナル ウィンドウで、変更を Git にコミットし、コード変更を Azure にプッシュします。In the local terminal window, commit your changes in Git, then push the code changes to Azure.

git commit -am "added article comment"
git push azure master

git push が完了したら、Azure アプリに移動し、新機能を試します。Once the git push is complete, navigate to your Azure app and try out the new functionality.

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

以前に追加した記事は引き続き表示されます。If you added any articles earlier, you still can see them. Cosmos DB の既存のデータは失われません。Existing data in your Cosmos DB is not lost. また、データ スキーマは更新され、既存のデータはそのまま残ります。Also, your updates to the data schema and leaves your existing data intact.

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

Azure App Service で Node.js アプリケーションを実行している場合、コンソール ログをターミナルにパイプできます。While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. このようにすると、アプリケーション エラーのデバッグに役立つ同じ診断メッセージを取得できます。That way, you can get the same diagnostic messages to help you debug application errors.

ログのストリーミングを開始するには、Cloud Shell で az webapp log tail コマンドを使用します。To start log streaming, use the az webapp log tail command in the Cloud Shell.

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

ログのストリーミングが開始されたら、ブラウザーで Azure アプリを最新の情報に更新して、Web トラフィックを取得します。Once log streaming has started, refresh your Azure app in the browser to get some web traffic. ターミナルにパイプされたコンソール ログが表示されます。You now see console logs piped to your terminal.

Ctrl+C キーを押して、任意のタイミングでログのストリーミングを停止します。Stop log streaming at any time by typing Ctrl+C.

App Service のアプリケーション コード内から生成されたコンソール ログにアクセスするには、Cloud Shell で次のコマンドを実行して、診断ログを有効にします。To access the console logs generated from inside your application code in App Service, turn on diagnostics logging by running the following command in the Cloud Shell:

az webapp log config --resource-group <resource-group-name> --name <app-name> --application-logging true --level Verbose

--level で有効な値は、ErrorWarningInfo、および Verbose です。Possible values for --level are: Error, Warning, Info, and Verbose. 後続の各レベルには、前のレベルが含まれます。Each subsequent level includes the previous level. たとえば、Error にはエラー メッセージのみが含まれ、Verbose にはすべてのメッセージが含まれます。For example: Error includes only error messages, and Verbose includes all messages.

診断ログがオンになったら、次のコマンドを実行して、ログのストリームを確認します。Once diagnostic logging is turned on, run the following command to see the log stream:

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

コンソール ログがすぐに表示されない場合は、30 秒以内にもう一度確認します。If you don't see console logs immediately, check again in 30 seconds.

注意

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

任意のタイミングでログのストリーミングを停止するには、Ctrl+C と入力します。To stop log streaming at any time, type Ctrl+C.

Azure アプリを管理するManage your Azure app

Azure portal に移動し、お客様が作成したアプリを表示します。Go to the Azure portal to see the app you created.

左側のメニューで [App Services] をクリックしてから、お客様の Azure アプリの名前をクリックします。From the left menu, click App Services, then click the name of your Azure app.

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

既定では、ポータルにはアプリの [概要] ページが表示されます。By default, the portal shows your app's Overview page. このページでは、アプリの動作状態を見ることができます。This page gives you a view of how your app is doing. ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクも行うことができます。Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. ページの左側にあるタブは、開くことができるさまざまな構成ページを示しています。The tabs on the left side of the page show the different configuration pages you can open.

Azure Portal の [App Service] ページ

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

前の手順では、リソース グループ内に Azure リソースを作成しました。In the preceding steps, you created Azure resources in a resource group. これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

このコマンドの実行には、少し時間がかかる場合があります。This command may take a minute to run.

次のステップNext steps

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

  • Azure で MongoDB データベースを作成するCreate a MongoDB database in Azure
  • Node.js アプリを MongoDB に接続するConnect a Node.js app to MongoDB
  • Azure にアプリケーションをデプロイするDeploy the app to Azure
  • データ モデルを更新し、アプリを再デプロイするUpdate the data model and redeploy the app
  • Azure からターミナルにログをストリーミングするStream logs from Azure to your terminal
  • Azure Portal でアプリを管理するManage the app in the Azure portal

次のチュートリアルに進み、カスタム DNS 名をアプリにマップする方法を学習してください。Advance to the next tutorial to learn how to map a custom DNS name to the app.

または、他のリソースを参照してください。Or, check out other resources: