연습 - GitHub Actions를 사용하여 API 게시

  • 4분

웹앱 및 API가 둘 다 로컬로 실행되고 있습니다. 이제 Azure Static Web Apps에 웹앱 및 API를 게시하겠습니다.

GitHub에 변경 내용 푸시

이전 연습에서는 API를 변경했습니다. 이제는 그러한 변경 내용을 api 분기에 커밋하고 GitHub에 푸시해 봅니다.

끌어오기 요청 만들기

api 분기를 GitHub에 푸시했습니다. 이제 GitHub 작업을 통해 웹앱과 API를 미리 보기 URL에 게시하려고 합니다. 따라서 다음 단계는 main 분기에 대해 끌어오기 요청을 만드는 것입니다.

  1. 브라우저를 엽니다.

  2. 리포지토리로 이동합니다.

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-blazor-app

  3. 끌어오기 요청 링크를 선택합니다.

  4. 새 끌어오기 요청을 선택합니다.

  5. base 드롭다운 목록에서 main 분기를 선택합니다.

  6. compare 드롭다운 목록에서 api 분기를 선택합니다.

  7. 끌어오기 요청 만들기를 선택합니다.

  8. 다시, 끌어오기 요청 만들기를 선택합니다.

이제 GitHub 작업이 트리거됩니다.

GitHub 작업 빌드 및 게시 감시

계속해서 리포지토리의 브라우저에서 GitHub 작업의 진행률을 감시할 수 있습니다. 다음 단계에 따라 진행률을 확인합니다.

  1. 작업 메뉴를 선택합니다.

  2. 워크플로 메뉴 아래에서 Azure Static Web Apps CI/CD 워크플로 항목을 선택합니다.

  3. 오른쪽의 작업 실행에서 최신(맨 위) 링크를 선택합니다.

  4. 빌드 및 배포 작업 링크를 선택합니다.

웹앱 및 API를 빌드하고 게시할 때 GitHub 작업의 진행률을 볼 수 있습니다.

미리 보기 URL로 이동합니다.

GitHub 작업이 완료되면 브라우저에서 실행 중인 앱을 볼 수 있습니다.

  1. 끌어오기 요청 메뉴를 선택합니다.

  2. 끌어오기 요청을 선택합니다.

  3. Azure Static Web Apps: 스테이지 사이트가 준비되었습니다. 여기에서 방문하세요. 메시지 다음에 나오는 링크를 선택합니다.

미리 보기 URL에는 하이픈, 숫자가 차례로 포함됩니다. 이 숫자는 직접 만든 끌어오기 요청의 끌어오기 요청 번호와 일치합니다. 직접 만든 모든 끌어오기 요청에 대해 고유하고 반복 가능한 미리 보기 URL이 생성됩니다. 지역은 미리 보기 URL을 생성하는 데에도 사용됩니다.

다음 단계

축하합니다. 웹앱과 API를 사용하여 첫 번째 Azure Static Web Apps 인스턴스를 만들었습니다. 만든 끌어오기 요청을 병합하면 Azure Static Web Apps에서 변경 내용을 프로덕션 앱에 자동으로 배포합니다.