LearningSky.io

【 Cloud 】部署 HTML 到 Azure Blob

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建立 HTML 檔
  • 建立 Azure Blob
  • 部署 HTML

學習目標

  • 如何部署 HTML 檔到 Azure Storage account ( Blob )

前置準備作業

  • 已建立 Azure 帳號並能正常登入
  • 已於電腦端安裝 IDE，本範例使用 Visual Studio Code
  • 本地端電腦已安裝瀏覽器

建立 HTML 檔

Step 1. 產生 HTML 網頁檔

  • 在本地端電腦建立名為 index.html 的檔案其內容如下:

建立 Azure Blob

Step 1. 在上方搜尋框輸入 blob 關鍵字並點選 Storage accounts 的搜尋結果

Step 2. 點選 Create

Step 3. 輸入相關資訊

  • Subscription 欄位選擇所要使用的訂閱。
  • Resource group 欄位輸入此 Blob 所要歸屬於的群組。
  • Storage account name 欄位輸入一個可識別的名稱。
  • Region 欄位選擇此 Blob 所要建置於哪個資料中心。
  • Performance 欄位選擇所要使用的等級。
  • Redundancy 欄位選擇所要使用的等級。
  • 當輸入完成後點選 Review + create

Step 4. 建立 Blob

  • 確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 點選 Containers

Step 7. 點選 + Container

Step 8. 輸入相關資訊

  • Name 欄位輸入可識別的名稱。
  • Public access level 選擇 Container (anonymous read access for containers and blobs
  • 當上方資訊輸入完成後點選 Create

部署 HTML

Step 1. 點選 Step 8 所建立的 blob

Step 2. 部署 HTML 檔到 Azure Blob

  • 點選 Upload

  • 點選資料夾選擇剛才所建立的 HTML 檔

  • 點選 Upload

Step 3. 透過瀏覽器查看部署的 HTML 檔

  • 點選剛所上傳的 index.html

  • 點選資料夾取得 URL 連結

  • 將取得的 URL 連結貼到瀏覽器 ( 部署成功 )

GitHub

List of blogs