Azure Static Web Apps에 웹앱 배포
이 문서에서는 선택한 프레임워크를 사용하여 새 웹앱을 만들고 로컬로 실행한 다음 Azure Static Web Apps에 배포합니다.
필수 조건
이 자습서를 완전히 학습하려면 다음이 필요합니다.
| 리소스 | 설명 |
|---|---|
| Azure 구독 | 계정이 없는 경우 체험 계정을 만들 수 있습니다. |
| Node.JS | 버전 20.0 이상을 설치합니다. |
| Azure CLI | 버전 2.6x 이상을 설치합니다. |
텍스트 편집기도 필요합니다. Azure를 사용하려면 Visual Studio Code가 권장됩니다.
Linux, macOS, Windows 또는 Linux용 Windows 하위 시스템을 포함하여 선택한 플랫폼에서 이 문서에서 만든 앱을 실행할 수 있습니다.
웹앱 만들기
- 터미널 창을 엽니다.
코드에 적절한 디렉터리를 선택한 후 다음 명령을 실행합니다.
npm create vite@latest swa-vanilla-demo -- --template=vanilla cd swa-vanilla-demo npm install npm run dev이 명령을 실행하면 개발 서버가 웹 사이트의 URL을 인쇄합니다. 링크를 선택하여 기본 브라우저에서 엽니다.
코드에 적절한 디렉터리를 선택한 후 다음 명령을 실행합니다.
npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults cd swa-angular-demo npm start이 명령을 실행하면 개발 서버가 웹 사이트의 URL을 인쇄합니다. 링크를 선택하여 기본 브라우저에서 엽니다.
코드에 적절한 디렉터리를 선택한 후 다음 명령을 실행합니다.
npm create vite@latest swa-react-demo -- --template react cd swa-react-demo npm install npm run dev이 명령을 실행하면 개발 서버가 웹 사이트의 URL을 인쇄합니다. 링크를 선택하여 기본 브라우저에서 엽니다.
코드에 적절한 디렉터리를 선택한 후 다음 명령을 실행합니다.
npm create vite@latest swa-vue-demo -- --template vue cd swa-vue-demo npm install npm run dev이 명령을 실행하면 개발 서버가 웹 사이트의 URL을 인쇄합니다. 링크를 선택하여 기본 브라우저에서 엽니다.
- 개발 서버를 중지하려면 Cmd/Ctrl+C를 선택합니다.
Azure에서 정적 웹앱 만들기
Azure Portal, Azure CLI, Azure PowerShell 또는 Visual Studio Code(Azure Static Web Apps 확장 포함)를 사용하여 정적 웹앱을 만들 수 있습니다. 이 자습서에서는 Azure CLI를 사용합니다.
Azure CLI에 로그인:
az login기본적으로 이 명령은 프로세스를 완료하기 위해 브라우저를 엽니다. Azure CLI는 사용자 환경에서 이 방법이 작동하지 않는 경우 다양한 로그인 방법을 지원합니다.
구독이 여러 개인 경우 구독을 선택해야 할 수도 있습니다. 다음 명령을 사용하여 현재 구독을 볼 수 있습니다.
az account show구독을 선택하려면
az account set명령을 실행하면 됩니다.az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"리소스 그룹을 만듭니다.
리소스 그룹은 Azure 리소스를 함께 그룹화하는 데 사용됩니다.
az group create -n swa-tutorial -l centralus --query "properties.provisioningState"-n매개 변수는 사이트 이름을 나타내고,-l매개 변수는 Azure 위치 이름입니다. 명령은--query "properties.provisioningState"로 끝나므로 명령은 성공 또는 오류 메시지만 반환합니다.새로 만든 리소스 그룹에 정적 웹앱을 만듭니다.
az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"-n매개 변수는 사이트 이름을 나타내고,-g매개 변수는 Azure 리소스 그룹의 이름을 나타냅니다. 이전 단계와 동일한 리소스 그룹 이름을 지정해야 합니다. 정적 웹앱은 전역적으로 배포되므로 앱 배포 방법에 위치는 중요하지 않습니다.이 명령은 웹앱의 URL을 반환하도록 구성되었습니다. 터미널 창에서 브라우저로 값을 복사하여 배포된 웹앱을 볼 수 있습니다.
배포 구성
다음 콘텐츠로 애플리케이션 코드에
staticwebapp.config.json파일을 추가합니다.{ "navigationFallback": { "rewrite": "/index.html" } }대체 경로를 정의하면 사이트에서 도메인에 대한 모든 요청에 대해
index.html파일을 제공할 수 있습니다.사용 중인 경우 이 파일을 소스 코드 제어 시스템(예: git)에 체크 인합니다.
프로젝트에 Azure SWA(Static Web Apps) CLI를 설치합니다.
npm install -D @azure/static-web-apps-cliSWA CLI는 사이트를 클라우드에 배포하기 전에 로컬에서 개발하고 테스트하는 데 도움이 됩니다.
프로젝트에 대한 새 파일을 만들고 이름을
swa-cli.config.json으로 지정합니다.swa-cli.config.json파일은 사이트를 빌드하고 배포하는 방법을 설명합니다.이 파일이 만들어지면
npx swa init명령을 사용하여 해당 콘텐츠를 생성할 수 있습니다.npx swa init --yes배포용 애플리케이션을 빌드합니다.
npx swa buildSWA CLI를 사용하여 Azure에 로그인합니다.
npx swa login --resource-group swa-tutorial --app-name swa-demo-site이전 섹션에서 만든 것과 동일한 리소스 그룹 이름과 정적 웹앱 이름을 사용합니다. 로그인을 시도하면 필요한 경우 프로세스를 완료하기 위해 브라우저가 열립니다.
Warning
Angular v17 이상에서는 선택할 수 있는 출력 경로의 하위 디렉터리에 배포 가능한 파일을 배치합니다. SWA CLI는 디렉터리의 특정 위치를 알지 못합니다. 다음 단계에서는 이 경로를 올바르게 설정하는 방법을 보여 줍니다.
프로젝트의 dist/swa-angular-demo/browser 폴더에서 생성된 index.html 파일을 찾습니다.
SWA_CLI_OUTPUT_LOCATION환경 변수를 index.html 파일이 포함된 디렉터리로 설정합니다.export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
Azure에 사이트 배포
정적 웹앱에 코드를 배포합니다.
npx swa deploy --env production
애플리케이션을 배포하는 데 몇 분 정도 걸릴 수 있습니다. 완료되면 사이트의 URL이 표시됩니다.
대부분의 시스템에서는 사이트의 URL을 선택하여 기본 브라우저에서 열 수 있습니다.
리소스 정리(선택 사항)
다른 자습서를 계속하지 않는 경우 Azure 리소스 그룹 및 리소스를 제거합니다.
az group delete -n swa-tutorial
리소스 그룹을 제거하면 포함된 모든 리소스가 삭제됩니다. 이 작업은 취소할 수 없습니다.