Azure 정적 웹 응용 프로그램을 Azure DevOps 파이핑과 함께 사용

지난해 마이크로소프트는 정적 응용 프로그램을 서버가 없는 Azure 기능 백엔드와 묶는 좋은 방법Azure Static Web Apps을 발표했다.GitHub 저장소가 있다면, Azure 정적 웹 응용 프로그램이 당신을 포함하고 있습니다.Azure에서 실례를 만들고 GitHub 저장소를 선택하십시오. Azure에서 GitHub 작업 CI/CD 파이프를 만듭니다. 요청을 main 지점에 통합하면 이 파이프는 자동으로 터치됩니다.그것은 여전히 미리보기 중이지만, GA의 발표는 이미 멀지 않았다.
돈을 빌리다from a famous Henry Ford quote:GitHub라면 환매 협의를 통해 얻을 수 있습니다.
이런 상황은 이미 바뀌었다.Azure 정적 웹 응용 프로그램은 이제 Azure DevOps를 지원합니다.Azure DevOps에 저장소가 있다면 Azure Pipelines YAML 파일을 연결하면 Azure 정적 웹 응용 프로그램에 응용 프로그램을 구축하고 배치할 수 있습니다.GitHub 환경처럼 유선형이고 우아하지는 않지만 배포 토큰을 수동으로 구성해야 하고 자동 등장 환경도 얻을 수 없기 때문에 Azure DevOps 고객의 대체 방안보다 낫다. (즉, Azure 정적 웹 응용 프로그램은 전혀 지원되지 않는다.)
작년 가을 이후 나는 줄곧 Blazorblog posts와 accompanying repository로 Azure 정적 웹 응용 프로그램을 시험적으로 사용해 왔다.이 기사에서는 지원을 시도하기 위해 Azure DevOps에서 저장소 코드를 배치합니다.

선결 조건

시작하기 전에 활성 Azure DevOps 프로젝트가 있다고 가정해 보겠습니다.없으면check out the docs.
로컬 시스템에서 Git 저장소를 가져오려면 다음 절차를 따르십시오.

Azure DevOps 저장소로 이동합니다.

가져오기를 선택합니다.

Git 저장소의 URL을 입력합니다.

가져오기를 다시 선택합니다.

Azure 정적 웹 응용 프로그램 리소스 만들기

시작하려면 Azure 포털에서 새로운 Azure 정적 웹 응용 프로그램을 만듭니다.

Azure 포털portal.azure.com로 이동합니다.

맨 위에 있는 전역 검색 상자에서 Azure 정적 웹 응용 프로그램(미리 보기)을 검색하고 선택합니다.

생성을 선택합니다.

가입, 리소스 그룹, 이름 및 지역에 대한 세부 정보를 입력합니다.배치에 대한 자세한 정보 아래 다른 것을 누르십시오.이 옵션은 자동 GitHub 스트림을 지나 Azure에 필요 없음을 알려줍니다.

완료되면 보기 + 생성 을 클릭한 다음 생성 을 클릭합니다.배치가 완료되면 새로운 자원으로 이동합니다.이제 Azure DevOps와 함께 사용할 배포 토큰이 필요합니다.

액세스 배포 토큰

리소스를 만들 때 기타를 클릭했기 때문에 Azure 정적 웹 응용 프로그램이 Azure DevOps와 함께 작동하려면 수동 작업이 필요합니다.이 동작을 실행하려면 관리 배치 영패를 선택하십시오.

나중에 사용할 수 있도록 영패를 텍스트 편집기로 복사합니다.(또는 마음에 들면 운영체제clipboard history features를 사용할 수 있다.)

Azure 파이핑 작업 생성하기

이제 Azure DevOps에서 Azure 파이핑 작업을 생성해야 합니다.
Azure DevOps 저장소에서 구성 설정을 선택합니다.

구성 파이핑에서 Starter pipeline을 선택합니다.

파이프라인에서 기존 YAML 컨텐트를 새 AzureStaticWebApp 작업으로 대체합니다.주의 사항inputs 섹션:

app_location 응용 프로그램 코드의 루트를 지정합니다.Blazor 클라이언트 카탈로그Blazor.Client에 있습니다.

