App Builder から Azure DevOps にアプリを公開する

    App Builder の Azure DevOps との統合により、生成されたソース コード (Angular、React、Blazor、または Web Components) を DevOps リポジトリに直接公開できます。これにより、開発チームへの引き継ぎが効率化され、既存の CI/CD ワークフローに自然に適合します。

    始める前に、Microsoft アカウント タイプが認証にどのように影響するか、アクセスを有効にするために必要な手順を理解することが重要です。詳細については、以下のセクションを参照してください。

    既存の Azure DevOps プロジェクトに接続する

    1. App Builder で、[プッシュ] ボタンをクリックします。
    2. ターゲット プラットフォームとして [Azure DevOps] を選択します。
    3. Microsoft アカウントで認証します。
    4. ログインと多要素認証 (有効な場合) が成功すると、Azure DevOps 組織、プロジェクト、リポジトリが選択用に表示されます。

    資格情報は安全に検証されています。App Builder は公開に必要な権限のみを要求します。

    App Builder からアプリのリポジトリを作成する

    リポジトリがまだ存在しない場合:

    1. 組織とプロジェクトを選択します。
    2. [リポジトリの作成] をクリックします。
    3. リポジトリ名と表示設定 (プライベート/パブリック - 表示設定はプロジェクト設定によって異なります) を定義します。
    4. リポジトリが作成され、公開用に初期化されます。

    コードをリポジトリに公開/プッシュする

    1. [プッシュ] をクリックして、アプリのソース コードを生成してプッシュします。
    2. 最初の公開では、生成されたファイルがデフォルトのブランチ (main) に入力されます。
    3. 状態インジケーターにより、公開が成功したことが確認されます。

    自動 CI ビルド

    Azure DevOps は、プッシュ時にトリガーできるビルド パイプラインをサポートしています。

    1. パイプラインが作成され、リポジトリにリンクされていることを確認します。
    2. App Builder は、コードがプッシュされると自動的にビルドをトリガーします。
    3. Azure DevOps 内からビルド ステータスを監視します。

    フォローアップ変更のプル リクエスト

    最初の公開以降の場合:

    1. App Builder は、一意の名前を持つ機能ブランチを作成します。
    2. プル リクエスト (PR) が自動的に生成されます。
    3. ビルド パイプラインは PR 上で実行され、変更を検証します。
    4. マージする前にコードの差分を確認できます。

    このワークフローにより、コードの品質とチームのコラボレーションが保証されます。

    ライブ アプリとして配備する (近日予定)

    App Builder から直接 Azure Web Apps にアプリをデプロイできるようになります。

    • 標準ウェブ アプリと静的ウェブ アプリの両方をサポートします。
    • 顧客向けのデモやステージング環境の配置を簡素化します。

    Microsoft アカウント タイプが認証に与える影響

    Azure DevOps を App Builder に接続する場合、認証は Microsoft Entra ID (旧 Azure Active Directory) を介して処理されます。アカウント タイプは、この接続の成功に直接影響します。

    サポートされている Microsoft アカウント タイプ

    職場または学校のアカウント (Microsoft Entra ID)

    • 例: user@company.com、user@tenant.onmicrosoft.com
    • 完全にサポートされます
    • ほとんどの場合、追加の設定は必要ありません
    • 組織のポリシーに基づいて必要なアクセスを許可できます

    個人用 Microsoft アカウント

    • 例: user@outlook.com、user@hotmail.com
    • Azure DevOps アクセス ポリシーにより直接サポートされません
    • 認証エラーが発生します (例: AADSTS500202)
    • 回避策:
      • ユーザーを Microsoft Entra テナントにゲストとして追加するか、
      • 個人アカウントを職場のアカウントに変換します。

    ドメイン検証とアカウント分類

    電子メール アドレスに関連付けられたドメインによって、Microsoft がアカウントを分類する方法が決まります。

    メール アドレス ドメインの状態 アカウント タイプ 認証サポート
    user@company.com 検証済 職場 ✅ すぐに使用できます
    user@tenant.onmicrosoft.com 組み込みの Microsoft Entra ドメイン 職場 ✅ すぐに使用できます
    user@outlook.com なし 個人用 ❌ サポートされません
    user@mydomain.com 未確認 個人用 ❌ ドメインが検証されていない限りサポートされません

    ドメインの検証方法

    1. Microsoft Entra ID > [カスタム ドメイン名] に移動します。
    2. ドメインを追加します。
    3. DNS 手順に従って、ドメイン登録機関に TXT レコードを追加します。

    組織のためのベスト プラクティス

    スムーズな統合を実現し、認証の問題を回避するには:

    • ✅ Microsoft Entra ID に関連付けられた職場または学校のアカウントを使用してください。
    • ✅ Microsoft Entra ID でドメインを検証してください。
    • ✅ Microsoft Entra ディレクトリを使用するように Azure DevOps を構成してください。
    • ✅ DevOps アクセス用にサービス プリンシパルが登録されていることを確認してください。
    • ⚠ 個人アカウントの場合:
      • テナントにゲストとして招待するか、
      • 開発活動のために職場のアカウントを用意してください。