Azure で Node.js Web アプリをデプロイする

このクイックスタートでは、初めての Node.js (Express) Web アプリを作成し、Azure App Service にデプロイする方法について説明します。 App Service では、Linux と Windows の両方でさまざまなバージョンの Node.js がサポートされます。

このクイックスタートでは、Free レベルで App Service アプリを構成するため、Azure サブスクリプションのコストは発生しません。

このビデオでは、Azure に Node.js Web アプリをデプロイする方法について説明します。

ビデオの手順については、次のセクションでも説明します。

初期環境を設定する

  • アクティブなサブスクリプションが含まれる Azure アカウントを用意します。 無料でアカウントを作成できます
  • Node.js LTS と npm をインストールします。 node --version コマンドを実行して、Node.js がインストールされていることを確認します。
  • Azure CLI をインストールします。これを任意のシェルで使用してコマンドを実行し、Azure リソースの作成と構成を行います。
  • アクティブなサブスクリプションが含まれる Azure アカウントを用意します。 無料でアカウントを作成できます
  • Node.js LTS と npm をインストールします。 node --version コマンドを実行して、Node.js がインストールされていることを確認します。
  • ご自分のアプリに接続するには、FTP クライアント (FileZilla など) を用意します。

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

このステップでは、Node.js の基本アプリケーションを作成し、お使いのコンピューターで実行できることを確認します。

ヒント

Node.js チュートリアルを既に完了している場合は、「Azure へのデプロイ」に進んでかまいません。

  1. Node.js と NPM と共に既定でインストールされる Express Generator を使って、Node.js アプリケーションを作成します。

    npx express-generator myExpressApp --view ejs
    
  2. アプリケーションのディレクトリに変更し、NPM パッケージをインストールします。

    cd myExpressApp && npm install
    
  3. デバッグ情報を使用して開発サーバーを起動します。

    DEBUG=myexpressapp:* npm start
    
  4. ブラウザーで、http://localhost:3000 に移動します。 次のような結果が表示されます。

    Running Express Application

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

続行する前に、すべての前提条件がインストールされ、構成されていることを確認してください。

Note

Node.js アプリケーションを Azure で実行するには、PORT 環境変数で提供されるポートをリッスンする必要があります。 生成された Express アプリでは、この環境変数は、スタートアップ スクリプト bin/www (process.env.PORT を検索) で既に使用されています。

Azure へのサインイン

  1. ターミナルで、myExpressApp ディレクトリにいることを確認し、次のコマンドを使用して Visual Studio Code を開始します。

    code .
    
  2. Visual Studio Code の アクティビティ バーで、Azure のロゴを選択します。

  3. App Service エクスプローラーで、 [Azure にサインイン] を選択し、指示に従います。

    Visual Studio Code では、ステータス バーにお使いの Azure メール アドレスが表示され、Azure App Service エクスプローラーにお使いのサブスクリプションが表示されます。

    sign in to Azure

