GitHub Actions를 사용하여 API 게시

완료됨

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

Azure Static Web Apps 인스턴스를 만들고 main 분기를 감시하도록 요청했을 때 GitHub 작업이 생성되었습니다. GitHub 작업은 리포지토리의 기본 분기에 대한 변경 내용을 수신 대기하고, 커밋 또는 기본 끌어오기 요청을 감지하면 앱을 빌드하고 게시합니다.

API에 대한 폴더 위치를 제공한 Azure Static Web Apps 리소스를 만들 때 기억될 수 있습니다. api의 기본값을 제공했습니다. 그러나 해당 시점에는 api 폴더에 API가 없었으므로 Azure Static Web Apps는 API 게시를 시도하지 않았습니다.

이제 모든 것이 변경됩니다.

GitHub 작업 구성

.github/workflows 폴더에는 GitHub 작업 파일이 포함됩니다. 이 파일에는 웹앱, API 및 빌드 아티팩트의 위치 설정이 포함됩니다. Azure Static Web Apps 리소스를 만들 때 선택한 위치는 이제 다음과 같이 이 파일에 있습니다.

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

api_locationapi 폴더의 API를 가리키는 올바른 값으로 설정됩니다.

GitHub 작업 트리거

GitHub 작업이 main 분기의 변경을 검색하면 웹앱 및 API를 빌드하고 게시할 준비가 된 것입니다. GitHub 작업을 트리거하려면 직접 커밋하거나 기본 분기에 끌어오기 요청을 만들 수 있습니다. 기본 분기에서 검색된 변경 내용은 GitHub 작업을 트리거하여 라이브 웹 사이트의 동일한 URL에 앱을 게시합니다.

미리 보기 URL

라이브 웹 사이트에 게시하기 전에 스테이징 사이트에서 변경 내용을 확인하려는 경우가 있습니다. Azure Static Web Apps를 사용하면 미리 보기 URL을 통해 변경 내용의 미리 보기를 볼 수 있습니다. GitHub 작업이 감시하고 있는 분기에 대해 끌어오기 요청을 만들어 미리 보기 URL을 만들 수 있습니다. 라이브 웹 사이트는 영향을 받지 않습니다. 대신, 앱의 새 스테이징 버전이 만들어집니다. 다시 돌아가서 GitHub에서 끌어오기 요청을 검사 경우 대화 탭에 게시된 준비 버전에 대한 링크가 표시됩니다.

다음 표에서는 Azure Static Web Apps가 앱을 다양한 URL에 게시하는 방법을 보여 줍니다. 앱은 한 URL에 게시되지만 동일한 분기에 대한 끌어오기 요청은 다른 URL에 게시됩니다.

원본 설명 URL
main 분기 라이브 웹 사이트 URL https://purple-rain-062d03304.azurestaticapps.net/
끌어오기 요청 #5 미리 보기 URL https://purple-rain-062d03304-5.azurestaticapps.net/

현재 api 분기에서 작업하고 있습니다. api 분기에서 기본 분기로 끌어오기 요청을 만듭니다. main 분기에 대해 끌어오기 요청을 만들면 GitHub 작업은 앱을 미리 보기 URL에 게시합니다.

워크플로가 앱 빌드 및 배포를 완료하면 GitHub 봇은 사전 프로덕션 환경의 URL을 포함하는 주석을 끌어오기 요청에 추가합니다. 이 링크를 선택하면 단계적 변경 내용을 볼 수 있습니다.

다음으로, 끌어오기 요청을 만들고 스테이징된 버전의 앱을 방문합니다.