このクイック スタートでは、初めての Node.js (Express) Web アプリを作成して Azure App Service にデプロイする方法について説明します。 App Service では、Linux と Windows の両方でさまざまなバージョンの Node.js がサポートされます。
このクイックスタートのAzure CLIステップは有料Premium v3ティアを使用します。 Visual Studio Codeと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 へのデプロイ」に進むことができます。
express アプリケーション ジェネレーターを使用して Node.js アプリケーションを作成します。このジェネレーターは、Node.js と npm で既定でインストールされます。
npx express-generator myExpressApp --view ejsジェネレーターを初めてインストールする場合は、npx からインストールに同意するように求められます。
アプリケーションのディレクトリに変更し、npm パッケージをインストールします。
cd myExpressApp && npm install依存関係を最も安全なバージョンに更新します。
npm audit fix --forceデバッグ情報を使用して開発サーバーを起動します。
DEBUG=myexpressapp:* npm startブラウザーで
http://localhost:3000にアクセスします。 次のような結果が表示されます。
Azure にデプロイする
続行する前に、すべての前提条件がインストールされ、構成されていることを確認してください。
注
Node.js アプリケーションを Azure で実行するには、PORT 環境変数で提供されるポートをリッスンする必要があります。 生成された Express アプリでは、この環境変数はスタートアップ スクリプト bin/www で既に使用されています。 (process.env.PORT を検索します。)
Azure へのサインイン
ターミナルで、myExpressApp ディレクトリにいることを確認し、その後次のコマンドを使用して Visual Studio Code を開始します。
code .Visual Studio Code の アクティビティ バーで、Azure のロゴを選択します。
Azure アカウントでサインインしていることを確認します。
App Service アプリを構成してコードをデプロイする
App Services を右クリックし、[新しい Web アプリの作成] を選択します。 既定では、Linux コンテナーが使用されます。
ご自分の Web アプリ用にグローバルに一意な名前を入力し、Enter キーを押します。 名前は Azure 全体で一意である必要があり、英数字 (
A-Z、a-z、0-9) とハイフン (-) のみを使用する必要があります。[ランタイム スタックを選択してください] で、目的の Node.js バージョンを選択します。 ノード 24 LTS をお勧めします。
[価格レベルを選択してください] で、[Free (F1)] を選び、Azure でリソースが作成されるのを待ちます。
ポップアップ [Always deploy the workspace "myExpressApp" to <app-name>"]\(ワークスペース "myExpressApp" を常に app-name にデプロイする\)で、[はい] を選択します。 これにより、同じワークスペース内にいる限り、Visual Studio Code を使用すると毎回同じ App Service アプリにデプロイされるようになります。
Visual Studio Code では、Azure リソースを作成してコードをデプロイしている間、進捗状況通知が表示されます。
デプロイが完了したら、通知ポップアップで [Web サイトの参照 ] を選択します。 ブラウザーに Express の既定のページが表示されます。
![[新しい設定の追加] コマンドのスクリーンショット。](media/quickstart-nodejs/add-setting.png)
端末では、 myExpressApp ディレクトリにいることを確認してください。
<app-name>をグローバルに一意の名前に置き換え、リソースグループ、App Serviceプラン、アプリを作成します。 ソースアーカイブをデプロイする際に App Service が依存関係をインストールし、アプリをビルドするように SCM_DO_BUILD_DURING_DEPLOYMENT を設定してください。
az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true
-
azコマンドが認識されない場合は、「初期環境を設定する」の説明に従って Azure CLI をインストールしたことを確認してください。 -
<app-name>をAzure 全体で一意の名前に置き換えてください(有効な文字はa-z、0-9、-です)。 -
--sku P0v3引数は有料の Premium v3 料金レベルを選択します。eastusを希望する地域に置き換え、利用可能な地域をaz account list-locationsでリストアップしてください。 -
--is-linuxLinuxプランを選択します。 Windows プランの場合は、Windows タブに示されているように、これを省略してください。
myExpressApp 内のファイルの ZIP アーカイブを作成してください。親ディレクトリは含めないでください。 LinuxやmacOSでは、zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' から を実行してください。 Windows では、Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip から PowerShell で を実行します。 次にアーカイブを展開します:
az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
アプリを見るには https://<app-name>.azurewebsites.net に移動してください。
Azure リソースを作成する
Azure portal にサインインします。
Node.js アプリの作成を開始するには、https://portal.azure.com/#create/Microsoft.WebSite を参照します。
[基本] タブの [プロジェクトの詳細] で正しいサブスクリプションが選択されていることを確認した後、[新規作成] を選択してリソース グループを作成します。 名前として「myResourceGroup」と入力します。
![Azure サブスクリプションと Web アプリのリソース グループを選択する場所を示す [プロジェクトの詳細] セクションのスクリーンショット。](media/quickstart-nodejs/project-details.png)
[インスタンスの詳細]で、ご自分の Web アプリにグローバルに一意の名前を入力し、[コード]を選択します。 ランタイム スタック内のノード 24 LTS、オペレーティング システム、アプリを提供するリージョンを選択します。
![[インスタンスの詳細] セクションのスクリーンショット。](media/quickstart-nodejs/instance-details.png)
[ 価格プラン] で、[ 新規作成 ] を選択して App Service プランを作成します。 名前に「myAppServicePlan」と入力します。 Free レベルに変更するには、価格プランの一覧で Free F1 を選択します。
![[App Service プラン] セクションのスクリーンショット。](media/quickstart-nodejs/app-service-plan-details.png)
ページの下部にある [確認 + 作成] ボタンを選択します。
![ページの下部にある [確認と作成] ボタンを示すスクリーンショット](media/quickstart-nodejs/review-create.png)
検証の実行後、ページの下部にある [作成] ボタンを選択します。
デプロイが完了したら、[リソースに移動] を選択します。
![[リソースに移動] ボタンを示すスクリーンショット。](media/quickstart-nodejs/next-steps.png)
FTPS 資格情報を取得する
Azure App Service では、FTP/S のデプロイに 2 種類の資格情報がサポートされています。 これらの資格情報は Azure サブスクリプションの資格情報とは異なります。 このセクションでは、FTP クライアントで使用するアプリケーション スコープの資格情報を取得します。
App Service アプリ ページで、サイドバー メニューの [デプロイ] の下にある [デプロイ センター] を選択し、[FTPS 資格情報] タブを選択します。
FTP クライアントを開き、 myExpressApp フォルダーに移動します。
[ FTPS 資格情報 ] タブから、 FTPS エンドポイント、 ユーザー名、 パスワード を FTP クライアントにコピーします。
FTP クライアントで [接続 ] を選択します。
FTPS を使用してファイルをデプロイする
すべてのファイルとディレクトリ ファイルを Azure の /site/wwwroot directory ディレクトリにコピーします。
アプリの URL を参照して、アプリが正しく動作していることを確認します。
更新の再デプロイ
このアプリに変更をデプロイするには、Visual Studio Code で編集を行い、ファイルを保存してから、Azure アプリに再デプロイします。 次に例を示します。
サンプル プロジェクトから views/index.ejs を開き、次のように変更します
<p>Welcome to <%= title %></p>変更先
<p>Welcome to Azure</p>
App Service エクスプローラーで [Web アプリにデプロイ] アイコンを再度選択し、[デプロイ] を再度選択して確認します。
デプロイが完了するまで待ち、通知ポップアップで [Web サイトの参照] を選択します。
Welcome to ExpressメッセージがWelcome to Azureに変更されたことがわかります。
変更を保存し、Deploy to Azureで説明したようにアプリファイルから../app.zipを再作成し、再デプロイしてください:
az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip<app-name>をウェブアプリを作成したときに使った名前に置き換えてください。デプロイが完了したら、Web ページを更新します。
Welcome to ExpressメッセージがWelcome to Azureに変更されたことがわかります。
変更を保存し、FTP クライアントを使用してアプリを再デプロイします。
デプロイが完了したら、Web ページを更新します。
Welcome to ExpressメッセージがWelcome to Azureに変更されたことがわかります。
ログのストリーミング
Azure アプリからのログ出力 (console.log() の呼び出し) を Visual Studio Code の出力ウィンドウで直接ストリーミングできます。
Visual Studio Code の リソース で、アプリ ノードを右クリックし、[ ストリーミング ログの開始] を選択します。
![[ストリーミング ログの開始] オプションのスクリーンショット。](media/quickstart-nodejs/view-logs.png)
アプリの再起動を求められたら、[はい] を選びます。 アプリが再起動すると、ログ ストリームへの接続と共に Visual Studio Code の出力ウィンドウが開きます。
数秒後、ログストリーミング サービスに接続されていることを示すメッセージが出力ウィンドウに表示されます。 ブラウザーでページを更新することにより、より多くの出力アクティビティを生成できます。
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 コマンドを実行します。
- まずログを有効にしてください:Linuxでは
az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystemを実行し、Windowsではaz webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystemを実行します。
az webapp log tail --resource-group myResourceGroup --name <app-name>
<app-name> を、ウェブアプリを作成したときに使った名前に置き換えてください。
ブラウザーでアプリを最新の情報に更新して、コンソール ログを生成します。これには、アプリに対する HTTP 要求に関するメッセージが含まれています。 すぐに出力が表示されない場合は、30 秒後に再試行してください。
ログ ストリーミングを任意のタイミングで停止するには、ターミナルで Ctrl+C キーを押します。
アプリ、およびそれを実行するコンテナー内から生成されたコンソール ログに、アクセスすることができます。 Node.js アプリからのログ出力 (console.log() への呼び出し) は、Azure portal から直接ストリーミングできます。
アプリの同じ App Service ページで、サイドバー メニューを使用して [ 監視 ] セクションまでスクロールし、[ ログ ストリーム] を選択します。
数秒後、ログストリーミング サービスに接続されていることを示すメッセージが出力ウィンドウに表示されます。 ブラウザーでページを更新することにより、より多くの出力アクティビティを生成できます。
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 リソースを作成しました。 このクイックスタートの手順を実行すると、すべてのリソースがこのリソース グループに格納されます。 クリーンアップするには、リソース グループを削除する必要があります。
Visual Studio Code の Azure 拡張機能の [ グループ化 ] ボックスの一覧で、[ リソース グループ別にグループ化] を選択します。
リソース の一 覧で、サブスクリプションを展開し、先ほど作成したリソース グループを右クリックし、[ リソース グループの削除] を選択します。
メッセージが表示されたら、削除するリソース グループの名前を入力して、削除を確認します。 確認すると、リソース グループが削除され、完了すると 通知 が表示されます。
前のCLIステップでは、myResourceGroup に Azure リソースを作成しました。
今後これらのリソースが不要である場合は、次のコマンドを実行してリソース グループを削除します。
az group delete --name myResourceGroup --no-wait
--no-wait 引数を使用すると、操作が完了する前にコマンドから戻ることができます。
必要がなくなったら、リソース グループ、App Service、およびすべての関連リソースを削除できます。
![App Service の [概要] ページのリソース グループのスクリーンショット。](media/quickstart-nodejs/resource-group.png)
![[リソース グループの削除] のスクリーンショット。](media/quickstart-nodejs/delete-resource-group.png)
関連コンテンツ
おめでとうございます。このクイックスタートを正常に完了できました。
他の Azure 拡張機能もチェックしてみましょう。
または、Node Pack for Azure 拡張機能パックをインストールして、これらすべてを入手しましょう。