다음을 통해 공유


빠른 시작: Azure 개발자 CLI 템플릿을 사용하여 GitHub Codespaces에서 Azure로 Python 웹앱 만들기 및 배포

이 빠른 시작에서는 Python 웹 및 데이터베이스 솔루션을 만들고 Azure에 배포하는 가장 쉽고 빠른 방법을 안내합니다. 이 빠른 시작의 지침에 따라 다음을 수행합니다.

  • 빌드하려는 Python 웹 프레임워크, Azure 데이터베이스 플랫폼 및 Azure 웹 호스팅 플랫폼을 기반으로 Azure 개발자 CLI(azd) 템플릿을 선택합니다.
  • 선택한 템플릿에서 생성된 코드를 포함하는 새 GitHub Codespace를 azd 만듭니다.
  • GitHub Codespaces 및 온라인 Visual Studio Code의 bash 터미널을 사용합니다. 터미널을 사용하면 Azure Developer CLI 명령을 사용하여 템플릿을 실행 azd 하여 샘플 웹앱 및 데이터베이스를 만들고 필요한 Azure 리소스를 만들고 구성한 다음, 샘플 웹앱을 Azure에 배포할 수 있습니다.
  • GitHub Codespace에서 웹앱을 편집하고 명령을 사용하여 azd 다시 배포합니다.
  • azd 명령을 사용하여 Azure 리소스를 클린.
  • GitHub Codespace를 닫고 다시 엽니다.
  • GitHub 리포지토리에 새 코드를 게시합니다.

이 자습서를 완료하는 데 25분도 채 걸리지 않습니다. 완료되면 사용자 지정 코드를 사용하여 새 프로젝트 수정을 시작할 수 있습니다.

Python 웹앱 개발을 위한 이러한 azd 템플릿에 대해 자세히 알아보려면 다음을 수행합니다.

필수 조건

Important

GitHub Codespaces와 Azure는 모두 유료 구독 기반 서비스입니다. 일부 무료 할당 후에는 이러한 서비스 사용에 대한 요금이 청구될 수 있습니다. 이 빠른 시작에 따라 이러한 할당 또는 청구에 영향을 줄 수 있습니다. 가능 azd 하면 가장 저렴한 옵션 계층을 사용하여 템플릿을 빌드했지만 일부는 무료가 아닐 수 있습니다. Azure 가격 계산기를 사용하여 비용을 더 잘 이해합니다. 자세한 내용은 GitHub Codespaces 가격 책정 을 참조하세요.

템플릿을 선택하고 코드스페이스 만들기

azd 빌드하려는 Python 웹 프레임워크, Azure 웹 호스팅 플랫폼 및 Azure 데이터베이스 플랫폼을 기반으로 템플릿을 선택합니다.

  1. 다음 템플릿 목록에서 새 웹 애플리케이션에서 사용하려는 기술을 사용하는 템플릿을 선택합니다.

    템플릿 웹 프레임워크 데이터베이스 호스팅 플랫폼 새 코드 영역
    azure-django-postgres-flexible-aca Django PostgreSQL 유연한 서버 Azure Container Apps 새 코드 영역
    azure-django-postgres-flexible-appservice Django PostgreSQL 유연한 서버 Azure App Service 새 코드 영역
    azure-django-cosmos-postgres-aca Django Cosmos DB(PostgreSQL 어댑터) Azure Container Apps 새 코드 영역
    azure-django-cosmos-postgres-appservice Django Cosmos DB(PostgreSQL 어댑터) Azure App Service 새 코드 영역
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL 추가 기능 Azure Container Apps 새 코드 영역

  1. 편의를 위해 각 테이블의 마지막 열에는 새 Codespace를 만들고 GitHub 계정에서 템플릿을 초기화하는 링크가 azd 포함되어 있습니다. 설치 프로세스를 시작하기 위해 선택한 템플릿 이름 옆에 있는 "새 코드 영역" 링크에서 마우스 오른쪽 단추를 클릭하고 "새 탭에서 열기"를 선택합니다.

    이 프로세스 중에 GitHub 계정에 로그인하라는 메시지가 표시될 수 있으며 Codespace를 만들 것인지 확인하라는 메시지가 표시될 수 있습니다. "코드스페이스 만들기" 단추를 선택하여 "코드스페이스 설정" 페이지를 확인합니다.

  2. 몇 분 후에 Python 웹 템플릿이 탐색기 보기에서 작업 영역으로 로드된 새 브라우저 탭에 웹 기반 버전의 Visual Studio Code가 로드됩니다.

Azure에 인증하고 azd 템플릿 배포

