パイプラインを構成し、更新をプッシュする

  • [アーティクル]

この記事では、Azure Developer CLI (azd) を使用して、GitHub アクションや Azure DevOps などの CI/CD パイプラインを介してテンプレートの変更をプッシュする方法について学びます。 この例では、Azure 上で Node.js API と MongoDB を使用した React Web アプリのテンプレートを使用しますが、この記事で学習した原則を任意の Azure Developer CLI テンプレートに適用できます。

Note

azd pipeline config コマンドはまだベータ版です。 アルファ版とベータ版の機能サポートの詳細については、「機能のバージョン管理とリリース戦略」を参照してください。

前提条件

すべての azd テンプレート には、「azure-dev.yml」と呼ばれる既定の GitHub アクションと Azure DevOps パイプライン構成ファイルが含まれています。これは、CI/CD をセットアップするために必要です。 この構成ファイルは、Azure リソースをプロビジョニングし、コードをメイン ブランチにデプロイします。 azure-dev.yml を見つけることができます。

  • GitHub アクションの場合: .github/workflow ディレクトリ内の。
  • Azure DevOps の場合: .azdo/pipelines ディレクトリ内の。

CI/CD パイプラインを構成するには、azd pipeline config コマンドを使用します。これは次のタスクを処理します。

  • Azure サブスクリプション上のアプリのサービス プリンシパルを作成して構成します。
  • GitHub リポジトリを作成して構成し、それにプロジェクト コードをコミットするワークフローの手順を説明します。 既存の GitHub リポジトリを使用することもできます。
  • GitHub シークレットを使用して、Azure とリポジトリの間にセキュリティで保護された接続を作成します。
  • ワークフロー ファイルにチェックするときに、GitHub アクションを実行します。

このプロセスをより細かく制御するために、パイプラインを手動で構成することもできます。

どのテンプレートにも、「azure-dev.yml」と呼ばれる既定の GitHub アクションと Azure DevOps パイプライン構成ファイルが含まれています。 この構成ファイルは、Azure リソースをプロビジョニングし、コードをメイン ブランチにデプロイします。 azure-dev.yml を見つけることができます。

  • GitHub アクションの場合: .github/workflow ディレクトリ内の。
  • Azure DevOps の場合: .azdo/pipelines ディレクトリ内の。

構成ファイルをそのまま使用することも、ニーズに合わせて変更することもできます。

続行するには、任意のパイプライン プロバイダーを選択します。

Azure にデプロイするための GitHub を承認する

ワークフローを構成するには、ユーザーに代わって Azure にデプロイするためのアクセス許可を GitHub に付与する必要があります。 AZURE_CREDENTIALS という名前の GitHub シークレットに格納される Azure サービス プリンシパルを作成して、GitHub を承認します。

  1. 次のコマンドを実行して、Azure サービス プリンシパルを作成し、パイプラインを構成します。

    azd pipeline config

    また、このコマンドはプライベート GitHub リポジトリを作成し、コードを新しいリポジトリにプッシュします。

    Note

    既定では、azd pipeline config は OpenID接続 (OIDC) を使用します。これは「フェデレーション資格情報」と呼ばれます。 あえて OIDC を使用したくない場合は、azd pipeline config --auth-type client-credentials を実行します。

    OIDC/フェデレーション資格情報は、Terraform ではサポートされていません。

    azd での OIDC サポートの詳細を学びます。

  2. 要求された GitHub 情報を指定します。

  3. ローカルの変更をコミットしてプッシュし、新しい GitHub アクションの実行を開始するかどうかについてプロンプトが表示されたら、y を指定します。

  4. ターミナル ウィンドウで、azd pipeline config コマンドの結果を表示します。 この azd pipeline config コマンドにより、プロジェクトの GitHub リポジトリ名が出力されます。

  5. ブラウザーを使用して、プロジェクトの GitHub リポジトリを開きます。

  6. [アクション] を選択して、ワークフローが実行されているのを確認します。

    GitHub ワークフロー実行中のスクリーンショット。

コード変更を行ってプッシュする

  1. プロジェクトの /src/web/src/layout ディレクトリで、header.tsx を開きます。

  2. <Text variant="xLarge">ToDo</Text> の行を見つけます。

  3. リテラル ToDo を myTodo に変更します 。

  4. ファイルを保存します。

  5. 変更を [コミット] します。 変更をコミットすると、GitHub Action パイプラインが開始され、更新プログラムがデプロイされます。

    テストファイルへの変更を行ってコミットするために必要な手順のスクリーンショット。

  6. ブラウザーを使用して、プロジェクトの GitHub リポジトリを開き、以下の両方を表示します。

    • あなたのコミット
    • セットアップ中の GitHub アクションからのコミット。

    GitHubにコミットした変更のスクリーンショット。

  7. [アクション] を選択すると、テストの更新がワークフローに反映されます。

    テストの更新後の GitHub ワークフロー実行中のスクリーンショット。

  8. Web フロントエンド URL にアクセスして、更新プログラムを検査します。

GitHub アクションとしての azd

azd を GitHub アクションとして追加します。 このアクションにより、azd がインストールされます。 それを使用するには、以下を .github\workflows\azure-dev.yml に追加します。

on: [push]

jobs:
   build:
      runs-on: ubuntu-latest
      steps:
         - name: Install azd
         uses: Azure/setup-azd@v0.1.0

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

この記事で作成した Azure リソースが不要になったら、次のコマンドを実行してください。

azd down

サポートを要求します

バグ報告、支援要請、または Azure Developer CLI の新機能の提案を行う方法については、トラブルシューティングとサポートのページを参照してください。

次のステップ

Azure Developer CLI (azd) を使用してアプリを監視する