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

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 アカウントをお持ちでない場合は、無料アカウントに今すぐサインアップしてください。200 ドルの Azure クレジットを使用してさまざまな組み合わせのサービスをお試しいただけます。If you don't have an Azure account, sign up today for a free account with $200 in Azure credits to try out any combination of services.

Node.js と npm (Node.js のパッケージ マネージャー) と共に Visual Studio Code がインストールされている必要があります。You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

また、Azure App Service 拡張機能もインストールする必要があります。これにより、Azure PaaS (サービスとしてのプラットフォーム) 上で Linux Web アプリを作成、管理、デプロイすることができます。You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

サインインSign in

拡張機能のインストール後、自分の Azure アカウントにログインします。Once the extension is installed, log into your Azure account. アクティビティ バーで Azure のロゴを選択し、Azure App Service エクスプローラーを表示します。In the Activity Bar, select on the Azure logo to show the AZURE APP SERVICE explorer. [サインイン: Azure] を選択して、指示に従います。Select Sign in to Azure... and follow the instructions.

Azure にサインイン


"サブスクリプション名 <サブスクリプション ID> が見つかりません" というエラーが表示された場合、原因としては、プロキシの内側にいるために、Azure API に到達できないことが考えられます。If you see the error "Cannot find subscription with name [subscription ID]", it might be because you're behind a proxy and unable to reach the Azure API. ご利用のターミナルで export を使用して、自分のプロキシ情報で HTTP_PROXYHTTPS_PROXY の環境変数を構成してください。Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

環境変数を設定しても問題が解決しない場合は、下の [問題が発生しました] ボタンを選択してお問い合わせください。If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

前提条件のチェックPrerequisite check

続行する前に、すべての前提条件がインストールされ、構成されていることを確認してください。Before you continue, ensure that you have all the prerequisites installed and configured.

VS Code では、ステータス バーに自分の Azure メール アドレスが、Azure App Service エクスプローラーに自分のサブスクリプションが表示されます。In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Node.js アプリケーションの作成Create your Node.js application

次に、クラウドにデプロイできる Node.js アプリケーションを作成します。Next, create a Node.js application that can be deployed to the Cloud. このクイックスタートでは、アプリケーション ジェネレーターを使用して、アプリケーションをターミナルからすばやくスキャフォールディングします。This quickstart uses an application generator to quickly scaffold out the application from a terminal.


Node.js チュートリアルを既に完了している場合は、「Azure へのデプロイ」に進んでかまいません。If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Express ジェネレーターを使用した新しいアプリケーションのスキャフォールディングScaffold a new application with the Express Generator

Express は、Node.js アプリケーションの構築と実行に広く使われているフレームワークです。Express is a popular framework for building and running Node.js applications. Express ジェネレーター ツールを使用して新しい Express アプリケーションをスキャフォールディング (作成) できます。You can scaffold (create) a new Express application using the Express Generator tool. Express ジェネレーターは npm モジュールとして提供されており、npm コマンドライン ツール (npx) を使用して直接 (インストールなしで) 実行できます。The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

--view pug --git は、pug テンプレート エンジン (旧称 jade) を使用すること、また .gitignore ファイルを作成することをジェネレーターに伝えるパラメーターです。The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

アプリケーションの依存関係をすべてインストールするために、新しいフォルダーに移動して npm install を実行します。To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

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

次に、アプリケーションが動作することを確認します。Next, ensure that the application runs. ターミナルから npm start コマンドを使用してアプリケーションを起動し、サーバーを起動します。From the terminal, start the application using the npm start command to start the server.

npm start

今度は、ブラウザーを開いて http://localhost:3000 に移動します。そこで、このような画面が表示されるはずです。Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Express アプリケーションの実行

Deploy to Azure (Azure へのデプロイ)Deploy to Azure

このセクションでは、VS Code と Azure App Service 拡張機能を使用して自分の Node.js アプリをデプロイします。In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. このクイックスタートで使用するのは最も基本的なデプロイ モデルであり、自分のアプリは zip 圧縮されて、Linux 上の Azure Web アプリにデプロイされます。This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Azure App Service を使用したデプロイDeploy using Azure App Service

まず、VS Code で自分のアプリケーション フォルダーを開きます。First, open your application folder in VS Code.

code .

Azure App Service エクスプローラーで青色の上矢印アイコンを選択して、自分のアプリを Azure にデプロイします。In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Web アプリへのデプロイ


