다음을 통해 공유

자습서: Azure Static Web Apps에 GitLab 리포지토리 배포

Azure Static Web Apps에는 다양한 공급자와 작업할 수 있는 유연한 배포 옵션이 있습니다. 이 문서에서는 GitLab에서 호스트되는 웹 애플리케이션을 Azure Static Web Apps에 배포합니다.

이 자습서에서는 다음을 알아봅니다.

  • GitLab으로 리포지토리 가져오기
  • 정적 웹앱 만들기
  • Azure Static Web Apps에 배포하도록 GitLab 리포지토리 구성

필수 조건

리포지토리 만들기

이 문서에서는 GitHub 리포지토리를 원본으로 사용하여 코드를 GitLab 리포지토리로 가져옵니다.

  1. GitLab 계정에 로그인하고 https://gitlab.com/projects/new#import_project로 이동합니다.

  2. URL로 리포지토리를 선택합니다.

  3. Git 리포지토리 URL 상자에 선택한 프레임워크의 리포지토리 URL을 입력합니다.

  4. 프로젝트 동적 필드 상자에 my-first-static-web-app를 입력합니다.

  5. 프로젝트 만들기를 선택하고 리포지토리가 설정되는 동안 잠시 기다립니다.

정적 웹앱 만들기

이제 리포지토리가 생성되었으므로 Azure Portal에서 정적 웹앱을 만들 수 있습니다.

  1. Azure Portal로 이동합니다.

  2. 리소스 만들기를 선택합니다.

  3. Static Web Apps를 검색합니다.

  4. Static Web Apps를 선택합니다.

  5. 만들기를 실행합니다.

  6. 기본 사항 섹션에서 새 앱을 구성하는 것으로 시작합니다.

    설정 값
    Azure 구독 Azure 구독을 선택합니다.
    리소스 그룹 새로 만들기 링크를 선택하고 static-web-apps-gitlab을 입력합니다.
    이름 my-first-static-web-app을 입력합니다.
    플랜 유형 무료를 선택합니다.
    Source 기타를 선택합니다.

  7. 검토 + 만들기를 선택합니다.

  8. 만들기를 실행합니다.

  9. 리소스로 이동을 선택합니다.

  10. 배포 토큰 관리를 선택합니다.

  11. 배포 토큰 값을 복사하고 나중에 사용할 수 있도록 편집기에 따로 보관합니다.

  12. 배포 토큰 관리 창에서 닫기를 선택합니다.

GitLab에서 파이프라인 작업 만들기

이제 배포 토큰이 있으므로 변경 시 사이트 빌드 및 배포를 담당하는 워크플로 작업을 추가합니다.

배포 토큰 추가

다음 단계를 진행할 때 환경 섹션에 대해 *을 선택했는지 확인합니다. 기본값은 all인 것처럼 보일 수 있지만 드롭다운을 선택하고 수동으로 *를 선택해야 합니다.

  1. GitLab의 리포지토리로 이동합니다.

  2. 설정을 선택합니다.

  3. CI/CD를 선택합니다.

  4. 변수 섹션 옆에 있는 확장을 선택합니다.

  5. 변수 추가를 선택합니다.

  6. 키 상자에 DEPLOYMENT_TOKEN을 입력합니다.

  7. 값 상자에 이전 단계에서 별도로 설정한 배포 토큰 값을 붙여넣습니다.

  8. 변수 추가를 선택합니다.

파일 추가

  1. GitLab의 리포지토리 기본 화면으로 돌아갑니다.

  2. 편집 단추를 선택하고 웹 IDE를 선택합니다.

  3. 분기 드롭다운에서 기본 분기가 선택되었는지 확인합니다.

  4. 리포지토리의 루트에 .gitlab-ci.yml이라는 새 파일을 만듭니다. (파일 확장자가 .yml인지 확인합니다.)

  5. 파일에 다음 YAML을 입력합니다.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    다음 구성 속성은 .gitlab-ci.yml 파일에서 정적 웹앱을 구성하는 데 사용됩니다.

    $CI_PROJECT_DIR 변수는 빌드 프로세스 중에 리포지토리의 루트 폴더 위치에 매핑됩니다.

    속성 Description 예 Required
    APP_PATH 애플리케이션 코드의 위치입니다. 애플리케이션 소스 코드가 리포지토리의 루트에 있는 경우 $CI_PROJECT_DIR/을 입력하고 애플리케이션 코드가 $CI_PROJECT_DIR/app 폴더에 있는 경우 app을 입력합니다. 예
    API_PATH Azure Functions 코드의 위치입니다. 앱 코드가 $CI_PROJECT_DIR/api라는 폴더에 있으면 api를 입력합니다. 아니요
    OUTPUT_PATH APP_PATH에 상대적인 빌드 출력 폴더의 위치입니다. 애플리케이션 소스 코드가 $CI_PROJECT_DIR/app에 있고, 빌드 스크립트에서 $CI_PROJECT_DIR/app/build 폴더에 파일을 출력하는 경우 $CI_PROJECT_DIR/app/build를 OUTPUT_PATH 값으로 설정합니다. 아니요
    API_TOKEN 배포용 API 토큰입니다. API_TOKEN: $DEPLOYMENT_TOKEN 예

  6. 기본 분기에 변경 내용을 커밋하고 웹 IDE를 닫습니다.

  7. 사이트로 돌아가서 설정>CI/CD>일반 파이프라인 메뉴 항목을 선택하여 배포 진행률을 확인합니다.

배포가 완료되면 웹 사이트를 볼 수 있습니다.

웹 사이트 보기

정적 앱을 배포하는 데는 두 가지 측면이 있습니다. 첫 번째 단계에서는 앱을 구성하는 기본 Azure 리소스를 만듭니다. 두 번째는 애플리케이션을 빌드하고 게시하는 GitLab 워크플로입니다.

새 정적 사이트로 이동하려면 먼저 배포 빌드가 실행을 완료해야 합니다.

Static Web Apps 개요 창에는 웹앱과 상호 작용하는 데 도움이 되는 일련의 링크가 표시됩니다.

  1. Azure Portal에서 정적 웹앱으로 돌아갑니다.

  2. 개요 창으로 이동합니다.

  3. URL 레이블 아래의 링크를 선택합니다. 웹 사이트가 새 탭에 로드됩니다.

리소스 정리

이 애플리케이션을 계속 사용하지 않으려면 리소스 그룹을 제거하여 Azure Static Web Apps 인스턴스 및 모든 관련 서비스를 삭제할 수 있습니다.

  1. 개요 섹션에서 static-web-apps-gitlab 리소스 그룹을 선택합니다.

  2. 리소스 그룹 개요 상단에서 리소스 그룹 삭제를 선택합니다.

  3. "static-web-apps-gitlab"을 삭제하려고 하나요? 확인 대화 상자에 리소스 그룹 이름 static-web-apps-gitlab을 입력합니다.

  4. 삭제를 선택합니다.

리소스 그룹을 삭제하는 프로세스를 완료하는 데 몇 분 정도 걸릴 수 있습니다.

다음 단계

API 추가

  • Last updated on