【 Cloud 】部署 HTML 到 Azure Blob

內容

• 學習目標
• 前置準備作業
• 建立 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

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/