연습 - Blob 스토리지에 정적 웹 사이트 배포

  • 8분

Content Delivery Network를 살펴보기 전에 이 모듈 전체에서 사용할 정적 웹 사이트를 Azure Storage에 배포해 보겠습니다.

Azure Cloud Shell에서 스토리지 계정 만들기

먼저 정적 사이트를 호스트할 새 스토리지 계정을 만들어 보겠습니다. 완료되면 Content Delivery Network를 통해 이 사이트에 액세스합니다.

무료 샌드박스를 사용하면 Azure 글로벌 지역의 일부 하위 지역에 리소스를 만들 수 있습니다. 리소스를 만들 때 다음 목록에서 지역을 선택합니다.

  • westus2
  • southcentralus
  • centralus
  • eastus
  • westeurope
  • southeastasia
  • japaneast
  • brazilsouth
  • australiasoutheast
  • centralindia

  1. Azure Cloud Shell에서 다음 명령을 실행하여 storage-preview 확장을 설치합니다. 이 Azure CLI 확장은 CLI에서 정적 웹 사이트를 관리하는 데 필요합니다. 오른쪽의 Cloud Shell 터미널 창에서 다음 명령을 실행합니다.

    az extension add --name storage-preview

  2. Cloud Shell에서 이러한 명령을 실행하여 몇 개의 셸 변수를 설정합니다. 이 모듈 전체에서 이런 변수를 사용하여 스토리지 계정 이름과 같은 항목을 만들게 됩니다. <location>을 지역 목록에 나오는 위치 중 하나로 바꿉니다.

    STORAGE_ACCOUNT_NAME="cdnsitestorage$RANDOM" \
RESOURCE_GROUP=<rgn>[sandbox resource group name]</rgn> \
LOCATION=<location>

  3. Cloud Shell에서 이 명령을 실행하여 스토리지 계정을 만듭니다.

    az storage account create \
    --name $STORAGE_ACCOUNT_NAME \
    --resource-group $RESOURCE_GROUP \
    --location $LOCATION \
    --sku Standard_LRS \
    --kind StorageV2

  4. 출력에서 "primaryEndpoints"웹 URL을 찾아서 복사한 후 해당 링크를 웹 브라우저에서 엽니다. 페이지가 열리면 요청된 콘텐츠가 없습니다.라는 메시지가 표시됩니다. 이 탭을 열어 두고 정적 콘텐츠를 배포한 후 페이지를 새로 고치겠습니다.

스토리지 계정에서 정적 웹 사이트 호스팅 사용

  1. Cloud Shell에서 다음 명령을 실행하여 스토리지 계정에 호스트되는 정적 웹 사이트를 사용하도록 설정합니다.

    az storage blob service-properties update \
    --account-name $STORAGE_ACCOUNT_NAME \
    --static-website \
    --404-document 404.html \
    --index-document index.html

    출력의 끝에는 다음 항목이 있습니다.

    "staticWebsite": {
    "enabled": true,
    "errorDocument_404Path": "404.html",
    "indexDocument": "index.html"
}

  2. 정적 웹 사이트를 표시하는 브라우저 탭으로 전환한 후 새로 고칩니다. 요청된 콘텐츠가 없다는 메시지가 표시됩니다.

정적 웹 사이트에 파일 업로드

  1. 웹 사이트 파일을 업로드하려면 다음 명령을 실행합니다.

    git clone https://github.com/MicrosoftDocs/mslearn-create-cdn-static-resources-blob-storage source

  2. source/website-files 폴더로 이동합니다.

    cd source/website-files

  3. 그런 다음, $web blob 스토리지 컨테이너에 해당 파일을 업로드합니다.

    az storage blob upload-batch -s . -d \$web --account-name $STORAGE_ACCOUNT_NAME

웹 사이트 게시 확인

이전에 열었던 웹 사이트로 전환한 후 페이지를 새로 고칩니다(F5 누르기). 방문 페이지와 이미지가 표시됩니다.