使用 Azure Static Web Apps 設定前端架構和程式庫
Azure Static Web Apps 要求您針對前端架構或程式庫,提供組建設定檔中適當的設定值。
組態
下表列出一系列架構和程式庫 1 的設定。
下列項目說明資料表資料行的意圖:
- 輸出位置 (應用程式成品位置):列出
output_location
的值,即已建置靜態網站檔案的資料夾。 - API 成品位置 (API 位置):列出
api_location
的值,此資料夾包含已建置的受控 Azure Functions,用在需要伺服器端託管的架構中。 - 自訂組建命令:架構需要不同於
npm run build
或npm run azure:build
的命令時,您可以定義自訂組建命令。
注意
某些具有伺服器端轉譯功能的 Web 架構,而且可以部署至 Azure Static Web Apps。 這表示您的應用程式會與 Azure Functions 一起內建在靜態資產中。 在設定檔中,靜態資產會對應至輸出位置,而 Azure Functions 檔案會對應至 API 成品位置。
架構 | 輸出位置 (應用程式成品位置) | API 成品位置 | 自訂組建命令 |
---|---|---|---|
Alpine.js | / |
n/a | n/a 2 |
Angular | dist/<APP_NAME>/browser |
n/a | n/a |
Astro | dist |
n/a | n/a |
Aurelia | dist |
n/a | n/a |
Backbone.js | / |
n/a | n/a |
Blazor (WASM) | wwwroot |
n/a |
n/a |
Ember | dist |
n/a | n/a |
Flutter | build/web |
n/a | flutter build web |
Framework7 | www |
n/a | npm run build-prod |
Glimmer | dist |
n/a | n/a |
HTML | / |
n/a | n/a |
Hugo | public |
n/a | n/a |
Hyperapp | / |
n/a | n/a |
JavaScript | / |
n/a | n/a |
jQuery | / |
n/a | n/a |
KnockoutJS | dist |
n/a | n/a |
LitElement | / |
n/a | n/a |
Mithril | / |
n/a | n/a |
Next.js (靜態 HTML 匯出) | out |
n/a | n/a |
Next.js (混合式轉譯) | / |
n/a | n/a |
Nuxt 2 | / |
n/a | n/a |
Nuxt 3 | output/public |
output/server |
n/a |
Preact | dist |
n/a | n/a |
React | build |
n/a | n/a |
RedwoodJS | web/dist |
n/a | yarn rw build web |
Solid | dist |
n/a | n/a |
樣板 | www |
n/a | n/a |
SvelteKit (靜態) | build |
n/a | n/a |
SvelteKit | build/static |
build/server |
n/a |
Three.js | / |
n/a | n/a |
TypeScript | dist |
n/a | n/a |
Vue.js | dist |
n/a | n/a |
1 上表並非搭配 Azure Static Web Apps 使用的架構和程式庫完整清單。
2 不適用