자습서: ARM 템플릿을 사용하여 Azure Static Web Apps 게시
이 문서에서는 ARM 템플릿(Azure Resource Manager 템플릿)을 사용하여 Azure Static Web Apps를 배포하는 방법을 보여줍니다.
이 자습서에서는 다음을 알아봅니다.
- Azure Static Web Apps에 대한 ARM 템플릿 만들기
- ARM 템플릿을 배포하여 Azure Static Web App 인스턴스 만들기
필수 조건
활성 Azure 계정: 계정이 없는 경우 체험 계정을 만들 수 있습니다.
GitHub 계정: 계정이 없는 경우 체험 GitHub 계정을 만들 수 있습니다.
ARM 템플릿용 편집기: 템플릿을 검토하고 편집하려면 JSON 편집기가 필요합니다. Azure Resource Manager 도구 확장이 포함된 Visual Studio Code ARM 템플릿을 편집하는 데 적합합니다. Visual Studio Code를 설치하고 구성하는 방법에 대한 지침은 빠른 시작: Visual Studio Code를 사용하여 ARM 템플릿 만들기를 참조하세요.
Azure CLI 또는 Azure PowerShell: ARM 템플릿을 배포하려면 명령줄 도구가 필요합니다. 설치 지침은 다음을 참조하세요.
GitHub 개인용 액세스 토큰 만들기
ARM 템플릿의 매개 변수 중 하나는 repositoryToken이며, 이를 통해 ARM 배포 프로세스가 정적 사이트 소스 코드를 보유하고 있는 GitHub 리포지토리와 상호 작용할 수 있습니다.
GitHub 계정 프로필(오른쪽 위 모서리에 있음)에서 설정을 선택합니다.
개발자 설정을 선택합니다.
개인용 액세스 토큰을 선택합니다.
새 토큰 생성을 선택합니다.
이름 필드에 이 토큰의 이름을 입력합니다(예: myfirstswadeployment).
토큰의 만료를 선택합니다. 기본값은 30일입니다.
리포지토리, 워크플로, 쓰기: 패키지등의 범위를 지정합니다.
토큰 생성을 선택합니다.
토큰 값을 복사하여 나중에 사용할 수 있도록 텍스트 편집기에 붙여넣습니다.
Important
이 토큰을 복사하여 안전한 곳에 보관해야 합니다. 이 토큰을 Azure Key Vault에 저장하고 ARM 템플릿에서 액세스하는 것이 좋습니다.
GitHub 리포지토리 만들기
이 문서에서는 GitHub 템플릿 리포지토리를 사용하여 쉽게 시작할 수 있습니다. 이 템플릿에는 Azure Static Web Apps를 통해 배포하는 데 사용되는 스타터 앱이 있습니다.
다음 위치로 이동하여 새 리포지토리를 만듭니다.
리포지토리 이름을 myfirstswadeployment로 지정
참고 항목
Azure Static Web Apps에는 웹앱을 만들기 위한 하나 이상의 HTML 파일이 필요합니다. 이 단계에서 만드는 리포지토리에는 단일 index.html 파일이 포함됩니다.
리포지토리 만들기를 선택합니다.
ARM 템플릿 만들기
필수 구성 요소가 준비되면 다음 단계는 ARM 배포 템플릿 파일을 정의하는 것입니다.
ARM 템플릿을 저장할 새 폴더를 만듭니다.
새 파일을 만들고, 이름을 azuredeploy.json으로 지정합니다.
다음 ARM 템플릿 조각을 azuredeploy.js에 붙여넣습니다.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "type": "string" }, "location": { "type": "string" }, "sku": { "type": "string" }, "skucode": { "type": "string" }, "repositoryUrl": { "type": "string" }, "branch": { "type": "string" }, "repositoryToken": { "type": "securestring" }, "appLocation": { "type": "string" }, "apiLocation": { "type": "string" }, "appArtifactLocation": { "type": "string" }, "resourceTags": { "type": "object" }, "appSettings": { "type": "object" } }, "resources": [ { "apiVersion": "2021-01-15", "name": "[parameters('name')]", "type": "Microsoft.Web/staticSites", "location": "[parameters('location')]", "tags": "[parameters('resourceTags')]", "properties": { "repositoryUrl": "[parameters('repositoryUrl')]", "branch": "[parameters('branch')]", "repositoryToken": "[parameters('repositoryToken')]", "buildProperties": { "appLocation": "[parameters('appLocation')]", "apiLocation": "[parameters('apiLocation')]", "appArtifactLocation": "[parameters('appArtifactLocation')]" } }, "sku": { "Tier": "[parameters('sku')]", "Name": "[parameters('skuCode')]" }, "resources":[ { "apiVersion": "2021-01-15", "name": "appsettings", "type": "config", "location": "[parameters('location')]", "properties": "[parameters('appSettings')]", "dependsOn": [ "[resourceId('Microsoft.Web/staticSites', parameters('name'))]" ] } ] } ] }새 파일을 만들고, 이름을 azuredeploy.parameters.json으로 지정합니다.
다음 ARM 템플릿 조각을 azuredeploy.parameters.json에 붙여넣습니다.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "value": "myfirstswadeployment" }, "location": { "value": "Central US" }, "sku": { "value": "Free" }, "skucode": { "value": "Free" }, "repositoryUrl": { "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>" }, "branch": { "value": "main" }, "repositoryToken": { "value": "<YOUR-GITHUB-PAT>" }, "appLocation": { "value": "/" }, "apiLocation": { "value": "" }, "appArtifactLocation": { "value": "src" }, "resourceTags": { "value": { "Environment": "Development", "Project": "Testing SWA with ARM", "ApplicationName": "myfirstswadeployment" } }, "appSettings": { "value": { "MY_APP_SETTING1": "value 1", "MY_APP_SETTING2": "value 2" } } } }다음 매개 변수를 업데이트합니다.
매개 변수 예상 값 repositoryUrlStatic Web Apps GitHub 리포지토리에 URL을 제공합니다. repositoryTokenGitHub PAT 토큰을 제공합니다. 다음 단계에서 배포를 실행하기 전에 업데이트를 저장합니다.
배포 실행
템플릿을 배포하려면 Azure CLI 또는 Azure PowerShell이 필요합니다.
Azure에 로그인
템플릿을 배포하려면 Azure CLI 또는 Azure PowerShell에 로그인합니다.
az login
Azure 구독이 여러 개 있는 경우 사용할 구독을 선택합니다. <SUBSCRIPTION-ID>을 사용자의 구독 정보로 바꿉니다.
az account set --subscription <SUBSCRIPTION-ID>
리소스 그룹 만들기
템플릿을 배포하는 경우 관련 리소스가 포함된 그룹을 지정합니다. 배포 명령을 실행하기 전에 먼저 Azure CLI 또는 Azure PowerShell을 사용하여 리소스 그룹을 만듭니다.
참고 항목
이 문서의 CLI 예제는 Bash 셸에 대해 작성되었습니다.
resourceGroupName="myfirstswadeployRG"
az group create \
--name $resourceGroupName \
--location "Central US"
템플릿 배포
이러한 배포 옵션 중 하나를 사용하여 템플릿을 배포합니다.
az deployment group create \
--name DeployLocalTemplate \
--resource-group $resourceGroupName \
--template-file <PATH-TO-AZUREDEPLOY.JSON> \
--parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
--verbose
Azure CLI를 사용하여 템플릿을 배포하는 방법에 대해 자세히 알아보려면 ARM 템플릿과 Azure CLI를 사용하여 리소스 배포를 참조하세요.
웹 사이트 보기
정적 앱을 배포하는 데는 두 가지 측면이 있습니다. 첫 번째는 앱을 구성하는 기본 Azure 리소스를 프로비저닝하는 것입니다. 두 번째는 애플리케이션을 빌드 및 게시하는 GitHub Actions 워크플로입니다.
새 정적 사이트로 이동하려면 먼저 배포 빌드가 실행을 완료해야 합니다.
Static Web Apps 개요 창에는 웹앱과 상호 작용하는 데 도움이 되는 일련의 링크가 표시됩니다.
GitHub Actions 실행 상태를 확인하려면 여기를 클릭하세요.라는 배너를 클릭하면 리포지토리에 대해 실행 중인 GitHub Actions로 이동됩니다. 배포 작업이 완료되었는지 확인되면 생성된 URL을 통해 웹 사이트로 이동할 수 있습니다.
GitHub Actions 워크플로가 완료되면 URL 링크를 클릭하여 새 탭에서 웹 사이트를 열 수 있습니다.
리소스 정리
리소스 그룹을 삭제하여 배포된 리소스를 정리합니다.
- Azure Portal의 왼쪽 메뉴에서 리소스 그룹을 선택합니다.
- 이름으로 필터링 필드에서 리소스 그룹 이름을 입력합니다.
- 해당 리소스 그룹 이름을 선택합니다.
- 위쪽 메뉴에서 리소스 그룹 삭제를 선택합니다.