|
| 1 | +--- |
| 2 | +title: Azure |
| 3 | +category: Deploy |
| 4 | +order: 6 |
| 5 | +--- |
| 6 | + |
| 7 | +import Link from "../../../../components/Link.jsx"; |
| 8 | + |
| 9 | +# Azure Functions |
| 10 | + |
| 11 | +Azure Functionsにデプロイするには、ビルトインの `azure` アダプタを使用します。このアダプタは、完全なレスポンスストリーミングをサポートするAzure Functions v4プログラミングモデルを使用します。 |
| 12 | + |
| 13 | +<Link name="installation"> |
| 14 | +## インストール |
| 15 | +</Link> |
| 16 | + |
| 17 | +以下のツールがインストールされている必要があります: |
| 18 | + |
| 19 | +- [Azure CLI](https://aka.ms/install-azure-cli) (`az`) |
| 20 | +- [Azure Functions Core Tools v4](https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-tools?tabs=v4) (`func`) |
| 21 | + |
| 22 | +```sh |
| 23 | +# Install Azure Functions Core Tools |
| 24 | +npm install -g azure-functions-core-tools@4 --unsafe-perm true |
| 25 | + |
| 26 | +# Install Azure CLI (macOS) |
| 27 | +brew install azure-cli |
| 28 | + |
| 29 | +# Login to Azure |
| 30 | +az login |
| 31 | +``` |
| 32 | + |
| 33 | +追加のパッケージは不要です — アダプタは `@lazarv/react-server` に組み込まれています。 |
| 34 | + |
| 35 | +`react-server.config.mjs` ファイルにアダプタを追加します: |
| 36 | + |
| 37 | +```mjs |
| 38 | +export default { |
| 39 | + adapter: "azure", |
| 40 | +}; |
| 41 | +``` |
| 42 | + |
| 43 | +<Link name="configuration"> |
| 44 | +## 設定 |
| 45 | +</Link> |
| 46 | + |
| 47 | +オプションを渡してアダプタをカスタマイズできます: |
| 48 | + |
| 49 | +```mjs |
| 50 | +export default { |
| 51 | + adapter: [ |
| 52 | + "azure", |
| 53 | + { |
| 54 | + appName: "my-app", // Azure Function App name |
| 55 | + resourceGroup: "my-rg", // Azure resource group |
| 56 | + location: "westus2", // Azure region |
| 57 | + storageName: "myappstorage", // Storage account name |
| 58 | + host: {}, // Extra host.json properties |
| 59 | + env: { // Extra environment variables |
| 60 | + MY_API_KEY: "value", |
| 61 | + }, |
| 62 | + }, |
| 63 | + ], |
| 64 | +}; |
| 65 | +``` |
| 66 | + |
| 67 | +### 設定オプション |
| 68 | + |
| 69 | +- `appName`: Azure Function App名。`package.json` の name(スコーププレフィックスを除く)にフォールバックします。Azure全体でグローバルに一意である必要があります。 |
| 70 | +- `resourceGroup`: Azureリソースグループ名(デフォルト: `<appName>-rg`)。 |
| 71 | +- `location`: 新しいリソースのAzureリージョン(デフォルト: `"eastus"`)。新しいリソースをプロビジョニングする場合にのみ使用されます。 |
| 72 | +- `storageName`: Azure Storageアカウント名(デフォルト: appNameから派生、小文字英数字のみ、最大24文字)。 |
| 73 | +- `host`: 生成された `host.json` にマージする追加プロパティ。 |
| 74 | +- `env`: `local.settings.json` に含める追加の環境変数。 |
| 75 | + |
| 76 | +<Link name="deploy"> |
| 77 | +## デプロイ |
| 78 | +</Link> |
| 79 | + |
| 80 | +ビルドとデプロイを一度に行います: |
| 81 | + |
| 82 | +```sh |
| 83 | +pnpm react-server build --deploy |
| 84 | +``` |
| 85 | + |
| 86 | +または、先にビルドしてから手動でデプロイします: |
| 87 | + |
| 88 | +```sh |
| 89 | +# Build |
| 90 | +pnpm react-server build |
| 91 | + |
| 92 | +# Deploy using Azure Functions Core Tools |
| 93 | +func azure functionapp publish <app-name> --javascript |
| 94 | +``` |
| 95 | + |
| 96 | +> **注意:** `func` を使って手動でデプロイする場合は、`.azure/` 出力ディレクトリからコマンドを実行する必要があります。 |
| 97 | +
|
| 98 | +<Link name="provisioning"> |
| 99 | +## 自動プロビジョニング |
| 100 | +</Link> |
| 101 | + |
| 102 | +`--deploy` を使ってデプロイすると、アダプタは [Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview) テンプレートを使用して、必要なすべてのAzureリソースを自動的にプロビジョニングします: |
| 103 | + |
| 104 | +- **リソースグループ** — 存在しない場合に作成 |
| 105 | +- **ストレージアカウント** — Standard_LRS、HTTPSのみ |
| 106 | +- **Consumptionプラン** — Y1 Dynamicティア(Linux)、実行ごとの課金 |
| 107 | +- **Function App** — Node.js 20、Functions v4ランタイム |
| 108 | + |
| 109 | +Function Appが既に存在する場合(任意のリソースグループ内)、プロビジョニングは完全にスキップされます。アダプタはサブスクリプション内のすべてのリソースグループを検索して、既存のアプリを見つけます。 |
| 110 | + |
| 111 | +生成された `main.bicep` テンプレートは `.azure/` ディレクトリに書き込まれます。手動でデプロイする前に、検査またはカスタマイズできます: |
| 112 | + |
| 113 | +```sh |
| 114 | +az deployment group create \ |
| 115 | + --resource-group <resource-group> \ |
| 116 | + --template-file .azure/main.bicep \ |
| 117 | + --parameters appName=<app-name> storageName=<storage-name> location=<region> |
| 118 | +``` |
| 119 | + |
| 120 | +<Link name="streaming"> |
| 121 | +## レスポンスストリーミング |
| 122 | +</Link> |
| 123 | + |
| 124 | +このアダプタはレスポンスストリーミングを完全にサポートしています。React Server Components、Suspenseバウンダリ、プログレッシブHTML配信はすべてそのまま動作します。Azure Functions v4プログラミングモデルの `app.http()` ハンドラーは `ReadableStream` ボディの返却をサポートしており、バッファリングなしの真のストリーミングを実現します。 |
| 125 | + |
| 126 | +これはすべてのレスポンスをバッファリングするAzure Static Web Appsに対する主要な利点です。 |
| 127 | + |
| 128 | +<Link name="how-it-works"> |
| 129 | +## 仕組み |
| 130 | +</Link> |
| 131 | + |
| 132 | +アダプタは**エッジビルド**モードを使用し、サーバー全体を単一のファイルにバンドルします。ビルド時に以下を行います: |
| 133 | + |
| 134 | +1. サーバーを `.azure/server/.react-server/server/edge.mjs` にバンドル |
| 135 | +2. すべての静的アセットを `.azure/static/` にコピー |
| 136 | +3. 薄い `src/functions/server.mjs` ラッパーを生成: |
| 137 | + - `@azure/functions` をインポート(外部として保持 — Azureランタイムが必要とする) |
| 138 | + - `app.http()` を介してすべてのメソッドとパスに一致するHTTPトリガーを登録 |
| 139 | + - ビルド時のルートマップを使用して `readFileSync()` で静的ファイルを配信 |
| 140 | + - 動的リクエストをバンドルされたエッジハンドラーに委譲 |
| 141 | +4. `host.json`、`package.json`、`local.settings.json`、`main.bicep` を生成 |
| 142 | +5. `.azure/` で `npm install` を実行して `@azure/functions` をインストール |
| 143 | + |
| 144 | +> **重要:** `@azure/functions` パッケージはエッジビルドにバンドルできません。Azureランタイムはこのモジュールの独自のインスタンスを提供し、登録されたHTTPトリガーを検出するために使用します。バンドルすると、ランタイムは登録済み関数がゼロと認識します。 |
| 145 | +
|
| 146 | +<Link name="local-development"> |
| 147 | +## ローカル開発 |
| 148 | +</Link> |
| 149 | + |
| 150 | +ビルド後、Azure Functions Core Toolsを使用してローカルでテストできます: |
| 151 | + |
| 152 | +```sh |
| 153 | +cd .azure |
| 154 | +func start |
| 155 | +``` |
| 156 | + |
| 157 | +生成された `local.settings.json` でローカルランタイムが設定されます。`--sourcemap` を付けてビルドした場合、`NODE_OPTIONS` を介してNode.jsのソースマップも有効になります。 |
| 158 | + |
| 159 | +<Link name="output-structure"> |
| 160 | +## 出力構造 |
| 161 | +</Link> |
| 162 | + |
| 163 | +``` |
| 164 | +.azure/ |
| 165 | +├── host.json # Azure Functions host configuration |
| 166 | +├── local.settings.json # Local development settings |
| 167 | +├── main.bicep # Bicep IaC template for provisioning |
| 168 | +├── package.json # Dependencies (@azure/functions) |
| 169 | +├── node_modules/ # Installed dependencies |
| 170 | +├── server/ |
| 171 | +│ └── .react-server/ # Bundled server (edge.mjs, manifests) |
| 172 | +├── src/ |
| 173 | +│ └── functions/ |
| 174 | +│ └── server.mjs # Azure Functions v4 HTTP trigger wrapper |
| 175 | +└── static/ # Static assets (HTML, CSS, JS, images) |
| 176 | +``` |
| 177 | + |
| 178 | +<Link name="troubleshooting"> |
| 179 | +## トラブルシューティング |
| 180 | +</Link> |
| 181 | + |
| 182 | +### "SubscriptionIsOverQuotaForSku" エラー |
| 183 | + |
| 184 | +Azureサブスクリプションが選択したリージョンでDynamic(Consumption)VMのクォータを持っていないことを意味します。別のリージョンを試してください: |
| 185 | + |
| 186 | +```mjs |
| 187 | +export default { |
| 188 | + adapter: ["azure", { location: "westus2" }], |
| 189 | +}; |
| 190 | +``` |
| 191 | + |
| 192 | +または、[Azureポータル](https://portal.azure.com/#blade/Microsoft_Azure_Capacity/QuotaMenuBlade/overview)でクォータの増加をリクエストしてください。 |
| 193 | + |
| 194 | +### "Unable to find project root" (`func` のエラー) |
| 195 | + |
| 196 | +`func` CLIは `host.json` を含むディレクトリから実行する必要があります。手動でデプロイする場合は、まず `cd .azure` を実行してください。`--deploy` フラグはこれを自動的に処理します。 |
| 197 | + |
| 198 | +### デプロイ後に関数リストが空 |
| 199 | + |
| 200 | +`func publish` が成功しても関数が報告されない場合、通常 `@azure/functions` が外部として保持されずにバンドルされたことを意味します。`.azure/node_modules/@azure/functions/` が存在することを確認してください。アダプタはこれを自動的に処理しますが、ビルドをカスタマイズした場合は、パッケージが外部のままであることを確認してください。 |
| 201 | + |
| 202 | +### `/api/...` で404レスポンス |
| 203 | + |
| 204 | +アダプタはデフォルトの `/api/` プレフィックスを削除するために `host.json` で `routePrefix: ""` を設定しています。`/api/server` のようなパスで404が表示される場合は、`host.json` が上書きされていないか、または `host` アダプタオプションがプレフィックスを再追加していないか確認してください。 |
| 205 | + |
| 206 | +### Bicepデプロイの失敗 |
| 207 | + |
| 208 | +完全なAzureエラーがビルド出力に表示されます。一般的な原因: |
| 209 | + |
| 210 | +- **リージョンクォータ**: サブスクリプションがデフォルトリージョンで容量を持っていない可能性があります。別の `location` を設定してください。 |
| 211 | +- **名前の競合**: Function App名はグローバルに一意である必要があります。より具体的な `appName` を試してください。 |
| 212 | +- **プロバイダー未登録**: 必要なリソースプロバイダーを登録してください: |
| 213 | + ```sh |
| 214 | + az provider register --namespace Microsoft.Web |
| 215 | + az provider register --namespace Microsoft.Storage |
| 216 | + ``` |
| 217 | + |
| 218 | +### Azure CLIにログインしていない |
| 219 | + |
| 220 | +"Azure CLI is not installed or you are not logged in" と表示された場合、以下を実行してください: |
| 221 | + |
| 222 | +```sh |
| 223 | +az login |
| 224 | +az account show # Verify you're logged in |
| 225 | +``` |
| 226 | + |
| 227 | +### コールドスタートが遅い |
| 228 | + |
| 229 | +Consumptionプランの Azure Functions は数秒のコールドスタートが発生する場合があります。より低いレイテンシのためには、`.azure/main.bicep` のBicepテンプレートをカスタマイズしてPremiumプランへのアップグレードを検討してください。 |
0 commit comments