Skip to content

Commit 6934052

Browse files
guppy0356claude
andauthored
docs(ja): translate deploy/azure into Japanese (#353)
<!-- What is this PR solving? Write a clear description or reference the issues it solves (e.g. `fixes #123`). What other alternatives have you explored? Are there any parts you think require more attention from reviewers? --> This Pull Request to add Japanese documentation about deploy/azure. This is a documentation-only change with no impact on functionality. <!---------------------------------------------------------------------- Before creating the pull request, please make sure you do the following: - Read the Contributing Guidelines at https://github.com/lazarv/react-server/blob/main/CONTRIBUTING.md. - Check that there isn't already a PR that solves the problem the same way. If you find a duplicate, please help us reviewing it. - Update the corresponding documentation if needed. - Include relevant tests that fail without this PR but pass with it. Thank you for contributing to @lazarv/react-server! -----------------------------------------------------------------------> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 8263df1 commit 6934052

1 file changed

Lines changed: 229 additions & 0 deletions

File tree

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
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

Comments
 (0)