다음을 통해 공유


Azure Storage에서 정적 웹 사이트 호스트

범용 V2 또는 BlockBlobStorage 계정의 컨테이너에서 직접 고정적인 콘텐츠(HTML, CSS, JavaScript, 이미지 파일)를 제공할 수 있습니다. 자세한 내용은 Azure Storage에서 정적 웹 사이트 호스팅을 참조하세요.

이 문서에서는 Azure Portal, Azure CLI 또는 PowerShell을 사용하여 정적 웹 사이트 호스팅을 사용하도록 설정하는 방법을 보여 줍니다.

정적 웹 사이트 호스팅 사용

정적 웹 사이트 호스팅은 스토리지 계정에서 사용하도록 설정해야 하는 기능입니다.

  1. Azure Portal에 로그인하여 시작합니다.

  2. 스토리지 계정을 찾아 선택하여 계정의 개요 창을 표시합니다.

  3. 개요 창에서 기능 탭을 선택합니다. 다음으로 정적 웹 사이트를 선택하여 정적 웹 사이트의 구성 페이지를 표시합니다.

    Image showing how to access the Static website configuration page within the Azure portal

  4. 사용을 선택하여 스토리지 계정에서 정적 웹 사이트를 호스팅할 수 있습니다.

  5. 인덱스 문서 이름 필드에서 기본 인덱스 페이지(예: index.html)를 지정합니다.

    기본 인덱스 페이지는 사용자가 정적 웹 사이트의 루트로 이동할 때 표시됩니다.

  6. 오류 문서 경로 필드에서 기본 오류 페이지를 지정합니다(예: 404.html).

    기본 오류 페이지는 사용자가 정적 웹 사이트에서 존재하지 않는 페이지로 이동하려고 할 때 표시됩니다.

  7. 저장을 클릭하여 정적 사이트 구성을 완료합니다.

    Image showing how to set the Static website properties within the Azure portal

  8. 확인 메시지가 표시됩니다. 정적 웹 사이트 엔드포인트 및 기타 구성 정보가 개요 창에 표시됩니다.

    Image showing the Static website properties within the Azure portal

파일 업로드

다음 지침에서는 Azure Portal을 사용하여 파일을 업로드하는 방법을 보여 줍니다. AzCopy, PowerShell, CLI 또는 계정의 $web 컨테이너에 파일을 업로드할 수 있는 사용자 지정 애플리케이션을 사용할 수도 있습니다. Visual Studio 코드를 사용하여 파일을 업로드하는 단계별 자습서는 자습서: Blob Storage에서 정적 웹 사이트 호스팅을 참조하세요.

  1. Azure Portal에서 정적 웹 사이트가 포함된 스토리지 계정으로 이동합니다. 왼쪽 탐색 창에서 컨테이너를 선택하여 컨테이너 목록을 표시합니다.

  2. 컨테이너 창에서 $web 컨테이너를 선택하여 컨테이너의 개요 창을 엽니다.

    Image showing where to locate the website storage container in Azure portal

  3. 개요 창에서 업로드 아이콘을 선택하여 Blob 업로드 창을 엽니다. 다음으로, Blob 업로드 창에서 파일 필드를 선택하여 파일 브라우저를 엽니다. 업로드할 파일로 이동하여 선택한 다음, 열기를 선택하여 파일 필드를 채웁니다. 필요에 따라 파일이 이미 있는 경우 덮어쓰기 확인란을 선택합니다.

    Image showing how to upload files to the static website storage container

  4. 브라우저에서 파일의 콘텐츠를 표시하려면 해당 파일의 콘텐츠 형식이 text/html로 설정되어 있는지 확인합니다. 이를 확인하려면 이전 단계에서 업로드한 Blob의 이름을 선택하여 개요 창을 엽니다. 값이 CONTENT-TYPE 속성 필드 내에 설정되어 있는지 확인합니다.

    Image showing how to verify blob content types

    참고 항목

    이 속성은 .html과 같은 일반적으로 인식되는 확장에 대해 자동으로 text/html로 설정됩니다. 그러나 이를 직접 설정해야 하는 경우도 있습니다. 이 속성을 text/html로 설정하지 않으면 브라우저에서 사용자에게 콘텐츠를 렌더링하지 않고 파일을 다운로드하라는 메시지를 표시합니다. 이 속성은 이전 단계에서 설정할 수 있습니다.

웹 사이트 URL 찾기

웹 사이트의 공용 URL을 사용하여 브라우저에서 사이트의 페이지를 볼 수 있습니다.

스토리지 계정의 계정 개요 페이지 옆에 표시되는 창에서 정적 웹 사이트를 선택합니다. 기본 엔드포인트 필드에 사이트의 URL이 표시됩니다.

Azure Storage static websites metrics metric

정적 웹 사이트 페이지에서 메트릭 사용

메트릭을 사용하도록 설정하면 $web 컨테이너의 파일에 대한 트래픽 통계가 메트릭 대시보드에 보고됩니다.

  1. 스토리지 계정 메뉴의 모니터 섹션에서 메트릭을 클릭합니다.

    Metrics link

    참고 항목

    여러 메트릭 API에 연결하여 메트릭 데이터가 생성됩니다. 데이터를 반환하는 멤버에만 집중하기 위해 특정 시간 프레임에 사용된 API 멤버만 포털에 표시됩니다. 필요한 API 멤버를 선택할 수 있도록 가장 먼저 할 일은 시간 프레임을 확장하는 것입니다.

  2. 시간 프레임 단추를 클릭하고, 시간 프레임을 선택한 다음, 적용을 클릭합니다.

    Azure Storage static websites metrics time range

  3. 네임스페이스 드롭다운에서 Blob을 선택합니다.

    Azure Storage static websites metrics namespace

  4. 그런 다음, 송신 메트릭을 선택합니다.

    Screenshot that shows the Azure Storage static websites Egress metric.

  5. 집계 선택기에서 합계를 선택합니다.

    Azure Storage static websites metrics aggregation

  6. 필터 추가 단추를 클릭하고 속성 선택기에서 API 이름을 선택합니다.

    Azure Storage static websites metrics API name

  7. 선택기에서 GetWebContent 옆에 있는 상자를 선택하여 메트릭 보고서를 채웁니다.

    Azure Storage static websites metrics GetWebContent

    참고 항목

    GetWebContent 확인란은 해당 API 멤버가 지정된 시간 프레임 내에 사용된 경우에만 표시됩니다. 데이터를 반환하는 멤버에만 집중하기 위해 특정 시간 프레임에 사용된 API 멤버만 포털에 표시됩니다. 이 목록에서 특정 API 멤버를 찾을 수 없는 경우 시간 프레임을 확장합니다.

다음 단계