Azure Pipelines を使用して Git リポジトリにプッシュ → 自動デプロイ（Vite + React）

前提条件、注意事項

Git リポジトリは Azure DevOps 内のものを使用（GitHub でも可能だが、YAML の記述が変わる（未調査））
Azure Pipeline を無料のまま使用する場合は申請が必要
この方法は「静的 Web アプリ」を使用するので、ASP.NET Core のような Web アプリケーションではこの方法は使用できない。（SSR 等を使わない）React はデプロイ前にコンパイルを行うので、html と javaScript、画像リソースだけの静的な Web サイト（サーバー側の処理はない）になる。そのためデプロイ先は「静的 Web アプリ」でよい。

手順

1. 静的 Web アプリの作成時に Git リポジトリの情報を付加して作成

プランは無料でも問題なし
Azure DevOps のプロジェクト名、リポジトリ名、ブランチ名を指定
ビルドのプリセット：「React」を選択
アプリの場所：ソリューションフォルダをルートとした相対パスを指定（重要）
出力先：「dist」を指定（重要）

![image][pasted-2025.01.25-16.47.23.png]

![image][pasted-2025.01.25-16.48.00.png]

![image][pasted-2025.01.25-16.58.41.png]

2. Azure DevOps の Pipelines で YAML ファイルを修正

最初の 1. の手順のみで自動デプロイは行われるようになるが、ソースに誤りがあってReact のコンパイルに失敗しても、デプロイ処理は継続されてしまうため、ブラウザで確認すると白い画面が表示されることになる。これを回避するために、自動生成された YAML（*.yaml）ファイルを修正する。

Pipeline の右端にある３点リーダークリック > Edit

![image][pasted-2025.01.25-17.09.39.png]

以下の内容を挿入（「webcontent」の箇所はプロジェクトによって異なる）

  # Vite + React のビルド
  - script: |
      echo "Switching to webcontent directory..."
      cd webcontent

      echo "Installing dependencies..."
      npm ci
      
      echo "Building the app with Vite..."
      npm run build
    displayName: Vite + React のビルド

  # Artifacts の生成
  - task: PublishBuildArtifacts@1
    inputs:
      pathToPublish: 'webcontent/dist'
      artifactName: 'vite-build-output'
      publishLocation: 'Container'
    displayName: Artifacts の生成

挿入後の YAML ファイル全体

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - feature-web-front-end
trigger:
  branches:
    include:
      - feature-web-front-end

variables:
  VITE_API_BASE_URL: 'https://test.com/api'
  
jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-salmon-stone-03bdd581e-variable-group
  steps:
  - checkout: self
    submodules: true

  # Vite + React のビルド
  - script: |
      echo "Switching to webcontent directory..."
      cd webcontent

      echo "Installing dependencies..."
      npm ci
      
      echo "Building the app with Vite..."
      npm run build
    displayName: Vite + React のビルド

  # Artifacts の生成
  - task: PublishBuildArtifacts@1
    inputs:
      pathToPublish: 'webcontent/dist'
      artifactName: 'vite-build-output'
      publishLocation: 'Container'
    displayName: Artifacts の生成

  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(ひみつのアッコちゃん)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/webcontent" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

この修正によって、React のコンパイルが失敗した場合に以下の効果が得られる。

コンパイルエラー発生時にはデプロイが中止される
Pipeline の実行ログでエラー内容を確認できるようになる