Azure で Node.js Web アプリを作成するCreate a Node.js web app in Azure

注意

この記事では、Windows 上の App Service にアプリをデプロイします。This article deploys an app to App Service on Windows. Linux 上の App Service に展開するには、「Azure App Service on Linux での Node.js Web アプリの作成」をご覧ください。To deploy to App Service on Linux, see Create a Node.js web app in Azure App Service on Linux.

Azure App Service では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure App Service provides a highly scalable, self-patching web hosting service. このクイック スタートでは、Azure App Service に Node.js アプリをデプロイする方法を示します。This quickstart shows how to deploy a Node.js app to Azure App Service. Azure CLI を使用して Web アプリを作成し、ZipDeploy を使用してその Web アプリにサンプルの Node.js コードをデプロイします。You create the web app using the Azure CLI, and you use ZipDeploy to deploy the sample Node.js code to the web app.

Azure で実行されるサンプル アプリ

以下の手順は、Mac、Windows、または Linux コンピューターを使って実行できます。You can follow the steps here using a Mac, Windows, or Linux machine. 前提条件のインストールを終えてから、以降の手順を完了するまでに約 5 分かかります。Once the prerequisites are installed, it takes about five minutes to complete the steps.

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

前提条件Prerequisites

このクイック スタートを完了するには、以下が必要です。To complete this quickstart:

サンプルのダウンロードDownload the sample

https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip からサンプル Node.js プロジェクトをダウンロードし、ZIP アーカイブを抽出します。Download the sample Node.js project from https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip and extract the ZIP archive.

index.js を開き、次の行を見つけます。Open index.js and find the following line:

const port = process.env.PORT || 1337;

App Service はアプリケーションに process.env.PORT を挿入し、コードが変数を使用して、どのポートをリッスンするかを知るようにします。App Service injects process.env.PORT into your application, so the code uses the variable to know which port to listen.

ターミナル ウィンドウで、サンプルの Node.js プロジェクトのルート ディレクトリに移動します (index.js が含まれるディレクトリ)。In a terminal window, navigate to the root directory of the sample Node.js project (the directory that contains index.js).

アプリをローカルで実行するRun the app locally

アプリケーションをローカルで実行すると、アプリケーションを Azure にデプロイするとどう表示されるかを把握できます。Run the application locally so that you see how it should look when you deploy it to Azure. ターミナル ウィンドウを開き、npm start スクリプトを使用して、組み込みの Node.js HTTP サーバーを起動します。Open a terminal window and use the npm start script to launch the built in Node.js HTTP server.

npm start

Web ブラウザーを開き、http://localhost:1337 のサンプル アプリに移動します。Open a web browser, and navigate to the sample app at http://localhost:1337.

ページに表示されているサンプル アプリの Hello World メッセージが表示されます。You see the Hello World message from the sample app displayed in the page.

ローカルで実行されるサンプル アプリ

ターミナル ウィンドウで Ctrl + C キーを押して、Web サーバーを終了します。In your terminal window, press Ctrl+C to exit the web server.

注意

Azure App Service では、アプリは、iisnode を使用して IIS で実行されます。In Azure App Service, the app is run in IIS using iisnode. Iisnode でアプリを実行できるようにするために、アプリのルート ディレクトリに web.config ファイルが含まれています。To enable the app to run with iisnode, the root app directory contains a web.config file. このファイルが IIS によって読み取られます。iisnode 関連の設定については、iisnode GitHub リポジトリを参照してください。The file is readable by IIS, and the iisnode-related settings are documented in the iisnode GitHub repository.

プロジェクトの ZIP ファイルを作成するCreate a project ZIP file

まだサンプル プロジェクトのルート ディレクトリにいることを確認します (index.js が含まれるディレクトリ)。Make sure you're still in the root directory of the sample project (the directory that contains index.js). プロジェクト内のすべての ZIP アーカイブを作成します。Create a ZIP archive of everything in your project. 次のコマンドには、お使いの端末の既定のツールを使用します。The following command uses the default tool in your terminal:

# Bash
zip -r myAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

その後、この ZIP ファイルを Azure にアップロードし、App Service にデプロイします。Later, you upload this ZIP file to Azure and deploy it to App Service.

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 では、bashPowerShell のいずれかを使用して Azure サービスを操作できます。Cloud Shell lets you use either bash or PowerShell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を起動するには:To launch 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 top-right menu bar 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 を起動します。Launch 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 with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Enter キーを押して、コードを実行します。Press Enter to run the code.

