Vite + React プロジェクトの Azure 環境へのデプロイ

参考

Azure Static Web Apps をローカルソースから直接デプロイする

Azure Static Web Apps は通常、Github か Azure DevOps 上のリポジトリからデプロイをすると思いますが、 Azure Static Web Apps CLI というコマンドラインツールを使ってローカルのソースを直接デプロイすることもできます。更に、ローカルで Azure 環境をエミューレートすることもできるので、開発効率上がります。

前提

Azure に静的 Web サイトを作成済みであること

手順

1. Vite + React プロジェクトを開く

新規作成 or 既存のプロジェクトを開く

2. Azure Static Web Apps CLI をインストール

ターミナルを開いて、以下のコマンドを実行 ※ターミナルを開いた時、カレントディレクトリはソリューションフォルダになっているので、プロジェクトフォルダに移動する

# プロジェクトルートで実行
npm install --save-dev @azure/static-web-apps-cli

3. 設定ファイルの作成

ターミナルで以下のコマンドを実行

# プロジェクトルートで実行
npx swa init 

Welcome to Azure Static Web Apps CLI (2.0.1)

√ Choose a configuration name: ... reactapp  ★設定の名前（デフォルト値が表示されるので、そのままエンターキー）

Detected configuration for your app:
- Framework(s): Vite
- App location: reactapp
- Output location: dist
- API location:
- API language:
- API version:
- Data API location:
- App build command: npm run build
- API build command:
- App dev server command: npm run dev
- App dev server URL: http://localhost:5173

- API dev server URL:

√ Are these settings correct? ... yes ★エンターキー

Configuration successfully saved to swa-cli.config.json.

Get started with the following commands:
- Use swa start to run your app locally.
- Use swa build to build your app.
- Use swa deploy to deploy your app to Azure.

プロジェクトルート配下に swa-cli.config.json というファイルが作成される

// swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173"
    }
  }
}

4. 設定ファイルの編集

設定ファイルに以下を追加

appName: 静的 Web サイトの名前
resourceGroup: リソースグループ

// swa-cli.config.json
{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173",
      "appName": "static-web-app",
      "resourceGroup": "shibasaki"
    }
  }
}

5. Azure へのデプロイ

ターミナルで以下のコマンドを実行してログイン
※ブラウザが起動してログインを求められたらログインする（「Auth code was successfully acquired. You can close this window now.」と表示されればOK）
※デフォルトのブラウザで Azure にログイン済みであれば新規タブに「Auth code was successfully acquired. You can close this window now.」と表示される
※アカウントが複数テナントに紐づいている場合はテナントの一覧が表示されるので、上下の矢印キーで選択してエンター

npx swa login --no-use-keychain

Welcome to Azure Static Web Apps CLI (2.0.1)

Using configuration "reactapp" from file:
  C:\Users\shiba\Documents\Git\ReactSample\reactapp\reactapp\swa-cli.config.json

Checking Azure session...
✔ Successfully logged into Azure!
? Choose your tenant » - Use arrow-keys. Return to submit.
>   223009f8-3894-4b28-8bf4-732335a1ddfb
    331034e9-6770-4caf-9d84-4fc7badadf0a
    6f36fe8e-1806-44c3-8eab-eb49f7d79e26
    b93c2b94-189f-4797-8f05-b047aecd41f9

ターミナルで以下のコマンドを実行してビルド dist フォルダにデプロイするリソースが生成される

npx swa build

ターミナルで以下のコマンドを実行してデプロイ
※アカウントが複数テナントに紐づいている場合はテナントの一覧が表示されるので、上下の矢印キーで選択してエンター

npx swa deploy --env production --no-use-keychain

以下のようなメッセージが表示されればOK

Deploying to environment: production

Deploying project to Azure Static Web Apps...
√ Project deployed to https://purple-river-09bd36a00.5.azurestaticapps.net 🚀