소개

이전 기사 "Azure Static Web Apps를 사용해 보았습니다."에서 Azure Static Web Apps에서 GitHub를 이용한 자동 Build/Deploy에 대해 써 보았습니다.
모처럼이므로, 이번은 리포지토리 자체도 Azure(Azure DevOps)로 실시해 보려고 생각합니다.

DevOps 리포지토리 만들기

작업을 단순화하기 위해 이전 기사에서 만든 GitHub의 리포지토리에서 복제 (Import)하려고합니다.

Azure DevOps에 로그인하고 리포지토리에서 Import repository를 클릭합니다.

이전 기사에서 만든 GitHub의 URL을 지정하고 Import를 실행합니다.

※ 인증이 필요한 리포지토리의 경우는, 「Requires Authentication」의 체크 박스를 ON으로 해, 유저 ID와 패스워드를 입력하고 나서 Import를 실시해 주세요.

리소스 (Static Web Apps) 만들기

이전과 같이 만들겠지만 '배포 세부 정보'에서 '기타'를 선택하고 GitHub 이외의 리포지토리에서 작업을 가정하고 리소스를 만듭니다.



이 상태에서 만든 Static Web Apps에 액세스하면 다음과 같은 화면이 표시됩니다.
리포지토리 관련이 미설정이라는 경고군요.
따라서 Azure DevOps의 리포지토리와 파이프 라인을 함께 사용하려고합니다.

Azure DevOps에서 파이프라인 만들기

배포 토큰 얻기

파이프라인에 필요한 배포 토큰을 포털에서 가져옵니다.

Static Web Apps 개요에서 "배포 토큰 관리"를 선택하십시오.

배포 토큰 관리 뷰에서 배포 토큰을 복사하여 로컬에 저장합니다.

파이프라인 만들기

작성한 Azure DevOps 리포지토리(GitHub에서 가져온 리포지토리)에서 파이프라인을 만듭니다.

Set up build를 클릭하십시오.

Configure your pipeline에서 Node.js with Angular를 선택합니다.

빌드 후 Static Web Apps에 대한 Deploy 규칙을 추가합니다(24-30행).

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
　
trigger:
- main
　
pool:
vmImage: ubuntu-latest
　
steps:
- task: NodeTool@0
inputs:
versionSpec: '12.x'
displayName: 'Install Node.js'
　
- script: |
npm install -g @angular/[email protected]
npm install
ng build --prod
displayName: 'npm install and build'
　
- task: AzureStaticWebApp@0
inputs:
  app_location: "/" 
  api_location: ""
  output_location: "dist/appName"
env:
  azure_static_web_apps_api_token: $(deployment_token)

Static Web Apps에 배포하기 위한 토큰을 환경 변수로 등록

Variables를 클릭하십시오

New variable을 클릭하십시오

이름에 "deployment_token"을 입력하십시오

Value에 취득한 「배포 토큰」을 입력

Keep this value secret의 체크박스를 On으로

Save and run을 클릭하고 실행

성공적으로 종료되었음을 알 수 있습니다.

동작 확인

안전하게 Angular 페이지가 표시됩니다.

요약

이번에 Azure Static Web Apps와 Azure DevOps를 연계시켜 Angular 애플리케이션을 자동으로 Build/Deploy할 수 있었습니다. 다음 번에는 Azure Functions 사용 하고, API와의 제휴를 실시하려고 합니다.