Azure で Node.js Web アプリを作成する

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

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

初期環境を設定する

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

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

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

ヒント

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

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

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

    cd myExpressApp
    npm install
    
  3. 開発サーバーを起動します。

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

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

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

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

注意

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 エクスプローラーにお使いのサブスクリプションが表示されます。

    Azure にサインイン

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

  1. App Service エクスプローラーで [Web アプリにデプロイ] アイコンを選択します。

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

  2. myExpressApp フォルダーを選択します。

  1. [Create new Web App](新しい 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 または他の Azure CLI コマンドを使用してデプロイするときに再指定する必要がないように、パラメーターを .azure/config ファイルにローカルにキャッシュします。 キャッシュされた値は、既定で自動的に使用されます。

Azure Portal にサインインする

Azure Portal ( https://portal.azure.com ) にサインインします。

Azure リソースを作成する

  1. 検索に「app services」と入力します。 [サービス] で、[App Services] を選択します。

    ポータルでの検索のスクリーンショット

  2. [App Services] ページで、[作成] を選択します。

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

    Azure サブスクリプションと Web アプリのリソース グループを選択する場所を示す [プロジェクトの詳細] セクションのスクリーンショット。

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

    [インスタンスの詳細] セクションのスクリーンショット。ここで、仮想マシンの名前を指定し、そのリージョン、イメージ、サイズを選択します。

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

    管理者のユーザー名とパスワードを入力する [管理者アカウント] セクションのスクリーンショット

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

    ページの下部にある [確認と作成] ボタンを示すスクリーンショット

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

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

    リソースに移動する、次のステップを示すスクリーンショット

FTP 資格情報を取得する

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

  1. App Service のアプリ ページで左側のメニューの [Deployment Center](デプロイ センター) をクリックし、[FTPS credentials](FTPS 資格情報) タブを選択します。

    FTPS デプロイ資格情報

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

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

    FTPS 接続の詳細

  4. FileZilla で [接続する] をクリックします。

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

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

    FileZilla のデプロイ ファイル

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

更新の再デプロイ

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

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

    p Welcome to #{title}
    

    to

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

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

  1. 変更を保存した後、引数を指定しないで az webapp up コマンドを再度使用してアプリを再デプロイします。

    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] ページで、左側のメニューを使用して [監視] セクションまでスクロールし、[ログ ストリーム] をクリックします。

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

    App Service リソースを含むリソースを削除するための Visual Studio Code ナビゲーションのスクリーンショット。

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

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

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

az group delete --no-wait

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

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

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

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

    App Service の [概要] ページのリソース グループ

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

    リソース グループの削除

次のステップ

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

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

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