Azure Pipelines 自動デプロイ（Git + React + TypeScript）

1静的 Web アプリを作成

Azure ポータルから リソースの作成 > Web > 静的 Web アプリ を選択します（図1）。

図1 静的 Web アプリ

ソースに「Azure DevOps」を選択し、リポジトリの情報を選択します（図2）。

図2 静的 Web アプリの作成

ビルドの詳細を入力します（図3）。

図3 静的 Web アプリの作成 ビルドの詳細

• ビルドのプリセット：「React」を選択
• アプリの場所：ソリューションフォルダをルートとした React プロジェクトの相対パス（重要）
• 出力先：「dist」を指定（重要）

「確認および作成」をクリックして静的 Web アプリを作成します。

2デプロイの実行

作成された静的 Web アプリに移動して、Azure DevOps パイプラインの実行 をクリックします（図4）。

図4 Azure DevOps パイプラインの実行

しばらく待つと、以下のようにデプロイに失敗します（図5）。
※デプロイが正常終了した場合は手順の 4. に進んでください。

図5 デプロイ失敗

赤い×マークをクリックして、エラーの詳細内容を確認してみましょう（図6）。

図6 エラー内容

Could not load /vite.svg (imported by src/App.tsx): crypto.hash is not a function

Vite が vite.svg を読み込もうとした際に、Node.js 18 では crypto.hash が存在しないため、ビルドが失敗しています。

3YAML を修正

エラーの原因は、Azure Static Web Apps の内部ビルド環境（Oryx）の Node.js バージョンが 18.20.8 であることです。（将来的にはプリインストールされている Node.js のバージョンが変わる可能性があります）
ビルド環境で新しいバージョンの Node.js を使用するように指定しましょう。
「Edit」ボタンをクリック（図7）して、YAML ファイルの編集画面に遷移します。

図7 Edit

env:
  NODE_VERSION: '22.9.0'

を追加して、Node.js のバージョンを指定します。

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - master
trigger:
  branches:
    include:
      - master

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-nice-desert-0bb7b8e1e-variable-group
  steps:
  - checkout: self
    submodules: true

  - task: AzureStaticWebApp@0
    env:
      NODE_VERSION: '22.9.0'
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_DESERT_0BB7B8E1E)
###### 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: "reactproject1" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Validate and save をクリックして保存します（図8）。

図8 Validate and save

デプロイが正常終了しました（図9）。

図9 デプロイ成功

4動作確認

実際に Web サイトにアクセスして動作確認しましょう。
静的 Web アプリの URL をクリックします（図10）。

図10 URL

Web サイトが表示されました（図11）。

図11 React Web サイト

以上で、自動デプロイ環境の構築は完了です。

  # Vite + React のビルド
  - script: |
      cd reactproject1
      npm ci
      npm run build
    displayName: Vite + React のビルド

name: Azure Static Web Apps CI/CD

trigger:
  branches:
    include:
      - master

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-nice-desert-0bb7b8e1e-variable-group
  steps:
  - checkout: self
    submodules: true

  # Vite + React のビルド
  - script: |
      cd reactproject1
      npm ci
      npm run build
    displayName: Vite + React のビルド

  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_DESERT_0BB7B8E1E)
      app_location: "reactproject1"
      output_location: "dist"
      skip_app_build: true