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

Visual Studio Code を使用して Node.js または Express アプリをローカルに作成し、アプリをクラウドにデプロイすることによって、Azure App Service の使用を開始します。Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. App Service の Free レベルを使用するため、このクイックスタートを完了するのにコストはかかりません。Because you use a free App Service tier, you incur no costs to complete this quickstart.

前提条件Prerequisites

ローカル Node.js アプリケーションを複製して実行するClone and run a local Node.js application

  1. お使いのローカル コンピューターで、ターミナルを開き、サンプル リポジトリを複製します。On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. 新しいアプリ フォルダーに移動します。Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. アプリを起動してローカルでテストします。Start the app to test it locally:

    npm start
    
  4. ブラウザーを開き、http://localhost:1337 に移動します。Open your browser and navigate to http://localhost:1337. ブラウザーに "Hello World!" と表示されます。The browser should display "Hello World!".

  5. ターミナルで Ctrl + C キーを押してサーバーを停止します。Press Ctrl+C in the terminal to stop the server.

Azure にアプリケーションをデプロイするDeploy the app to Azure

このセクションでは、VS Code と Azure App Service 拡張機能を使用して自分の Node.js アプリを Azure にデプロイします。In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. ターミナルで、 nodejs-docs-hello-world フォルダーにいることを確認し、次のコマンドを使用して Visual Studio Code を起動します。In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. VS Code のアクティビティ バーで Azure のロゴを選択し、 Azure App Service エクスプローラーを表示します。In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. [サインイン: Azure] を選択して、指示に従います。Select Sign in to Azure... and follow the instructions. (エラーが発生した場合は、以下の「Azure サインインのトラブルシューティング」を参照してください)。サインインすると、エクスプローラーにご使用の Azure サブスクリプションの名前が表示されます。(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    Azure へのサインイン

  3. VS Code の Azure App Service エクスプローラーで青色の上矢印アイコンを選択して、自分のアプリを Azure にデプロイします。In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. ( コマンド パレット ( Ctrl + Shift + P キー) から同じコマンドを呼び出すこともできます。「Web アプリにデプロイ」と入力し、 [Azure App Service: Web アプリにデプロイ] を選択します)。(You can also invoke the same command from the Command Palette ( Ctrl+Shift+P ) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App ).

    選択されている青い矢印アイコンを示している、VS Code での Azure App Service のスクリーンショット。

  4. nodejs-docs-hello-world フォルダーを選択します。Choose the nodejs-docs-hello-world folder.

  5. デプロイ先のオペレーティング システムに基づいて、作成オプションを選択します。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... Advanced
  6. 自分の Web アプリ用にグローバルに一意な名前を入力し、 Enter キーを押します。Type a globally unique name for your web app and press Enter . 名前は Azure 全体で一意である必要があり、英数字 ("A-Z"、"a-z"、"0-9") およびハイフン ("-") のみを使用する必要があります。The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

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

  8. Windows を対象とする場合は、追加のプロンプトに従います。If targeting Windows, follow the additional prompts:

    1. [Create a new resource group](新しいリソース グループの作成) を選択し、リソース グループの名前を入力します (たとえば、AppServiceQS-rg)。Select Create a new resource group , then enter a name for the resource group, such as AppServiceQS-rg.
    2. オペレーティング システムとして [Windows] を選択します。Select Windows for the operating system.
    3. [新しい App Service プランの作成] を選択し、プランの名前 (たとえば、AppServiceQS-plan) を入力してから、価格レベルに [F1 Free] を選択します。Select Create new App Service plan , then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    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.
  9. すべてのプロンプトに応答すると、自分のアプリ用に作成される Azure リソースが VS Code の通知ポップアップに表示されます。After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    Linux へのデプロイ時にターゲット Linux サーバーで npm install を実行するように構成を更新するよう求められたら、 [はい] を選択します。When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    ターゲットの Linux サーバー上で構成を更新するように求めるメッセージ

  10. " Always deploy the workspace "nodejs-docs-hello-world" to (app name) (ワークスペース "nodejs-docs-hello-world" を常に (アプリ名) にデプロイ) " というメッセージが表示されたら、 [はい] を選択します。Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)" . [はい] を選択すると、後続のデプロイで同じ App Service Web アプリを自動的に対象とするように VS Code に指示されます。Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Linux へのデプロイでは、デプロイが完了したら、プロンプトで [Web サイトの参照] を選択して、新しくデプロイした Web アプリを表示します。If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. ブラウザーに "Hello World!" と表示されます。The browser should display "Hello World!"

  12. Windows にデプロイする場合は、最初に Web アプリの Node.js バージョン番号を設定する必要があります。If deploying to Windows, you must first set the Node.js version number for the web app:

    1. VS Code で、新しいアプリ サービスのノードを展開し、 [アプリケーション設定] を右クリックして、 [新しい設定の追加] を選択します。In VS Code, expand the node for the new app service, right-click Application Settings , and select Add New Setting... :

      アプリ設定の追加コマンド

    2. 設定キーとして「WEBSITE_NODE_DEFAULT_VERSION」と入力します。Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. 設定値として「10.15.2」と入力します。Enter 10.15.2 for the setting value.

    4. アプリ サービスのノードを右クリックし、 [再起動] を選択しますRight-click the node for the app service and select Restart

      アプリ サービスの再起動コマンド

    5. アプリ サービスのノードをもう一度右クリックし、 [Web サイトの参照] を選択します。Right-click the node for the app service once more and select Browse Website .

