免費Azure靜態Web應用程式 - Tim Corey解釋的設置和部署

什麼是Azure Static Web Apps以及為什麼它們很重要

在影片開始時，Tim Corey解釋了Azure Static Web Apps讓您可以免費部署任意多的Web應用程式。 他強調這些應用程式是通過Microsoft Azure資料中心全球託管的，並通過內容傳遞網路提供，確保使用者進行HTTP請求時的高可用性、負載平衡和低延遲。

Tim指出這些Web應用支持認證、API應用和與RESTful API的整合。即使在免費層次，Azure Static Web Apps也能提供增強的安全性和高性能，無需管理伺服器、虛擬機器或基礎設施。 這是使用平台即服務而不是管理Azure虛擬機器或本地伺服器的重要優勢之一。

他解釋Azure Static Web Apps對於前端Web應用程式是理想的，例如HTML、CSS、JavaScript、React和Blazor WebAssembly，但不適用於需要伺服器端處理的應用程式。

影片範圍和Azure學習背景

Tim解釋這是一次重點教學，而不是對所有Azure服務的全面概述。 儘管Azure App Service支持許多語言、行動應用、API應用甚至Docker容器，但這個影片專注於Microsoft Azure中的一項特定服務。

他提到如果觀眾想要更深入了解安全性、成本管理和關鍵任務應用等主題，這些內容已在他的Azure課程中涵蓋。 然而，這裡的目標是展示如何快速使用Azure Static Web Apps和連續部署建立和部署Web應用。

為靜態網站建立GitHub倉庫

Tim首先建立一個新的GitHub倉庫，解釋GitHub是免費的並與Azure服務無縫整合。 該倉庫將包含一個簡單靜態網站的源程式碼。

他使倉庫成為私有，新增了一個README文件，並選擇適用於Visual Studio和Visual Studio Code的.gitignore文件。 Tim澄清雖然他使用的是Visual Studio Code，但同樣的過程也適用於Visual Studio。

該倉庫代表使用Azure託管網站的起點。 Tim強調Azure Static Web Apps直接從源程式碼部署，使連續部署變得簡單且可靠。

構建簡單的HTML Web應用程式

使用Visual Studio Code，Tim建立了一個index.html文件，作為網站的入口點。他使用Emmet快捷方式生成基本的HTML結構，並新增最少的內容以展示功能。

這一步驟展示了如何在沒有任何後端服務、資料庫或伺服器的情況下部署簡單的Web應用程式。 Tim明確指出這種簡單性是有意圖的，因為Azure Static Web Apps是專為前端工作負載設計的。

一旦完成，他提交變更並將源程式碼推送到GitHub，以在後續過程中觸發部署管道。

在Azure Portal中建立Azure Static Web App

Tim切換到Azure Portal並建立了一個新的Static Web App資源。 他解釋建立資源組的重要性，指出資源組使資源管理、清理環境和避免不必要成本更加容易。

他強調選擇免費層次，解釋免費層次快速、可靠，並適用於大多數小型企業網站和個人專案。 雖然Azure App Service計劃可能需要應用服務計劃和每月費用，但免費層次的Azure Static Web Apps消除了這些複雜性。

Tim簡單提到他的網站就使用Azure Static Web Apps運行，展示了此服務在生產中的實際使用。

連接GitHub並啟用連續部署

Tim將Azure Static Web App連接到GitHub，選擇了倉庫和分支。 他解釋Azure會自動設置GitHub Actions工作流程以處理連續部署。

這個工作流程消除了手動部署步驟的需要。 每當源程式碼變更時，Web應用會自動重建和部署。 Tim指出這是現代雲平台的關鍵特性，也是使用Microsoft Azure進行Web託管的主要好處之一。

部署令牌和安全配置

Tim導航到GitHub倉庫設定，查看儲存為密碼的部署令牌。 這個令牌允許在GitHub和Azure之間進行安全通信。

他解釋這種設置提供了增強的安全性，而無需開發者手動配置憑據。 Azure Static Web App API令牌確保只有授權工作流程才能部署應用程式。

查看已部署的靜態網站

一旦部署完成，Tim直接從Azure Portal打開了線上網站。 該網站現在可以公開存取並在雲中託管。

他解釋這個過程可用於其他前端框架，因為它們最終會生成靜態文件，可由Azure Static Web Apps高效地提供。不需要應用服務計劃、虛擬機或後端伺服器。

部署Blazor WebAssembly應用程式

接下來，Tim展示了部署Blazor WebAssembly獨立應用程式，強調Blazor Web Apps與Blazor WebAssembly之間的區別。

他解釋Blazor WebAssembly完全在客戶端運行，適合用於Azure Static Web Apps。伺服器端技術如ASP.NET Core MVC、PHP或Java後端則需要Azure Web Apps。

此部分強調Azure Static Web Apps專為客戶端應用程式設計。

建立並測試Blazor應用程式

使用Visual Studio，Tim建立了Blazor WebAssembly專案，選擇.NET 9，並啟用HTTPS和漸進式Web應用程式支持等功能。

在部署前，他在本地運行應用以確認其運行正常，加強生產環境準備的最佳實踐。 一經驗證，他直接從Visual Studio建立GitHub倉庫並推送源程式碼。

將Blazor部署到Azure Static Web Apps

Tim建立了另一個Static Web App資源並將其連接到Blazor倉庫。 他強調GitHub Actions工作流程自動配置特定於Blazor的路徑，例如輸出目錄。

這展示了Azure支持多種編程語言和框架而無需手動配置。 這個平臺抽象出底層基礎設施和構建複雜性。

構建過程和部署完成

Tim解釋Blazor構建需要更長時間，因為涉及編譯和優化步驟。 Azure在部署期間修剪應用程式，提高性能。

一旦完成，Blazor WebAssembly應用程式便可上線，全球可存取，並託管在Microsoft Azure的雲基礎設施上。

Azure Static Web Apps的其他功能

Tim簡要介紹了其他功能，包括：

• 自訂網域

• 與內建安全性的API整合

• 部署插槽，如開發、預備和生產環境插槽

他解釋API會自動鎖定，防止未授權的存取並簡化整合。

使用資源組清理資源

最後，Tim刪除了資源組，展示了Azure如何允許開發者一次性刪除所有相關資源。 這在測試雲服務時尤為重要，以避免意外產生費用。

他警告刪除資源組是永久性的，無法撤銷。

什麼時候使用Azure Static Web Apps及不使用的情況

Tim最後澄清，Azure Static Web Apps不適用於伺服器端工作負載，例如PHP應用程式、MVC應用程式或Blazor Web Apps。

它們是專為用HTML、JavaScript、CSS、React、Angular、Vue和Blazor WebAssembly構建的前端Web應用而設計的。 因為所有操作都在客戶端運行，這些應用可以完全免費託管。

正如Tim Corey在整段影片中展示的，Azure Static Web Apps提供一個簡單、安全且完全管理的方式來使用Microsoft Azure部署現代Web應用，而不必擔心伺服器、擴展或基礎結構。