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).

    Web アプリへのデプロイ

  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.

    ログの有効化と再起動

  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.