チュートリアル: Azure Pipelines を使用して Node.js のデプロイを自動化する

このチュートリアルでは、Node.js アプリを Azure App Service にデプロイする Azure DevOps パイプラインを構築することで、Azure と Azure DevOps がどのように Node.js アプリケーションをサポートしているかについて説明します。 Azure Pipelines を使用すると、Node.js アプリを自動的にデプロイし、継続的インテグレーションと継続的デリバリーを使用してエラーやダウンタイムのリスクを軽減できるようになります。

このチュートリアルでは、以下の内容を学習します。

• GitHub でサンプル アプリケーションをフォークする
• Azure App Service リソースを作成する
• Azure Pipelines Node.js Express Web App to Linux on Azure Azure DevOps テンプレートを選択する
• 基本的な Node.js アプリケーションを Azure App Service にデプロイする

前提条件

製品	要件
Azure DevOps	- Azure DevOps プロジェクト。 - Microsoft がホストするエージェントでパイプラインを実行する機能。 並列ジョブを購入するか、Free レベルを要求できます。 - YAML と Azure Pipelines に関する基本的な知識。 詳細については、「最初のパイプラインの作成」を参照してください。 - アクセス許可:      - パイプラインを作成するには、 共同作成者 グループに含まれている必要があり、グループには [ ビルド パイプラインの作成 ] アクセス許可が [許可] に設定されている必要があります。 プロジェクト管理者グループのメンバーは、パイプラインを管理できます。     - サービス接続を作成するには、サービス接続の管理者ロールまたは作成者ロールが必要です。
GitHubの	- GitHub アカウント。 - Azure Pipelines を承認するための GitHub サービス接続 。
紺碧	Azure サブスクリプション。

サンプル アプリケーションをフォークする

サンプル アプリケーションをフォークするには、GitHub にサインインし、サンプル リポジトリに移動して、フォークを作成する必要があります。

1. GitHub に移動し、サインインします。

2. Node.js サンプル プロジェクトに移動します。

3. [Fork] を選択します。

   

4. [フォークの作成] を選んで、リポジトリ内にフォークを作成します。

   

5. ブラウザーで URL パスを確認して、GitHub アカウントにリポジトリのバージョンがあることを確認します。 URL は https://github.com/{GitHub User}/nodejs-docs-hello-world となっている必要があります。

Azure App Service リソースを作成する

Azure CLI を使用して、App Service インスタンスのデプロイと実行に必要なリソースを追加します。 Azure Cloud Shell から Azure CLI にアクセスします。

1. Azure Portal にアクセスしてサインインします。

2. メニューから [Cloud Shell] を選択します。 プロンプトが表示されたら、[Bash] エクスペリエンスを選択します。

   

   注

   Cloud Shell では、Cloud Shell で作成するすべてのファイルを保持する Azure ストレージ リソースが必要です。 ユーザーが Cloud Shell を初めて開くとき、リソース グループ、ストレージ アカウント、Azure Files 共有の作成を求められます。 この設定は、以降のすべての Cloud Shell セッションで自動的に使用されます。

3. Cloud Shell から次の az account list-locations コマンドを実行して、お使いの Azure サブスクリプションで使用可能なリージョンの一覧を表示します。

   az account list-locations \
     --query "[].{Name: name, DisplayName: displayName}" \
     --output table
   

4. 出力の Name 列から、最寄りのリージョンを選択します。 たとえば、eastasia または westus2 を選択します。

5. az configure を実行して既定のリージョンを設定します。 <REGION> を、任意のリージョン名に置き換えます。 この例では、既定のリージョンとして westus2 を設定します。

   az configure --defaults location=westus2
   

6. リソース名を一意にするための乱数を生成します。 一意の値を持つ利点は、App Service インスタンスに、このチュートリアルを実行している他の学習者との名前の競合が発生しなくなることです。

   resourceSuffix=$RANDOM
   

7. App Service Web アプリ、リソース グループ、App Service プランに対してグローバルで一意の名前を作成します。

   webName="helloworld-nodejs-${resourceSuffix}"
   rgName='hello-world-nodejs-rg'
   planName='helloworld-nodejs-plan'
   

8. 次の az group create コマンドを実行し、先ほど定義した名前を使ってリソース グループを作成します。

   az group create --name $rgName
   

