Azure Static Web Apps を使用するには、フロントエンド フレームワークまたはライブラリのビルド構成ファイルに適切な構成値が含まれている必要があります。
構成
次の表は、一連のフレームワークとライブラリの設定を示しています1。
表の各列の意図は、次の項目によって説明されます。
-
出力場所 (アプリ成果物の場所):
output_locationの値を一覧表示します。これは、ビルドされた静的 Web サイト ファイル用のフォルダーです。 -
API 成果物の場所 (API の場所):
api_locationの値を一覧表示します。これは、サーバー側のホスティングを必要とするフレームワーク用にビルドされたマネージド Azure Functions が含まれるフォルダーです。 -
カスタム ビルド コマンド: フレームワークで
npm run buildまたはnpm run azure:buildとは異なるコマンドが必要となる場合に、カスタム ビルド コマンドを規定できます。
Note
サーバー側レンダリング機能を備え、Azure Static Web Apps にデプロイできる Web フレームワークもあります。 これは、アプリが Azure Functions と共に静的資産に組み込まれていることを意味します。 構成ファイルでは、静的資産は "出力場所" にマップされ、Azure Functions ファイルは "API 成果物の場所" にマップされます。
| フレームワーク | 出力場所 (アプリ成果物の場所) | API 成果物の場所 | カスタム ビルド コマンド |
|---|---|---|---|
| Alpine.js | / |
該当なし | 該当なし 2 |
| Angular | dist/<APP_NAME>/browser |
該当なし | 該当なし |
| Astro | dist |
該当なし | 該当なし |
| Aurelia | dist |
該当なし | 該当なし |
| Backbone.js | / |
該当なし | 該当なし |
| Blazor (WASM) | wwwroot |
n/a |
該当なし |
| Ember | dist |
該当なし | 該当なし |
| Flutter | build/web |
該当なし | flutter build web |
| Framework7 | www |
該当なし | npm run build-prod |
| Glimmer | dist |
該当なし | 該当なし |
| HTML | / |
該当なし | 該当なし |
| Hugo | public |
該当なし | 該当なし |
| Hyperapp | / |
該当なし | 該当なし |
| JavaScript | / |
該当なし | 該当なし |
| jQuery | / |
該当なし | 該当なし |
| KnockoutJS | dist |
該当なし | 該当なし |
| LitElement | / |
該当なし | 該当なし |
| Mithril | / |
該当なし | 該当なし |
| Next.js (静的 HTML エクスポート) | out |
該当なし | 該当なし |
| Next.js (ハイブリッド レンダリング) | / |
該当なし | 該当なし |
| Nuxt 2 | / |
該当なし | 該当なし |
| Nuxt 3 | .output/public |
.output/server |
該当なし |
| Preact | dist |
該当なし | 該当なし |
| React | build |
該当なし | 該当なし |
| RedwoodJS | web/dist |
該当なし | yarn rw build web |
| Solid | dist |
該当なし | 該当なし |
| ステンシル | www |
該当なし | 該当なし |
| SvelteKit (静的) | build |
該当なし | 該当なし |
| SvelteKit | build/static |
build/server |
該当なし |
| Three.js | / |
該当なし | 該当なし |
| TypeScript | dist |
該当なし | 該当なし |
| Vue.js | dist |
該当なし | 該当なし |
1 上記の表は、Azure Static Web Apps で動作するフレームワークとライブラリを完全に網羅する一覧ではありません。
2 該当なし