Azure Blob Storage 를 사용하여 정적 웹 사이트 호스팅

Azure Blob Storage 을 사용하여 정적 웹 사이트를 호스팅할 수 있습니다. 본 블로그에서는 Visual Studio Code를 이용하여 Azure Blob Storage에서 쉽게 정적 웹사이트를 만드는 방법에 대해서 소개합니다.

사전준비

Azure Subscription

Visual Studio Code

  • Azure Resource extension

개발순서

1. 터미널에서 프로젝트 폴더를 생성합니다. 저는 ‘sample-staticwebsite-with-blobstorage’ 라는 폴더를 만들었습니다.

2. 터미널에서 Visual Studio 코드를 실행합니다.

3. Visual Studio Code에서 Azure Explore 선택합니다. 그 후 Storage account를 오른쪽 클릭 후에 Create Storag Account… (Advanced)를 클릭합니다.

4. Storage account 이름을 입력합니다.

5. Resource Group를 생성합니다.

6. Resource Gorup 이름을 입력합니다.

7. static website hosting을 enable 합니다.

8. Index document name을 지정합니다. 여기서는 index.html로 입력했습니다.

9. Error document name을 지정합니다. 여기서는 404.html로 입력했습니다.

10. Storage account를 배포할 지역을 선택합니다.

11. 배포가 완료되면 Storage accounts의 Blob Containers에 $web container가 생생된 것을 확인 할 수 있습니다.

12. Explore 에서 현재 폴더 (sample-staticwebsite-with-blobstorage)에 index.html, 404.html을 생성하고 다음 코드를 입력합니다.

13. 코드 작성 후, Azure Explore의 $web Container에 배포합니다.

배포가 정상적으로 완료되면 오른쪽 하단에 “Deployment complete” 메시지를 확인 할 수 있습니다.

14. Azure Portal에서 $web Container에 접속하면 index.html, 404.html이 정상적으로 배포된 것을 확인할 수 있습니다.

15. 브라우저를 통해서도 정상적으로 배포된 것을 확인 할 수 있습니다.

참고자료

Leave a Comment