Azure Static Web Apps を使用してフロントエンド フレームワークとライブラリを構成する
Azure Static Web Apps では、フロントエンド フレームワークまたはライブラリのビルド構成ファイルに適切な構成値が必要です。
構成
次の表は、一連のフレームワークとライブラリの設定を示しています1。
表の各列の意図は、次の項目によって説明されます。
- 出力場所 (アプリ成果物の場所): 値 (
output_locationビルドされた静的 Web サイト ファイルのフォルダー) を一覧表示します。 - API アーティファクトの場所 (API の場所): サーバー側ホスティングを必要とするフレームワーク用にビルドされたマネージド Azure Functions を含むフォルダーである値
api_locationを一覧表示します。 - カスタム ビルド コマンド: フレームワークで
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 |
| 固体 | dist |
該当なし | 該当なし |
| ステンシル | www |
該当なし | 該当なし |
| SvelteKit (静的) | build |
該当なし | 該当なし |
| SvelteKit | build/static |
build/server |
該当なし |
| Three.js | / |
該当なし | 該当なし |
| TypeScript | dist |
該当なし | 該当なし |
| Vue.js | dist |
該当なし | 該当なし |
1 上記の表は、Azure Static Web Apps で動作するフレームワークとライブラリを完全に網羅する一覧ではありません。
2 該当なし