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 がインストールされていることを確認します。
• ご自分のアプリに接続するには、FTP クライアント (FileZilla など) を用意します。

Azure へのサインイン

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

   code .
   

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

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

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

   

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

1. myExpressApp フォルダーを選びます。

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

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

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|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Azure portal にサインインする

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

Azure リソースを作成する

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

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

   

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

   

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

   

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

   

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

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

   

FTPS 資格情報を取得する

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

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

   

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

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

   

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

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

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

   

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

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. App Service エクスプローラーで、アプリ ノードを右クリックし、[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 ファイルにキャッシュされたリソース グループ名が使用されます。

また、--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 の Azure 拡張機能で、リソース グループ エクスプローラーを展開します。

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

   

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

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

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

az group delete --no-wait

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

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

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

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

   

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