이제 새로 생성된 코드를 포함하는 GitHub Codespace가 있으므로 Codespace 내에서 유틸리티를 사용하여 azd 코드를 Azure에 게시합니다.

  1. 웹 기반 Visual Studio Code에서 터미널은 기본적으로 열려 있어야 합니다. 그렇지 않은 경우 타일 키를 ~ 사용하여 터미널을 엽니다. 또한 기본적으로 터미널은 bash 터미널이어야 합니다. 그렇지 않은 경우 터미널 창의 오른쪽 위 영역에서 bash로 변경합니다.

  2. bash 터미널에서 다음 명령을 입력합니다.

    azd auth login
    

    azd auth login 는 Azure 계정에 Codespace를 인증하는 프로세스를 시작합니다.

    Start by copying the next code: XXXXXXXXX
    Then press enter and continue to log in from your browser...
    
    Waiting for you to complete authentication in the browser...
    
  3. 다음을 포함하는 지침을 따릅니다.

    • 생성된 코드 복사
    • Enter 키를 선택하여 새 브라우저 탭을 열고 텍스트 상자에 코드 붙여넣기
    • 목록에서 Azure 계정 선택
    • Microsoft Azure CLI에 로그인하려고 하는지 확인
  4. 성공하면 다음 메시지가 터미널의 Codespaces 탭에 다시 표시됩니다.

    Device code authentication completed.
    Logged in to Azure.
    
  5. 다음 명령을 입력하여 Azure에 새 애플리케이션을 배포합니다.

    azd up
    

    이 프로세스 중에 다음을 수행하라는 메시지가 표시됩니다.

    • 새 환경 이름 입력
    • [화살표를 사용하여 이동하고 필터링하려면 입력]을 사용할 Azure 구독을 선택합니다.
    • 사용할 Azure 위치 선택: [화살표를 사용하여 이동하고 필터링하려면 입력]

    이러한 질문에 대답하면 출력 azd 은 배포가 진행 중임을 나타냅니다.

    Important

    azd up 성공적으로 완료되면 샘플 웹앱은 공용 인터넷에서 사용할 수 있으며 Azure 구독은 생성된 모든 리소스에 대한 요금이 부과되기 시작합니다. 템플릿의 azd 작성자는 의도적으로 저렴한 계층을 선택했지만 무료 계층의 가용성이 제한된 경우가 많기 때문에 반드시 무료 계층은 선택하지 않았습니다. 샘플 웹앱 작업을 완료한 후에는 에 의해 azd up만들어진 모든 서비스를 제거하는 데 사용합니다azd down.

    결제에 사용할 Azure 구독을 선택하라는 메시지가 표시되면 지침에 따라 사용할 Azure 위치를 선택합니다. 지리적으로 가까운 지역을 선택합니다.

    azd up 여러 Azure 서비스를 프로비전하고 배포하기 때문에 실행하는 데 몇 분 정도 걸릴 수 있습니다. 진행률이 표시되면 오류를 확인합니다. 오류가 표시되면 이 문서의 맨 아래에 있는 문제 해결 섹션을 참조하세요.

  6. azd up 성공적으로 완료되면 유사한 출력이 표시됩니다.

    (✓) Done: Deploying service web
    - Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/
    
    SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
    You can view the resources created under the resource group xxxxx-rg in Azure Portal:
    https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview
    

    기본 화면 또는 오류 화면이 표시되면 앱이 시작될 수 있습니다. 문제를 해결하기 전에 문제가 자체적으로 해결되는지 확인하려면 5-10분 정도 기다립니다.

    단어 뒤의 첫 번째 URL을 - Endpoint: Ctrl+클릭하여 Azure에서 라이브로 실행되는 샘플 웹앱 프로젝트를 확인합니다.

  7. Ctrl 키를 누른 채 이전 단계의 두 번째 URL을 클릭하여 Azure Portal에서 프로비전된 리소스를 봅니다.

편집 및 다시 배포

다음 단계는 웹앱을 약간 변경한 다음 다시 배포하는 것입니다.

  1. Visual Studio Code가 포함된 브라우저 탭으로 돌아가 Visual Studio Code의 탐색기 보기를 사용하여 src/templates 폴더로 이동하고 index.html 파일을 엽니다. 다음 코드 줄을 찾습니다.

    <h1 id="page-title">Welcome to ReleCloud</h1>
    

    H1 내부 텍스트를 변경합니다.

    <h1 id="page-title">Welcome to ReleCloud - UPDATED</h1>
    

    입력할 때 코드가 저장됩니다.

  2. 변경 내용으로 앱을 다시 배포하려면 터미널에서 다음 명령을 실행합니다.

    azd deploy
    
  3. 명령이 완료되면 ReleCloud 웹 사이트를 사용하여 브라우저 탭을 새로 고쳐 업데이트를 확인합니다. 사용 중인 웹 호스팅 플랫폼에 따라 변경 내용이 표시되기까지 몇 분 정도 걸릴 수 있습니다.

    이제 템플릿에서 파일을 편집하고 삭제할 준비가 되었습니다. 자세한 내용은 템플릿에서 무엇을 편집하거나 삭제할 수 있나요?

