Skip to content

Commit 4de753b

Browse files
guppy0356claude
andauthored
docs(ja): translate deploy/azure-swa into Japanese (#354)
<!-- 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-swa. 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 6934052 commit 4de753b

1 file changed

Lines changed: 236 additions & 0 deletions

File tree

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
---
2+
title: Azure Static Web Apps
3+
category: Deploy
4+
order: 7
5+
---
6+
7+
import Link from "../../../../components/Link.jsx";
8+
9+
# Azure Static Web Apps
10+
11+
Azure Static Web Apps(SWA)にデプロイするには、ビルトインの `azure-swa` アダプタを使用します。このアダプタは、SWAのマネージド関数とCDNバックの静的ホスティング向けにアプリをパッケージします。
12+
13+
> **注意:** Azure Static Web Appsはレスポンスストリーミングを**サポートしていません**。すべてのレスポンスはクライアントに送信される前にバッファリングされます。ストリーミング(React Suspense、プログレッシブHTML)が必要な場合は、代わりに [Azure Functions](/deploy/azure) アダプタを使用してください。
14+
15+
<Link name="installation">
16+
## インストール
17+
</Link>
18+
19+
[Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/) がインストールされている必要があります:
20+
21+
```sh
22+
npm install -g @azure/static-web-apps-cli
23+
```
24+
25+
追加のパッケージは不要です — アダプタは `@lazarv/react-server` に組み込まれています。
26+
27+
`react-server.config.mjs` ファイルにアダプタを追加します:
28+
29+
```mjs
30+
export default {
31+
adapter: "azure-swa",
32+
};
33+
```
34+
35+
<Link name="configuration">
36+
## 設定
37+
</Link>
38+
39+
オプションを渡してアダプタをカスタマイズできます:
40+
41+
```mjs
42+
export default {
43+
adapter: [
44+
"azure-swa",
45+
{
46+
host: {}, // Extra host.json properties
47+
routes: [], // Additional SWA route rules
48+
platform: { // Platform configuration overrides
49+
apiRuntime: "node:20",
50+
},
51+
staticwebapp: {}, // Extra staticwebapp.config.json properties
52+
env: { // Extra environment variables
53+
MY_API_KEY: "value",
54+
},
55+
},
56+
],
57+
};
58+
```
59+
60+
### 設定オプション
61+
62+
- `host`: 生成された `host.json` にマージする追加プロパティ。
63+
- `routes`: `staticwebapp.config.json` に追加するルートルール。デフォルトの `/``/assets/*``/client/*` ルールの後に配置されます。
64+
- `platform`: `staticwebapp.config.json` のプラットフォーム設定を上書きします(デフォルト: `{ apiRuntime: "node:20" }`)。
65+
- `staticwebapp`: `staticwebapp.config.json` にマージする追加のトップレベルプロパティ。
66+
- `env`: `local.settings.json` 用の追加の環境変数。
67+
68+
<Link name="extending-config">
69+
## SWA設定の拡張
70+
</Link>
71+
72+
生成された `staticwebapp.config.json` を拡張するには、プロジェクトルートに `react-server.azure.json` ファイルを作成します。アダプタはこれを生成された設定にマージします:
73+
74+
```json filename="react-server.azure.json"
75+
{
76+
"responseOverrides": {
77+
"404": {
78+
"rewrite": "/api/server"
79+
}
80+
},
81+
"globalHeaders": {
82+
"X-Frame-Options": "DENY"
83+
}
84+
}
85+
```
86+
87+
<Link name="deploy">
88+
## デプロイ
89+
</Link>
90+
91+
ビルドとデプロイを一度に行います:
92+
93+
```sh
94+
pnpm react-server build --deploy
95+
```
96+
97+
または、先にビルドしてから手動でデプロイします:
98+
99+
```sh
100+
# Build
101+
pnpm react-server build
102+
103+
# Deploy
104+
swa deploy .azure-swa/static \
105+
--api-location .azure-swa/functions \
106+
--api-language node \
107+
--api-version 20
108+
```
109+
110+
デプロイ前に、Azure Static Web Appsリソースが作成されていることを確認してください。[Azureポータル](https://portal.azure.com)またはAzure CLIを使用して作成できます:
111+
112+
```sh
113+
az staticwebapp create \
114+
--name my-app \
115+
--resource-group my-rg \
116+
--location "eastus2"
117+
```
118+
119+
<Link name="how-it-works">
120+
## 仕組み
121+
</Link>
122+
123+
アダプタは**エッジビルド**モードを使用し、サーバーを単一のファイルにバンドルします。ビルド時に以下を行います:
124+
125+
1. サーバーを `.azure-swa/functions/server/.react-server/server/edge.mjs` にバンドル
126+
2. 静的アセットを `.azure-swa/static/` にコピー
127+
3. Azure Functions v3の `(context, req)` モデルを標準のfetchハンドラーにブリッジする `functions/server/index.mjs` ラッパーを生成
128+
4. `function.json`(HTTPトリガー)、`host.json``staticwebapp.config.json` を生成
129+
5. 静的ディレクトリにフォールバック `index.html` を作成(SWAが必要とする)
130+
131+
### 静的ファイルルーティング
132+
133+
静的ファイルはAzure SWAのビルトインCDNによって配信されます。`staticwebapp.config.json` は以下を設定します:
134+
135+
- `/assets/*``/client/*` ルートにイミュータブルなキャッシュヘッダー
136+
- すべての非静的リクエストを `/api/server` 関数にリライトする `navigationFallback`
137+
- ルートパス `/``/api/server` にリライト
138+
139+
これにより、静的アセットはサーバーレス関数を完全にバイパスし、SWAのエッジCDNから直接配信されます。
140+
141+
<Link name="output-structure">
142+
## 出力構造
143+
</Link>
144+
145+
```
146+
.azure-swa/
147+
├── staticwebapp.config.json # SWA routing configuration
148+
├── functions/
149+
│ ├── host.json # Azure Functions host config
150+
│ ├── local.settings.json # Local dev settings
151+
│ ├── package.json # ESM support
152+
│ └── server/
153+
│ ├── function.json # HTTP trigger binding
154+
│ ├── index.mjs # Request handler wrapper
155+
│ └── .react-server/ # Bundled server (edge.mjs, manifests)
156+
└── static/
157+
├── staticwebapp.config.json
158+
├── index.html # Fallback (required by SWA)
159+
├── assets/ # Vite-built assets
160+
├── client/ # Client component bundles
161+
└── ... # Other static files
162+
```
163+
164+
<Link name="azure-vs-azure-swa">
165+
## Azure Functions vs. Azure SWA
166+
</Link>
167+
168+
| 機能 | `azure`(Functions v4) | `azure-swa`(Static Web Apps) |
169+
|---|---|---|
170+
| **ストリーミング** | あり | なし(レスポンスはバッファリングされる) |
171+
| **静的ファイル** | 関数が配信 | CDNが配信 |
172+
| **自動プロビジョニング** | あり(Bicep経由) | 手動(ポータルまたはCLI) |
173+
| **コールドスタート** | Consumptionプランのレイテンシ | SWAが管理 |
174+
| **カスタムドメイン** | Function App設定から | SWA設定から |
175+
| **Functionsバージョン** | v4(プログラミングモデル) | v3(function.json) |
176+
177+
ストリーミングが必要な場合やリソースの自動プロビジョニングが必要な場合は `azure` を選択してください。CDNバックのアセット配信がストリーミングよりも重要な、シンプルな静的中心のアプリには `azure-swa` を選択してください。
178+
179+
<Link name="troubleshooting">
180+
## トラブルシューティング
181+
</Link>
182+
183+
### SWA CLIが見つからない
184+
185+
CLIをグローバルにインストールしてください:
186+
187+
```sh
188+
npm install -g @azure/static-web-apps-cli
189+
```
190+
191+
### レスポンスがバッファリングされる / ストリーミングなし
192+
193+
これはAzure Static Web Appsの制限です。SWAはすべての関数レスポンスをクライアントに送信する前にバッファリングします。ストリーミングが必要な場合は、[Azure Functions](/deploy/azure) アダプタに切り替えてください。
194+
195+
### ページナビゲーション時の404エラー
196+
197+
`staticwebapp.config.json``navigationFallback` が設定されていることを確認してください。アダプタはこれを自動的に生成します。`react-server.azure.json` で設定をカスタマイズした場合は、`navigationFallback` セクションを上書きしていないことを確認してください。
198+
199+
### ルートURLで空またはブロークンなページ
200+
201+
`staticwebapp.config.json``/` ルートから `/api/server` へのリライトが存在することを確認してください。アダプタはデフォルトでこれを作成します。ページが読み込まれるが `<!doctype html>` のみが表示される場合、関数が実行されていない可能性があります — Azureポータルで関数ログを確認してください。
202+
203+
### 関数がトリガーされない
204+
205+
関数が正しくデプロイされたことを確認してください:
206+
207+
```sh
208+
swa deploy .azure-swa/static \
209+
--api-location .azure-swa/functions \
210+
--api-language node \
211+
--api-version 20 \
212+
--verbose
213+
```
214+
215+
`.azure-swa/functions/server/function.json` が存在し、HTTPトリガーバインディングが定義されていることを確認してください。
216+
217+
### "x-ms-original-url" ヘッダーの問題
218+
219+
Azure SWAは `navigationFallback` を使用してリクエストをAPI関数にリライトします。元のURLは `x-ms-original-url` ヘッダーを介して渡されます。アダプタのラッパーはこれを自動的に処理します。アプリで不正なURLが表示される場合は、SWA設定の `navigationFallback.exclude` パターンが関数に送られるべきルートにマッチしていないか確認してください。
220+
221+
### ローカル開発
222+
223+
SWA CLIを使用してローカルでテストできます:
224+
225+
```sh
226+
swa start .azure-swa/static \
227+
--api-location .azure-swa/functions \
228+
--api-port 7071
229+
```
230+
231+
または、Azure Functions Core Toolsを直接使用してAPIをテストできます:
232+
233+
```sh
234+
cd .azure-swa/functions
235+
func start
236+
```

0 commit comments

Comments
 (0)