api_location는Azure 함수 코드의 위치입니다.여기 조심해!지정된 위치에서 API를 찾을 수 없는 경우 생성은 이 API가 존재하지 않는 것으로 가정하고 자동 실패합니다.(나만 믿어...나 개인적으로 알아.)

output_location는 app_location에 대한 생성 출력 디렉터리를 포함한다.나에게 정적 파일은 wwwroot에 있다.

우리는 곧 azure_static_web_app_api_token값을 연구할 것이다.
이것은 내 YAML 파일입니다.GitHub Action보다 더 깨끗하다는 것을 알게 될 것이다.)

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: AzureStaticWebApp@0
    inputs:
      app_location: "BlastOff.Client"
      api_location: "BlastOff.Api"
      output_location: "wwwroot"
    env:
      azure_static_web_apps_api_token: $(deployment_token)

파이프라인을 시작하기 전에 Azure 정적 웹 응용 프로그램 배치 토큰을 Azure 파이프 변수로 추가해야 합니다.이를 위해 변수를 선택하고 deployment token이라는 변수를 만듭니다. (이것이 바로 이름의 값이라고 가정하십시오. azure_static_web_apps_api_token마지막으로 Keep this value secret을 선택하고 OK 를 클릭합니다.

저장을 선택하고 저장 및 실행을 선택합니다.운이 좋으면 첫 번째 시도는 실패할 수도 있다.축하합니다!이제 Azure DevOps 저장소에서 구축된 Azure 정적 웹 응용 프로그램 웹 사이트가 있습니다.

참고: 가장 작은 Azure 파이핑 YAML 파일

나는 Azure 파이프 YAML 파일의 간결성에 주의를 기울일 수 없었다.다음은 파일의 다른 뷰입니다.

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: AzureStaticWebApp@0
    inputs:
      app_location: "BlastOff.Client"
      api_location: "BlastOff.Api"
      output_location: "wwwroot"
    env:
      azure_static_web_apps_api_token: $(deployment_token)

Azure 정적 웹 응용 프로그램에서 작성한 GitHub Actions YAML 파일의 모양과 비교합니다.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/[email protected]
        with:
          azure_static_web_apps_api_token: $
          repo_token: $ 
          action: "upload"
          app_location: "BlastOff.Client"
          api_location: "BlastOff.Api"
          output_location: "wwwroot"

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/[email protected]
        with:
          azure_static_web_apps_api_token: $
          action: "close"

두 개의 배치 절차는 유사하지만 GitHub 작업 파일에는 관리 요청과 관련된 잡음이 많다.따라서 자주 묻는 질문은 다음과 같습니다. Azure Pipelines 파일에 PR 트리거 단계를 추가해야 합니까?아니요!내 테스트에서, 나는pull 요청을 main 에 통합시키고, YAML 파일을 수동으로 업데이트할 필요가 없는 성공적인 구축과 배치를 시작했다.

Azure DevOps 또는 GitHub에서 Azure 정적 웹 애플리케이션을 사용해야 합니까?

Azure 정적 웹 응용 프로그램을 배치할 수 있는 두 가지 방법이 있습니다. (더 있을 수도 있습니다.) 어떤 옵션을 선택해야 할지 알고 싶을 수도 있습니다.
Microsoft는 경쟁사 코드 관리/DevOps 솔루션을 장기간 지원하지 않습니다.Azure DevOps는 곧 탈락하지는 않겠지만 장기 투자는 GitHub에 있을 것이다.새 응용 프로그램을 구축하고 Azure DevOps에 의존하지 않는 경우 GitHub의 Azure 정적 웹 응용 프로그램을 사용하는 것이 출구입니다.하지만 많은 사람들에게 Azure DevOps를 사용한다면, Azure DevOps의 강력한 기업 기능은 GitHub이 분야에서 성숙될 때까지 당신을 떠나기 어려울 것이다. 이것은 좋은 해결 방안이다.

마무리

이 문서에서는 Azure DevOps 파이프라인을 사용하여 Azure 정적 웹 응용 프로그램을 배치하는 방법을 보여 줍니다.Azure 정적 웹 응용 프로그램 리소스를 만들고 배포 토큰을 검색했으며 Azure Pipelines 작업을 만들고 Azure 정적 웹 응용 프로그램에서 GitHub 또는 Azure DevOps를 사용하는 이유를 탐색했습니다.