9. 次の az appservice plan create コマンドを実行し、先ほど定義した名前を使って App Service プランを作成します。

   az appservice plan create \
     --name $planName \
     --resource-group $rgName \
     --sku B1 \
     --is-linux
   

   --sku 引数では、B1 プランを指定しています。 このプランは、Basic サービス レベルで実行されます。 --is-linux 引数では、Linux ワーカーを使用するよう指定しています。

   重要

   ご自分の Azure サブスクリプションで B1 SKU を使用できない場合、S1 (Standard) などの別のプランを選択します。

10. 次の az webapp create コマンドを実行して、App Service インスタンスを作成します。

    az webapp create \
      --name $webName \
      --resource-group $rgName \
      --plan $planName \
      --runtime "node|16-lts"
    

11. 次の az webapp list コマンドを実行して、App Service インスタンスのホスト名と状態を一覧表示します。

    az webapp list \
      --resource-group $rgName \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

テンプレートからパイプラインを作成する

このプロセスは、azure-pipelines.yml という名前のパイプライン構成ファイルを生成します。これは、Git リポジトリのルート ディレクトリ内に配置されます。

1. dev.azure.com でアカウントにサインインします。

2. [+ New project] を選択します。

   [Create new project] ダイアログ ボックスが開きます。

3. 次のオプションを使用して、新しいプロジェクトを作成します。

   フィールド	説明
   プロジェクト名	nodejs-hello-world などの名前を入力します。
   可視性	プロジェクトを公開するか非公開にするかを選択します。
   [詳細設定]>[バージョン管理]	[Git] を選択します。

4. nodejs-hello-world プロジェクトに移動します。

5. [パイプライン] に移動し、[パイプラインの作成] を選びます。

6. 最初に、ソース コードの場所として GitHub を選択し、ウィザードの手順を完了します。

7. サインインするために GitHub にリダイレクトされる場合があります。 その場合は、GitHub の資格情報を入力します。

8. リポジトリの一覧が表示されたら、目的のリポジトリを選択します。

9. Azure Pipelines アプリをインストールするために、GitHub にリダイレクトされる場合があります。 その場合は、[承認してインストール] を選択します。

10. [選択] タブで、nodejs-docs-hello-world リポジトリを選択します。

11. [Configure] タブで、[Node.js Express Web App to Linux on Azure] を選択します。

    プロンプトが表示されたら、次を実行します。

    1. 前の手順でリソースを作成した Azure サブスクリプションを選択します。
    2. [続行] をクリックします。
    3. 先ほど作成したアプリ名を選択します (例: helloworld-nodejs-16353)。
    4. [Validate and configure]（検証および構成） を選択します。

12. [レビュー] タブで、パイプライン構成のコードをレビューします。

13. [保存] を選択して変更を保存します。

Node.js アプリを Azure App Service へデプロイする

パイプラインを実行すると、コードは Azure App Service にデプロイされます。 パイプラインは、変更が main 分岐にコミットされるたびに実行されるように構成されています。

1. パイプライン YAML に対してスペースの追加など、小さな重要でない変更を加えます。 再度 [保存および実行] を選択して、git の変更をコミットし、パイプラインの実行をトリガーします。

2. Azure DevOps で、[パイプライン]>[パイプライン] に移動し、パイプラインを選択します。

3. パイプラインの動作を監視して、そのビルドプロセスを追跡します。

4. ビルドが正常に完了したら、デプロイ タスクを選び、URL を選んで、デプロイされた Web サイトを表示します。

   

5. デプロイされた Web サイトの URL に移動し、App Service で実行されているサイトが表示されることを確認します。

   

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

このアプリケーションを引き続き使用しない場合は、次の手順に従って、Azure portal のリソース グループと Azure DevOps のプロジェクトを削除します。

リソース グループをクリーンアップするには、次のようにします。

1. Azure Portal にアクセスしてサインインします。

2. メニュー バーで、[Cloud Shell] を選択します。 プロンプトが表示されたら、[Bash] エクスペリエンスを選択します。

   

3. 次の az group delete コマンドを実行して、使ったリソース グループ hello-world-nodejs-rg を削除します。

   az group delete --name hello-world-nodejs-rg
   

ビルド パイプラインを含めて Azure DevOps プロジェクトを削除するには、「プロジェクトの削除」を参照してください 。

関連するコンテンツ

• JavaScript をカスタマイズする
• Azure Pipelines を使用して App Service にデプロイする