コマンド パレット (Ctrl + Shift + P) からデプロイすることもできます。「deploy to web app」と入力し、Azure App Service: Deploy to Web App コマンドを実行します。You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. 現在開いているディレクトリ (myExpressApp) を選択します。Choose the directory that you currently have open, myExpressApp.

  2. デプロイ先のオペレーティング システムに基づいて、作成オプションを選択します。Choose a creation option based on the operating system to which you want to deploy:

    • Linux: [Create new Web App](新しい Web アプリを作成する) を選択します。Linux: Choose Create new Web App.
    • Windows: [Create new Web App](新しい Web アプリを作成する) を選択し、 [詳細設定] オプションを選択します。Windows: Choose Create new Web App and select the Advanced option.
  3. 自分の Web アプリ用にグローバルに一意な名前を入力し、Enter キーを押します。Type a globally unique name for your Web App and press ENTER. アプリ名に使用できる有効な文字は "a-z"、"0-9"、"-" です。Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Linux を対象とする場合は、メッセージが表示されたら Node.js バージョンを選択します。If targeting Linux, select a Node.js version when prompted. LTS バージョンが推奨されます。An LTS version is recommended.

  5. [詳細設定] オプションを使用して Windows を対象とする場合は、追加のプロンプトに従います。If targeting Windows using the Advanced option, follow the additional prompts:

    1. [Create a new resource group](新しいリソース グループの作成) を選択し、リソース グループの名前を入力します。Select Create a new resource group, then enter a name for the resource group.
    2. オペレーティング システムとして [Windows] を選択します。Select Windows for the operating system.
    3. 既存の App Service プランを選択するか、新しいプランを作成します。Select an existing App Service Plan or create a new one. 新しいプランを作成するときに価格レベルを選択できます。You can select a pricing tier when creating a new plan.
    4. Application Insights について確認するメッセージが表示されたら、 [後で確認する] を選択します。Choose Skip for now when prompted about Application Insights.
    5. 近くのリージョン、またはアクセスするリソースの近くのリージョンを選択します。Choose a region near you or near resources you wish to access.
  6. すべてのプロンプトに応答すると、自分のアプリ用に作成されている Azure リソースが通知チャネルに表示されます。After you respond to all the prompts, the notification channel shows the Azure resources that are being created for your app.

  7. ターゲット サーバーで npm install を実行するように構成を更新するよう求められたら、 [はい] を選択します。Select Yes when prompted to update your configuration to run npm install on the target server. その後、アプリがデプロイされます。Your app is then deployed.


  8. デプロイが開始されると、以後デプロイのターゲットが自動的に同じ App Service Web アプリとなるように自分のワークスペースを更新するよう求められます。When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. 自分の変更が適切なアプリにデプロイされるよう [はい] を選択してください。Choose Yes to ensure your changes are deployed to the correct app.



必ず、PORT 環境変数 (process.env.PORT) に指定されたポートで自分のアプリケーションがリッスンするようにしてください。Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

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

デプロイが完了したら、プロンプトで [Web サイトの参照] を選択して、新しくデプロイした Web アプリを表示します。Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.


"このディレクトリまたはページを表示するアクセス許可がありません" というエラーが表示された場合、おそらくアプリケーションが正常に起動できていません。If you see the error "You do not have permission to view this directory or page.", then the application probably failed to start correctly. 次のセクションに進んでログ出力を表示し、エラーを探して修正してください。Head to the next section and view the log output to find and fix the error. ご自身で解決できない場合は、以下の [問題が発生しました] ボタンを選択してお問い合わせください。If you aren't able to fix it, contact us by selecting the I ran into an issue button below. 喜んでお手伝いします。We're happy to help!

アプリの更新Update the app

同じプロセスを使用し、新しいアプリを作成する代わりに既存のものを選択することで、このアプリに対する変更をデプロイできます。You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

ログの表示Viewing Logs

このセクションでは、実行中の App Service アプリのログを表示 (または "tail") する方法について説明します。In this section, you learn how to view (or "tail") the logs from the running App Service app. アプリでの console.log の呼び出しはすべて、Visual Studio Code の出力ウィンドウに表示されます。Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Azure App Service エクスプローラーでアプリを探して右クリックし、 [ストリーミング ログの表示] を選択します。Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

確認を求められたら、ログを有効にしてアプリケーションを再起動します。When prompted, choose to enable logging and restart the application. アプリが再起動すると、ログ ストリームへの接続と共に VS Code の出力ウィンドウが開きます。Once the app is restarted, the VS Code output window opens with a connection to the log stream.

ストリーミング ログの表示


数秒後、ログストリーミング サービスに接続されていることを示すメッセージが表示されます。After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. 数回ページを更新して、さらにアクティビティを表示します。Refresh the page a few times to see more activity.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

次の手順Next steps

おめでとうございます。このクイックスタートを正常に完了できました。Congratulations, you've successfully completed this quickstart!

次は、他の Azure 拡張機能もチェックしてみましょう。Next, check out the other Azure extensions.

または、Node Pack for Azure 拡張機能パックをインストールして、これらすべてを入手しましょう。Or get them all by installing the Node Pack for Azure extension pack.