리소스 정리

azd down 명령을 실행하여 템플릿에서 만든 리소스를 정리합니다.

azd down

azd down 명령은 Azure 리소스 및 GitHub Actions 워크플로를 삭제합니다. 메시지가 표시되면 리소스 그룹과 연결된 모든 리소스를 삭제하는 데 동의합니다.

선택 사항: 코드 영역 찾기

이 섹션에서는 코드가 Codespace에서 (일시적으로) 실행되고 단기간에 지속되는 방법을 보여 줍니다. 코드 작업을 계속하려는 경우 새 리포지토리에 코드를 게시해야 합니다.

  1. 이 빠른 시작 문서와 관련된 모든 탭을 닫거나 웹 브라우저를 완전히 종료합니다.

  2. 웹 브라우저와 새 탭을 열고 다음으로 이동합니다. https://github.com/codespaces

  3. 아래쪽 근처에 최근 Codespace 목록이 표시됩니다. "Azure-Samples에서 소유"라는 섹션에서 만든 항목을 찾습니다.

  4. 이 Codespace 오른쪽의 줄임표를 선택하여 상황에 맞는 메뉴를 봅니다. 여기에서 코드스페이스의 이름을 바꾸고, 새 리포지토리에 게시하고, 컴퓨터 유형을 변경하고, 코드스페이스를 중지하는 등의 작업을 수행할 수 있습니다.

선택 사항: Codespaces에서 GitHub 리포지토리 게시

이 시점에서 템플릿에서 생성된 새 코드를 사용하여 Visual Studio Code 개발 환경을 실행하는 GitHub에서 호스트하는 컨테이너인 Codespace가 azd 있습니다. 그러나 코드는 GitHub 리포지토리에 저장되지 않습니다. 코드 작업을 계속하려는 경우 우선 순위를 지정해야 합니다.

  1. 코드스페이스의 상황에 맞는 메뉴에서 "새 리포지토리에 게시"를 선택합니다.
  2. "새 리포지토리에 게시" 대화 상자에서 새 리포지토리의 이름을 바꾸고 해당 리포지토리를 공용 또는 프라이빗 리포지토리로 지정할지 선택합니다. "리포지토리 만들기"를 선택합니다.
  3. 잠시 후 리포지토리가 만들어지고 이 빠른 시작의 앞부분에서 생성한 코드가 새 리포지토리로 푸시됩니다. "리포지토리 보기" 단추를 선택하여 새 리포지토리로 이동합니다.
  4. 코드를 다시 열고 계속 편집하려면 녹색 "<> 코드" 드롭다운을 선택하고, Codespaces 탭으로 전환하고, 이전에 작업 중이던 Codespace의 이름을 선택합니다. 이제 Codespace Visual Studio Code 개발 환경으로 돌아갑니다.
  5. 소스 제어 창을 사용하여 새 분기를 만들고 스테이징하고 코드에 새 변경 내용을 커밋합니다.

문제 해결

중에 azd up오류가 표시되면 다음을 시도합니다.

  • 실행 azd down 하여 생성되었을 수 있는 리소스를 제거합니다. 또는 Azure Portal에서 만든 리소스 그룹을 삭제할 수 있습니다.
  • GitHub 계정의 Codespaces 페이지로 이동하고, 이 빠른 시작 중에 만든 Codespace를 찾고, 오른쪽에 있는 줄임표를 선택하고, 상황에 맞는 메뉴에서 "삭제"를 선택합니다.
  • Azure Portal에서 Key Vault를 검색합니다. 삭제된 자격 증명 모음을 관리하려면 선택하고, 구독을 선택하고, 이름 azdtest 또는 환경 이름을 포함하는 모든 키 자격 증명 모음을 선택하고, 제거를 선택합니다.
  • 이 빠른 시작의 단계를 다시 시도합니다. 이번에는 메시지가 표시되면 사용자 환경에 대한 더 간단한 이름을 선택합니다. 짧은 이름, 소문자, 숫자 없음, 대문자, 특수 문자 없음을 시도해 보세요.
  • 빠른 시작 단계를 다시 시도할 때 다른 위치를 선택합니다.

가능한 문제 및 솔루션에 대한 보다 포괄적인 목록은 FAQ를 참조하세요.