Azure サインインのトラブルシューティングTroubleshooting Azure sign-in

Azure にサインインするときに "Cannot find subscription with name [subscription ID] (サブスクリプション名 [サブスクリプション ID] が見つかりません)" というエラーが表示される場合、原因としては、プロキシの内側にいるために、Azure API に到達できないことが考えられます。If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, 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 above.

アプリの更新Update the app

このアプリに対する変更をデプロイするには、VS Code で編集を行い、ファイルを保存した後、同じプロセスを使用して新しいアプリを作成する代わりに既存のものを選択するだけです。You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

ログの表示Viewing Logs

アプリからのログ出力 (console.log への呼び出し) は、VS Code の出力ウィンドウで直接表示できます。You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. Azure App Service エクスプローラーで、アプリ ノードを右クリックし、 [Start Streaming Logs](ログのストリーム配信を開始する) を選択します。In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs .

    [Start Streaming Logs](ログのストリーム配信を開始する)

  2. 確認を求められたら、ログを有効にしてアプリケーションを再起動します。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.

    [はい] ボタンが選択されている、ログを有効にし、アプリケーションを再起動するための Visual Studio Code プロンプトのスクリーンショット。

  3. 数秒後、ログストリーミング サービスに接続されていることを示すメッセージが出力ウィンドウに表示されます。After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. ブラウザーでページを更新することにより、より多くの出力アクティビティを生成できます。You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

次のステップNext steps

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

他の Azure 拡張機能もチェックしてみましょう。Check out the other Azure extensions.

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

前提条件Prerequisites

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 the Azure logo to show the AZURE APP SERVICE explorer. [サインイン: Azure] を選択して、指示に従います。Select Sign in to Azure... and follow the instructions.

Azure にサインイン

トラブルシューティングTroubleshooting

"サブスクリプション名 <サブスクリプション 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.

デプロイの青い矢印が選択されている、Visual Studio Code の Azure App Service メニューのスクリーンショット。

ヒント

コマンド パレット (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. [Create new Web App](新しい Web アプリの作成) を選択します。既定のデプロイ先は App Service on Linux になります。Choose Create new Web App , which deploys to App Service on Linux by default.

  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. 該当する Node.js バージョン を選択します (LTS を推奨)。Choose your Node.js version , LTS is recommended.

    自分のアプリ用に作成されている Azure リソースが通知チャネルに表示されます。The notification channel shows the Azure resources that are being created for your app.

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

    [はい] ボタンが選択されている、ターゲット サーバー上の構成を更新するためのプロンプトのスクリーンショット。

  6. デプロイが開始されると、以後デプロイのターゲットが自動的に同じ 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.

トラブルシューティングTroubleshooting

"このディレクトリまたはページを表示するアクセス許可がありません" というエラーが表示された場合、おそらくアプリケーションが正常に起動できていません。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 .

ログ ストリームへの接続と共に VS Code の出力ウィンドウが開きます。The VS Code output window opens with a connection to the log stream.

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

[はい] ボタンが選択されている、ファイルのログを有効にし、Web アプリを再起動するための VS Code プロンプトのスクリーンショット。

数秒後、ログストリーミング サービスに接続されていることを示すメッセージが表示されます。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.