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

什麼是Azure Static Web Apps及其重要性

在影片的一開始，Tim Corey說明Azure Static Web Apps允許您免費部署任意多的網站應用程式。 他強調這些應用程式是通過Microsoft Azure數據中心全球託管，並通過內容傳遞網路交付，這確保了用戶在發送HTTP請求時擁有高可用性、負載平衡和低延遲。

Tim指出這些網站應用程式支持驗證、API應用程式和與RESTful APIs的整合。即使在免費層，Azure Static Web Apps也提供了增強的安全性和高效能，無需管理伺服器、虛擬機器或底層基礎架構。 這是使用平台即服務而不是管理Azure虛擬機器或內部伺服器的其中一個重要優勢。

他說明，Azure Static Web Apps非常適合前端網站應用程式，例如HTML、CSS、JavaScript、React和Blazor WebAssembly，但不適用於需要伺服端處理的應用程式。

影片的範圍及Azure學習背景

Tim說明這部影片提供了一個專注的教學，而不是對所有Azure服務的完整概述。 雖然Azure App Service支持許多語言、移動應用程式、API應用程式，甚至是Docker容器，此影片集中於Microsoft Azure中的一個特定服務。

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

為靜態網站建立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網站應用程式

使用Visual Studio Code，Tim創建一個index.html文件，作為網站的入口。他使用Emmet快捷鍵來生成基本的HTML結構，並添加了最小內容以示範功能。

這一步展示了如何在沒有任何後端服務、資料庫或伺服器的情況下部署基本網站應用程式。 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工作流程來處理持續部署。

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

部署令牌和安全配置

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和漸進式網站應用程式支持等功能。

他在本地運行應用程式，以確認其在部署前運作正常，增強了生產準備的最佳實踐。 經過驗證後，他直接從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。 因為一切都在客戶端上運行，這些應用程式可以完全免費託管。

如Tim Corey在整個影片中所展示，Azure Static Web Apps提供了一種簡單的、安全的、完全受管理的方式來使用Microsoft Azure部署現代網站應用程式，無需擔心伺服器、擴展或基礎設施。