빠른 시작: 첫 번째 정적 웹앱 빌드
Azure Static Web Apps는 Azure DevOps 또는 GitHub 리포지토리에서 앱을 빌드하여 프로덕션 환경에 웹 사이트를 게시합니다. 이 빠른 시작에서는 Azure Portal을 사용하여 웹 애플리케이션을 Azure Static 웹앱에 배포합니다.
필수 조건
- Azure 구독이 아직 없는 경우 평가판 계정을 만듭니다.
- Azure DevOps 조직
리포지토리 만들기
이 문서에서는 GitHub 템플릿 리포지토리를 사용하여 쉽게 시작할 수 있습니다. 이 템플릿에는 Azure Static Web Apps에 배포할 스타터 앱이 있습니다.
- 다음 위치로 이동하여 새 리포지토리를 만듭니다.
- 리포지토리 이름을 my-first-static-web-app으로 지정합니다.
참고 항목
Azure Static Web Apps에는 웹앱을 만들기 위한 하나 이상의 HTML 파일이 필요합니다. 이 단계에서 만드는 리포지토리에는 단일 index.html 파일이 포함됩니다.
리포지토리 만들기를 선택합니다.
리포지토리 만들기
이 문서에서는 Azure DevOps 템플릿 리포지토리를 사용하여 쉽게 시작할 수 있습니다. 이 리포지토리에는 Azure Static Web Apps를 통해 배포하는 데 사용되는 스타터 앱이 있습니다.
Azure DevOps에 로그인합니다.
새 리포지토리를 선택합니다.
새 프로젝트 만들기 창에서 고급 메뉴를 확장하고 다음을 선택합니다.
설정 값 프로젝트 my-first-web-static-app을 입력합니다. 표시 유형 프라이빗을 선택합니다. 버전 제어 Git을 선택합니다. 작업 항목 프로세스 개발 방법에 가장 적합한 옵션을 선택합니다. 만들기를 실행합니다.
리포지토리 메뉴 항목을 선택합니다.
파일 메뉴 항목을 선택합니다.
리포지토리 가져오기 카드 아래에서 가져오기를 선택합니다.
선택한 프레임워크의 리포지토리 URL을 복사하여 복제 URL 상자에 붙여넣습니다.
가져오기를 선택하고 가져오기 프로세스가 완료되기를 기다립니다.
정적 웹앱 만들기
이제 리포지토리가 생성되었으므로 Azure Portal에서 정적 웹앱을 만들 수 있습니다.
- Azure Portal로 이동합니다.
- 리소스 만들기를 선택합니다.
- Static Web Apps를 검색합니다.
- Static Web Apps를 선택합니다.
- 만들기를 실행합니다.
기본 사항 섹션에서 새 앱을 구성하고 GitHub 리포지토리에 연결하여 시작합니다.
| 설정 | 값 |
|---|---|
| Subscription | Azure 구독을 선택합니다. |
| 리소스 그룹 | 새로 만들기 링크를 선택하고 텍스트 상자에 static-web-apps-test를 입력합니다. |
| 이름 | 텍스트 상자에 my-first-static-web-app을 입력합니다. |
| 플랜 유형 | 무료를 선택합니다. |
| Source | 필요한 경우 GitHub를 선택하고 GitHub에 로그인합니다. |
필요한 경우 GitHub에 로그인하고 다음 리포지토리 정보를 입력합니다.
| 설정 | 값 |
|---|---|
| 조직 | 조직을 선택합니다. |
| 리포지토리 | my-first-web-static-app을 선택합니다. |
| Branch | 기본을 선택합니다. |
참고 항목
리포지토리 목록이 표시되지 않는 경우:
GitHub에서 Azure Static Web Apps에 권한을 부여해야 할 수 있습니다. GitHub 프로필로 이동하여 설정 > 애플리케이션 > 권한 부여된 OAuth 앱으로 이동하고 Azure Static Web Apps를 선택한 다음, 권한 부여를 선택합니다.
Azure DevOps 조직에서 Azure Static Web Apps에 권한을 부여해야 할 수 있습니다. 사용 권한을 부여하려면 조직의 소유자여야 합니다. OAuth를 통해 타사 애플리케이션 액세스를 요청합니다. 자세한 내용은 OAuth 2.0을 사용하여 REST API에 대한 액세스 권한 부여를 참조하세요.
기본 사항 섹션에서 새 앱을 구성하고 Azure DevOps 리포지토리에 연결하여 시작합니다.
| 설정 | 값 |
|---|---|
| Subscription | Azure 구독을 선택합니다. |
| 리소스 그룹 | 새로 만들기 링크를 선택하고 텍스트 상자에 static-web-apps-test를 입력합니다. |
| 이름 | 텍스트 상자에 my-first-static-web-app을 입력합니다. |
| 플랜 유형 | 무료를 선택합니다. |
| Azure Functions 및 준비 정보 | 가장 가까운 지역을 선택합니다. |
| Source | Azure DevOps를 선택합니다. |
| 조직 | 조직을 선택합니다. |
| 프로젝트 | 프로젝트를 선택합니다. |
| 리포지토리 | my-first-web-static-app을 선택합니다. |
| Branch | 기본을 선택합니다. |
참고 항목
사용 중인 분기가 보호되지 않고 push 명령을 실행할 수 있는 충분한 권한이 있는지 확인합니다. 확인하려면 DevOps 리포지토리로 이동하고 리포지토리 ->분기로 이동하여 추가 옵션을 선택합니다. 다음으로 분기를 선택한 다음, 분기 정책을 선택하여 필요한 정책이 사용하도록 설정되지 않았는지 확인합니다.
빌드 세부 정보 섹션에서 선호하는 프런트 엔드 프레임워크와 관련된 구성 세부 정보를 추가합니다.
- 빌드 사전 설정 드롭다운에서 사용자 지정을 선택합니다.
- 앱 위치 상자에 ./src를 입력합니다.
- Api 위치 상자를 비워 둡니다.
- 출력 위치 상자에 ./src를 입력합니다.
검토 + 만들기를 선택합니다.
만들기를 선택합니다.
참고 항목
앱을 만든 후 이러한 값을 변경하려면 워크플로 파일을 편집하면 됩니다.
만들기를 실행합니다.
리소스로 이동을 선택합니다.
웹 사이트 보기
정적 앱을 배포하는 데는 두 가지 측면이 있습니다. 먼저 앱을 구성하는 기본 Azure 리소스를 만듭니다. 두 번째는 애플리케이션을 빌드하고 게시하는 워크플로입니다.
새 정적 사이트로 이동하려면 먼저 배포 빌드가 실행을 완료해야 합니다.
Static Web Apps 개요 창에는 웹앱과 상호 작용하는 데 도움이 되는 일련의 링크가 표시됩니다.
GitHub Actions 실행 상태를 확인하려면 여기를 선택하세요.라는 배너를 선택하면 리포지토리에 대해 실행 중인 GitHub Actions로 이동됩니다. 배포 작업이 완료되었는지 확인되면 생성된 URL을 통해 웹 사이트로 이동할 수 있습니다.
GitHub Actions 워크플로가 완료되면 URL 링크를 선택하여 새 탭에서 웹 사이트를 열 수 있습니다.
워크플로가 완료되면 URL 링크를 선택하여 새 탭에서 웹 사이트를 열 수 있습니다.
리소스 정리
이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web App 인스턴스를 삭제할 수 있습니다.
- Azure Portal을 엽니다.
- 위쪽 검색 창에서 my-first-web-static-app을 검색합니다.
- 앱 이름을 선택합니다.
- 삭제를 선택합니다.
- 예를 선택하여 삭제 작업을 확인합니다(이 작업은 완료하는 데 몇 분 정도 걸릴 수 있음).