リソース グループの作成Create a resource group

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。A resource group is a logical container into which Azure resources like 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 South Central US 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 "South Central US"

通常は、現在地付近の地域にリソース グループおよびリソースを作成します。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.

Azure App Service プランの作成Create an Azure 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": "South Central US",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "South Central US",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Web アプリを作成するCreate a web app

Cloud Shell で az webapp create コマンドを使用して、myAppServicePlan App Service プランに Web アプリを作成します。In the Cloud Shell, create a web app in the myAppServicePlan App Service plan with 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 -).

# Bash and Powershell
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name>

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

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  < JSON data removed for brevity. >
}

Node.js ランタイムを設定するSet Node.js runtime

Node ランタイムを 10.14.1 に設定します。Set the Node runtime to 10.14.1. サポートされているすべてのランタイムを確認するには、az webapp list-runtimes を実行します。To see all supported runtimes, run az webapp list-runtimes.

# Bash and Powershell
az webapp config appsettings set --resource-group myResourceGroup --name <app_name> --settings WEBSITE_NODE_DEFAULT_VERSION=10.14.1

新しく作成された Web アプリに移動します。Browse to your newly created web app. <app_name> を一意のアプリ名に置き換えます。Replace <app_name> with a unique app name.

http://<app_name>.azurewebsites.net

新しい Web アプリは次のようになります。Here is what your new web app should look like:

空の Web アプリ ページ

ZIP ファイルのデプロイDeploy ZIP file

ブラウザーで https://<app_name>.scm.azurewebsites.net/ZipDeployUI にアクセスします。In the browser, navigate to https://<app_name>.scm.azurewebsites.net/ZipDeployUI.

プロジェクトの ZIP ファイルを作成する」で作成した ZIP ファイルを、Web ページ上のエクスプローラー領域にドラッグしてアップロードします。Upload the ZIP file you created in Create a project ZIP file by dragging it to the file explorer area on the web page.

デプロイの進行中、右上隅のアイコンにその進行状況がパーセンテージで表示されます。When deployment is in progress, an icon in the top right corner shows you the progress in percentage. また、ページのエクスプローラー領域の下に、操作に関する詳細なメッセージも表示されます。The page also shows verbose messages for the operation below the explorer area. 完了すると、最後のデプロイ メッセージに "Deployment successful" と表示されます。When it is finished, the last deployment message should say Deployment successful.

アプリの参照Browse to the app

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

http://<app_name>.azurewebsites.net

Node.js のサンプル コードは、Azure App Service の Web アプリで実行されています。The Node.js sample code is running in an Azure App Service web app.

Azure で実行されるサンプル アプリ

お疲れさまでした。Congratulations! App Service に初めての Node.js アプリをデプロイしました。You've deployed your first Node.js app to App Service.

コードを更新して再デプロイするUpdate and redeploy the code

テキスト エディターを使用して、Node.js アプリ内の index.js ファイルを開き、response.end の呼び出し内のテキストを少し変更します。Using a text editor, open the index.js file in the Node.js app, and make a small change to the text in the call to response.end:

response.end("Hello Azure!");

ローカルのターミナル ウィンドウで、アプリケーションのルート ディレクトリ (index.js が含まれるディレクトリ) に移動し、更新されたプロジェクトの新しい ZIP ファイルを作成します。In the local terminal window, navigate to your application's root directory (the directory that contains index.js), create a new ZIP file for your updated project.

# Bash
zip -r myUpdatedAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myUpdatedAppFiles.zip

ZIP ファイルのデプロイ」と同じ手順を使用して、この新しい ZIP ファイルを App Service にデプロイします。Deploy this new ZIP file to App Service, using the same steps in Deploy ZIP file.

アプリの参照」の手順で開いたブラウザー ウィンドウに戻り、ページを更新します。Switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Azure で実行される更新済みのサンプル アプリ

新しい Azure アプリの管理Manage your new Azure app

Azure Portal に移動し、作成した Web アプリを管理します。Go to the Azure portal to manage the web app you created.

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

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

Web アプリの [概要] ページを確認します。You see your web app's Overview page. ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクを行うことができます。Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Azure Portal の [App Service] ページ

左側のメニューは、アプリを構成するためのさまざまなページを示しています。The left menu provides different pages for configuring your app.

リソースのクリーンアップ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