Azure Static Web Apps를 통해 프런트 엔드 프레임워크 및 라이브러리 구성
Azure Static Web Apps를 사용하려면 프런트 엔드 프레임워크 또는 라이브러리의 빌드 구성 파일에 적절한 구성 값이 있어야 합니다.
구성
다음 테이블에는 일련의 프레임워크와 라이브러리1 설정이 나열되어 있습니다.
테이블 열의 의도는 다음 항목에 설명되어 있습니다.
- 출력 위치(앱 아티팩트 위치): 빌드된 정적 웹 사이트 파일용 폴더인
output_location의 값을 나열합니다. - API 아티팩트 위치(API 위치): 서버 쪽 호스팅이 필요한 프레임워크용으로 빌드된 관리 Azure Functions가 포함된 폴더인
api_location의 값을 나열합니다. - 사용자 지정 빌드 명령: 프레임워크에
npm run build나npm run azure:build와 다른 명령이 필요하면 사용자 지정 빌드 명령을 정의할 수 있습니다.
참고 항목
서버 쪽 렌더링 기능을 제공하고 Azure Static Web Apps에 배포할 수 있는 일부 웹 프레임워크입니다. 이는 앱이 정적 자산과 Azure Functions 파일에 기본 제공되어 있음을 의미합니다. 구성 파일에서 정적 자산은 출력 위치에 매핑되고 Azure Functions 파일은 API 아티팩트 위치에 매핑됩니다.
| 프레임워크 | 출력 위치(앱 아티팩트 위치) | API 아티팩트 위치 | 사용자 지정 빌드 명령 |
|---|---|---|---|
| Alpine.js | / |
해당 없음 | 해당 없음 2 |
| Angular | dist/<APP_NAME>/browser |
해당 없음 | 해당 없음 |
| Astro | dist |
해당 없음 | 해당 없음 |
| Aurelia | dist |
해당 없음 | 해당 없음 |
| Backbone.js | / |
해당 없음 | 해당 없음 |
| 블레이저(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 |
해당 없음 | 해당 없음 |
| Stencil | www |
해당 없음 | 해당 없음 |
| SvelteKit(정적) | build |
해당 없음 | 해당 없음 |
| SvelteKit | build/static |
build/server |
해당 없음 |
| Three.js | / |
해당 없음 | 해당 없음 |
| TypeScript | dist |
해당 없음 | 해당 없음 |
| Vue.js | dist |
해당 없음 | 해당 없음 |
1 위의 테이블은 Azure Static Web Apps와 작동하는 프레임워크와 라이브러리의 전체 목록이 아닙니다.
2 해당 사항 없음