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 をインストールします。 node --version コマンドを実行して、Node.js がインストールされていることを確認します。
• Visual Studio Code をインストールします。
• Visual Studio Code 用の Azure App Service 拡張機能をインストールします。

• アクティブなサブスクリプションが含まれる Azure アカウントを用意します。 アカウントがない場合は、無料でアカウントを作成することができます。
• Node.js LTS をインストールします。 node --version コマンドを実行して、Node.js がインストールされていることを確認します。
• Azure CLI をインストールします。これを使用してシェルでコマンドを実行し、Azure リソースを作成および構成できます。

• アクティブなサブスクリプションが含まれる Azure アカウントを用意します。 アカウントがない場合は、無料でアカウントを作成することができます。
• Node.js LTS をインストールします。 node --version コマンドを実行して、Node.js がインストールされていることを確認します。
• ファイルを App Service に転送するための FTP クライアント ( FileZilla など) を作成します。

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

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

ヒント

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

1. express アプリケーション ジェネレーターを使用して Node.js アプリケーションを作成します。このジェネレーターは、Node.js と npm で既定でインストールされます。

   npx express-generator myExpressApp --view ejs
   

   ジェネレーターを初めてインストールする場合は、npx からインストールに同意するように求められます。

2. アプリケーションのディレクトリに変更し、npm パッケージをインストールします。

   cd myExpressApp && npm install
   

3. 依存関係を最も安全なバージョンに更新します。

   npm audit fix --force
   

4. デバッグ情報を使用して開発サーバーを起動します。

   DEBUG=myexpressapp:* npm start
   

5. ブラウザーで http://localhost:3000 にアクセスします。 次のような結果が表示されます。

   

問題が発生しました

Azure にデプロイする

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

注

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

Azure へのサインイン

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

   code .
   

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

3. Azure アカウントでサインインしていることを確認します。

問題が発生しました

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

Linux にデプロイする

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

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

3. [ランタイム スタックを選択してください] で、目的の Node.js バージョンを選択します。 ノード 24 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 の既定のページが表示されます。

Windows にデプロイする

1. [ リソース] で、使用するサブスクリプションで App Services を右クリックし、[ 新しい Web アプリの作成] を選択します。(詳細)。

2. アプリを提供する場所を選択します。 (例: "西ヨーロッパ")。

3. [ 一意の既定のホスト名をセキュリティで保護する] を選択します。

4. [新しいリソース グループの作成] を選択し、リソース グループの名前 (例: AppServiceQS-rg) を入力します。

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

6. 目的の Node.js バージョンを選択します。 ノード 24 LTS をお勧めします。

7. オペレーティング システムとして [Windows] を選択します。

8. [新しい App Service プランの作成] を選択し、プランの名前 (例: AppServiceQS-plan) を入力し、価格レベルとして [F1 Free] を選択します。

9. アプリの Application Insights リソースを選択するには、[今すぐスキップ] を選択します。 リソースが Azure に作成されるまで待ちます。

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

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

    注

    デプロイが完了すると、プロジェクト ルートに web.config ファイルがないため、Azure アプリはまだ実行されません。 残りの手順に従って自動的に生成します。 詳細については、「Node.js アプリを構成する」の「このディレクトリまたはページを表示するためのアクセス許可がありません」を参照してください。

11. Visual Studio Code の リソース で、新しいアプリのノードを展開し、[ アプリケーション設定] を右クリックし、[ 新しい設定の追加] を選択します。

    

12. 設定キーとして「SCM_DO_BUILD_DURING_DEPLOYMENT」と入力します。

13. 設定値として 「true」 と入力します。

    このアプリ設定により、デプロイ時にビルドの自動化が有効になります。これにより、開始スクリプトが自動的に検出され、 web.config ファイルが生成されます。

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

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

問題が発生しました

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

Linux にデプロイする

az webapp up --sku F1 --name <app-name>

Windows にデプロイする

az webapp up --sku F1 --name <app-name> --os-type Windows

• az コマンドが認識されない場合は、「初期環境を設定する」の説明に従って Azure CLI をインストールしたことを確認してください。
• <app_name> を Azure 全体で一意の名前に置き換えます。 (有効な文字は、 a-z、 0-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 のデプロイの実行に関するメッセージが表示されます。 その後、アプリの URL (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 <URL>
{
  "URL": "<URL>",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|24",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "/home/cephas/myExpressApp"
}

注

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

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

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

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

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

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

Azure リソースを作成する

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

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

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

   

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

   

5. [ 価格プラン] で、[ 新規作成 ] を選択して App Service プランを作成します。 名前に「myAppServicePlan」と入力します。 Free レベルに変更するには、価格プランの一覧で Free F1 を選択します。

   

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

   

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

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

   

FTPS 資格情報を取得する

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

1. App Service アプリ ページで、サイドバー メニューの [デプロイ] の下にある [デプロイ センター] を選択し、[FTPS 資格情報] タブを選択します。

   

2. FTP クライアントを開き、 myExpressApp フォルダーに移動します。

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

   

4. FTP クライアントで [接続 ] を選択します。

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

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

   

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

更新の再デプロイ

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

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

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

   変更先

   <p>Welcome to Azure</p>
   

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

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

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

   az webapp up
   

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

3. デプロイが完了したら、Web ページを更新します。 Welcome to Express メッセージが Welcome to Azure に変更されたことがわかります。

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

3. デプロイが完了したら、Web ページを更新します。 Welcome to Express メッセージが Welcome to Azure に変更されたことがわかります。

ログのストリーミング

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

1. Visual Studio Code の リソース で、アプリ ノードを右クリックし、[ ストリーミング ログの開始] を選択します。

   

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 ファイルにキャッシュされたリソース グループ名が使用されます。

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

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

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

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

1. アプリの同じ 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 Code の Azure 拡張機能の [ グループ化 ] ボックスの一覧で、[ リソース グループ別にグループ化] を選択します。

2. リソース の一 覧で、サブスクリプションを展開し、先ほど作成したリソース グループを右クリックし、[ リソース グループの削除] を選択します。

   

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

問題が発生しました

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

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

az group delete --no-wait

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

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

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

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

   

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

   

関連コンテンツ

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

Azure に Node.js + MongoDB Web アプリをデプロイする

Node.js アプリを構成する

  カスタム ドメインとマネージド証明書を使用してアプリをセキュリティで保護する

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

• Azure Cosmos DB
• Azure 関数
• Docker 拡張機能パック
• Azure CLI ツール
• Azure Resource Manager ツール

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