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

  • 4분

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

GitHub에 변경 내용 푸시

이전 연습에서 API를 변경했습니다. 이러한 변경 내용을 API 분기에 커밋하고 다음 단계를 수행하여 GitHub에 푸시합니다.

  1. Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
  2. Git: 모두 커밋을 입력한 후 선택합니다. Visual Studio Code에서 모든 변경 내용을 자동으로 스테이징하고 직접 커밋하라는 메시지가 표시되면 [예]를 선택합니다.
  3. api 변경과 같은 커밋 메시지 입력
  4. F1 키를 눌러 명령 팔레트 열기
  5. Git: 푸시 명령을 입력하고 선택하세요
  6. 메시지가 표시되면 분기 'api'에 업스트림 분기가 없습니다. 이 분기를 게시하시겠습니까?확인 단추 누르기

끌어오기 요청 만들기

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

  1. 브라우저 열기

  2. 리포지토리로 이동

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. 끌어오기 요청 링크 선택

  4. 새 끌어오기 요청 단추 선택

  5. 기본 드롭다운에서 기본 분기 선택

  6. 비교 드롭다운에서 api 분기 선택

  7. 끌어오기 요청 만들기 단추 선택

  8. 다시, 두 번째 끌어오기 요청 만들기 단추를 선택합니다.

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

GitHub 작업 빌드 및 게시 감시

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

  1. 작업 메뉴 선택
  2. 워크플로 메뉴에서 Screenshot showing how to find the correct workflow. 주는 Azure Static Web Apps CI/CD 워크플로 항목 스크린샷을 선택합니다.
  3. 작업 실행 목록에서 위쪽 링크를 선택합니다.
  4. 빌드 및 배포 작업 링크를 선택합니다.

워크플로 페이지의 빌드 및 배포 단추를 보여 주는 스크린샷

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

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

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

  1. 끌어오기 요청 메뉴 선택
  2. 끌어오기 요청 선택
  3. 메시지 "Azure Static Web Apps: 스테이지 사이트가 준비되었습니다. 여기를 방문하세요" 뒤에 있는 링크를 선택하세요.

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

앵귤러 웹앱이 담긴 스크린샷.

React 웹앱을 보여 주는 스크린샷.

Svelte 웹 앱을 보여주는 스크린샷

vue 웹앱을 보여 주는 스크린샷

다음 단계

축하합니다. 웹앱과 API를 사용하여 첫 번째 Azure Static Web Apps 인스턴스를 만들었습니다.