App Service アプリを構成するとコードをデプロイする

  1. myExpressApp フォルダーを選びます。
  1. App Services を右クリックし、[新しい Web アプリの作成] を選択します。 既定では、Linux コンテナーが使用されます。

  2. 自分の Web アプリ用にグローバルにユニークな名前を入力し、Enter キーを押します。 名前は Azure 全体で一意である必要があり、英数字 ("A-Z"、"a-z"、"0-9") およびハイフン ("-") のみを使用する必要があります。

  3. [ランタイム スタックを選択してください] で、目的の Node.js バージョンを選択します。 LTS バージョンが推奨されます。

  4. [価格レベルを選択してください] で、[Free (F1)] を選び、Azure でリソースが作成されるのを待ちます。

  5. ポップアップ [Always deploy the workspace "myExpressApp" to <app-name>"] (ワークスペース "myExpressApp" を常に app-name にデプロイする)で、[はい] を選択します。 これにより、同じワークスペース内にいる限り、Visual Studio Code では、毎回同じ App Service アプリにデプロイされます。

    Visual Studio Code では、Azure リソースを作成してコードをデプロイしている間、進捗状況通知が表示されます。

  6. デプロイが完了したら、通知ポップアップで [Web サイトの参照] を選択します。 ブラウザーに Express の既定のページが表示されます。

ターミナルで、myExpressApp ディレクトリにいることを確認し、az webapp up コマンドを使用して、ローカル フォルダー (myExpressApp) にコードをデプロイします。

az webapp up --sku F1 --name <app-name>
  • az コマンドが認識されない場合は、「初期環境を設定する」の説明に従って Azure CLI をインストールしたことを確認してください。
  • <app_name> を Azure 全体で一意の名前で置き換えます ("有効な文字は、a-z0-9、および - です")。 会社名とアプリ識別子を組み合わせて使用すると、適切なパターンになります。
  • --sku F1 引数を使用すると、コストが発生しない Free 価格レベルで Web アプリが作成されます。
  • 必要に応じて、引数 --location <location-name> を含めることができます。ここで、<location_name> は利用可能な Azure リージョンです。 az account list-locations コマンドを実行すると、お使いの Azure アカウントで使用可能なリージョンの一覧を取得できます。
  • このコマンドにより、既定で Node.js の Linux アプリが作成されます。 代わりに Windows アプリを作成するには、--os-type 引数を使用します。
  • "Could not auto-detect the runtime stack of your app" (アプリのランタイム スタックを自動検出できませんでした) というエラーが表示される場合は、myExpressApp ディレクトリでコマンドを実行していることを確認します (az webapp up の自動検出に関する問題のトラブルシューティングに関するページを参照してください)。

コマンドが完了するまでに数分かかる場合があります。 実行中、リソース グループ、App Service プラン、アプリ リソースの作成、ログの構成、ZIP のデプロイの実行に関するメッセージが表示されます。 次に、"http://<app-name>.azurewebsites.net でアプリを起動することができます" という内容のメッセージが表示されます。これは、Azure 上のアプリの URL です。

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

注意

az webapp up コマンドは、次の処理を実行します。

  • 既定のリソース グループを作成する。

  • 既定の App Service プランを作成する。

  • 指定された名前でアプリを作成する。

  • ビルド自動化を有効にして、現在の作業ディレクトリからすべてのファイルを ZIP デプロイします。

  • 後で az webapp up またはプロジェクト フォルダー内の他の az webapp コマンドを使用してデプロイするときに再指定する必要がないように、パラメーターを .azure/config ファイルにローカルにキャッシュします。 キャッシュされた値は、既定で自動的に使用されます。

Azure Portal にサインインする

Azure portal にサインインします。

Azure リソースを作成する

  1. Node.js アプリの作成を開始するには、https://portal.azure.com/#create/Microsoft.WebSite を参照します。

  2. [基本] タブの [プロジェクトの詳細] で、正しいサブスクリプションが選択されていることを確認した後、リソース グループの [新規作成] を選びます。 名前として「myResourceGroup」と入力します。

    Screenshot of the Project details section showing where you select the Azure subscription and the resource group for the web app

  3. [インスタンスの詳細]で、ご自分の Web アプリにグローバルに一意の名前を入力し、[コード]を選択します。 [ランタイム スタック]Node 18 LTS を選び、[オペレーティング システム] を選び、アプリを提供する [リージョン] を選びます。

    Screenshot of the Instance details section where you provide a name for the virtual machine and select its region, image and size

  4. [App Service プラン] で、App Service プランの [新規作成] を選びます。 名前に「myAppServicePlan」と入力します。 Free レベルに変更するには、[サイズの変更] を選び、[Dev/Test] タブを選んで、[F1] を選び、ページの下部にある [適用] ボタンを選びます。

    Screenshot of the Administrator account section where you provide the administrator username and password

  5. ページの下部にある [確認と作成] ボタンを選択します。

    Screenshot showing the Review and create button at the bottom of the page

  6. 検証の実行後、ページの下部にある [作成] ボタンを選択します。

  7. デプロイが完了したら、 [リソースに移動] を選択します。

    Screenshot showing the next step of going to the resource

FTPS 資格情報を取得する

Azure App Service では、FTP/S のデプロイに 2 種類の資格情報がサポートされています。 これらの資格情報は Azure サブスクリプションの資格情報とは異なります。 このセクションでは、FileZilla で使用する "アプリケーション スコープの資格情報" を取得します。

  1. App Service アプリのページで左側のメニューの [デプロイ センター] を選び、[FTPS 資格情報] タブを選びます。

    FTPS deployment credentials

  2. FileZilla を開き、新しいサイトを作成します。

  3. [FTPS credentials] (FTPS 資格情報) タブの [アプリケーション スコープ] から、[FTPS エンドポイント][FTPS Username] (FTPS ユーザー名)[パスワード] を FileZilla にコピーします。

    FTPS connection details

  4. FileZilla で [Connect](接続) を選びます。

FTPS を使用してファイルをデプロイする

  1. すべてのファイルとディレクトリ ファイルを Azure の/site/wwwroot ディレクトリにコピーします。

    FileZilla deploy files

  2. アプリの URL を参照して、アプリが正しく動作していることを確認します。

更新の再デプロイ

このアプリに変更をデプロイするには、Visual Studio Code で編集を行い、ファイルを保存し、Azure アプリに再デプロイします。 次に例を示します。

  1. サンプル プロジェクトから views/index.ejs を開き、次のように変更します

    <p>Welcome to <%= title %></p>
    

    to

    <p>Welcome to Azure</p>
    
  1. App Service エクスプローラーで [Web アプリにデプロイ] アイコンを再度選択し、 [デプロイ] を再度クリックして確認します。

  2. デプロイが完了するまで待ち、通知ポップアップで [Web サイトの参照] を選択します。 Welcome to Express メッセージが Welcome to Azure! に変更されたことがわかります。

  1. 変更を保存した後、Linux では引数を指定せずに az webapp up コマンドを再度使ってアプリを再デプロイします。 Windows の場合は、--os-type Windows を追加します。

    az webapp up
    

    このコマンドでは、 .azure/config ファイルにローカルでキャッシュされている値 (アプリ名、リソース グループ、App Service プランなど) を使用します。

  2. デプロイが完了したら、Web ページ http://<app-name>.azurewebsites.net を最新の情報に更新します。 Welcome to Express メッセージが Welcome to Azure! に変更されたことがわかります。

  1. 変更を保存し、FTP クライアントを使用してアプリを再デプロイします。

  2. デプロイが完了したら、Web ページ http://<app-name>.azurewebsites.net を最新の情報に更新します。 Welcome to Express メッセージが Welcome to Azure! に変更されたことがわかります。

ストリーム ログ

Azure アプリからのログ出力 (console.log() の呼び出し) を Visual Studio Code の出力ウィンドウで直接ストリーミングできます。

  1. App Service エクスプローラーで、アプリ ノードを右クリックし、[Start Streaming Logs](ログのストリーム配信を開始する) を選びます。

    Start Streaming Logs

  2. アプリの再起動を求められたら、[はい] を選びます。 アプリが再起動すると、ログ ストリームへの接続と共に Visual Studio Code の出力ウィンドウが開きます。

  3. 数秒後、ログストリーミング サービスに接続されていることを示すメッセージが出力ウィンドウに表示されます。 ブラウザーでページを更新することにより、より多くの出力アクティビティを生成できます。

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

アプリ、およびそれを実行するコンテナー内から生成されたコンソール ログに、アクセスすることができます。 ログには、console.log()の呼び出しによって生成された出力が含まれます。

ログをストリーミングするには、az webapp log tail コマンドを実行します。

az webapp log tail

このコマンドでは、 .azure/config ファイルにキャッシュされたリソース グループ名が使用されます。

また、az webapp up コマンドで --logs パラメーターを指定して、デプロイ時にログ ストリームを自動的に開くこともできます。

ブラウザーでアプリを最新の情報に更新して、コンソール ログを生成します。これには、アプリに対する HTTP 要求に関するメッセージが含まれています。 すぐに出力が表示されない場合は、30 秒後に再試行してください。

ログ ストリーミングを任意のタイミングで停止するには、ターミナルで Ctrl+C キーを押します。

アプリ、およびそれを実行するコンテナー内から生成されたコンソール ログに、アクセスすることができます。 Node.js アプリからのログ出力 (console.log() への呼び出し) は、Azure portal から直接ストリーミングできます。

  1. アプリの同じ [App Service] ページの左側のメニューで [監視] セクションまでスクロールし、[ログ ストリーム] を選びます。

    Screenshot of Log stream in Azure App service.

  2. 数秒後、ログストリーミング サービスに接続されていることを示すメッセージが出力ウィンドウに表示されます。 ブラウザーでページを更新することにより、より多くの出力アクティビティを生成できます。

     Connecting...
     2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
     Starting Log Tail -n 10 of existing logs ----
     /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
     2021-10-26T21:04:08.614384810Z: [INFO]
     2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
     2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
     2021-10-26T21:04:08.614403210Z: [INFO]
     2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
     2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
     2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
     2021-10-26T21:04:08.614419610Z: [INFO]  fi
     2021-10-26T21:04:08.614423411Z: [INFO]
     2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
     Ending Log Tail of existing logs ---
     

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

前の手順では、リソース グループ内に Azure リソースを作成しました。 このクイックスタートの作成手順では、すべてのリソースがこのリソース グループに格納されます。 クリーンアップするには、リソース グループを削除する必要があります。

  1. Visual Studio の Azure 拡張機能で、リソース グループ エクスプローラーを展開します。

  2. サブスクリプションを展開し、前に作成したリソース グループを右クリックして、 [削除] を選択します。

    Screenshot of the Visual Studio Code navigation to delete a resource that contains App Service resources.

  3. メッセージが表示されたら、削除するリソース グループの名前を入力して、削除を確認します。 確認すると、リソース グループが削除され、完了すると、通知が表示されます。

前の手順では、リソース グループ内に Azure リソースを作成しました。 リソース グループには、お客様の場所に応じて "appsvc_rg_Linux_CentralUS" のような名前が付いています。

今後これらのリソースが不要である場合は、次のコマンドを実行してリソース グループを削除します。

az group delete --no-wait

このコマンドでは、 azure/config ファイルにキャッシュされているリソース グループ名を使用します。

--no-wait 引数を使用すると、操作が完了する前にコマンドから戻ることができます。

必要がなくなったら、リソース グループ、App Service、およびすべての関連リソースを削除できます。

  1. App Service の[概要] ページで、「Azure リソースを作成する」ステップで作成した "リソース グループ" を選びします。

    Resource group in App Service overview page

  2. [リソース グループ] ページで、[リソース グループの削除] を選択します。 リソース グループの名前を確認してリソースの削除を終了します。

    Delete resource group

次のステップ

おめでとうございます。このクイックスタートを正常に完了できました。

他の Azure 拡張機能もチェックしてみましょう。

または、Node Pack for Azure 拡張機能パックをインストールして、これらすべてを入手しましょう。