【 Cloud 】部署 HTML 到 Azure Static Web Apps

內容

• 學習目標
• 前置準備作業
• 建立 HTML 檔
• 建立 Azure Static Web Apps
• 部署 HTML
  • 本範例使用 GitHub 進行部署

學習目標

• 如何部署 HTML 檔到 Azure Static Web Apps

前置準備作業

• 已建立 Azure 帳號並能正常登入
• 本地端電腦已安裝瀏覽器

建立 HTML 檔

Step 1. 產生 HTML 網頁檔

• 在 Github 建立名為 index.html 的檔案其內容如下:
  • https://github.com/ArcherHuang/Hello_World/blob/master/index.html

建立 Azure Static Web Apps 與部署程式

Step 1. 在上方搜尋框輸入 static web app 關鍵字並點選 Static Web Apps 的搜尋結果

Step 2. 點選 Create

Step 3. 輸入相關資訊

• Subscription 欄位選擇所要使用的訂閱。
• Resource group 欄位輸入此 Web App 所要歸屬於的群組。
• Name 欄位輸入一個可識別的名稱。
• Plan type 欄位請選擇此 Web App 服務所要使用的等級。
• Region for Azure Functions API and staging environments 欄位擇此 Web App 所要建置於哪個資料中心。
• Source 欄位請選擇所要部署程式的來源，本範例使用 GitHub。
• GitHub account 欄位請登入帳號與密碼。
  • Organization 欄位請選擇程式所在的組織。
  • Repository 欄位請選擇所要部署程式的 Repository。
  • Branch 欄位請選擇所要部署程式的 Branch。
• 當輸入完成後點選 Review + create

Step 4. 建立服務

• 確認資訊正確則點選 Create

Step 5. 點選 Go to resource

Step 6. 確認部署結果

• 點選 URL 連結

• 開啟瀏覽器顯示結果

GitHub

• ArcherHuang @ GitHub

List of blogs

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