簡介

4 分鐘

案例

貴公司正在啟動購物清單 Web 應用程式。客戶可以透過網站，從清單中新增、編輯、檢視和移除項目，例如食物居家必需品。

必須保護網站和 API，以確保客戶隱私權。使用者將會散佈在世界各地，而您希望每個人都能獲得絕佳的效能。您偏好一個可儘可能將基礎結構工作 (包括建置及發佈) 降到最低的解決方案，讓您可以專注在功能與使用者體驗。

您會將 Web 資產部署到雲端儲存體、建立並指派您自己的 SSL 憑證、在雲端伺服器上建立您的 API、建立反向 Proxy 讓您的應用程式能夠呼叫 API、全球散發應用程式，以及設定您自己的 CI/CD 程序。

當您使用 Azure Static Web Apps 時，即可使用所有這些現成功能。

什麼是 Azure 靜態 Web 應用程式？

Azure 靜態 Web 應用程式可以為您解決範圍從原始程式碼到全球可用性的所有難題。

當您持續專注於開發應用程式時，Azure Static Web Apps 會從 GitHub 或 Azure DevOps 自動建置並裝載該應用程式。

靜態 Web 應用程式通常會使用程式庫和架構 (例如，Angular、React、Svelte 或 Vue) 來建置。這些應用程式包含組成應用程式的 HTML、CSS、JavaScript 及影像資產。使用傳統的網頁伺服器架構時，會從單一伺服器以及任何所需的 API 端點提供這些檔案。

使用 Azure Static Web Apps，靜態資產會與傳統的 Web 伺服器分隔開來，並改為從已在世界各地進行全域散發的點提供服務。這種散發方式可讓檔案的處理速度更快，因為檔案實際上更接近使用者。 API 端點 (選擇性) 會使用無伺服器架構來裝載，因此不需要完整的後端伺服器。

適用於 Azure 靜態 Web 應用程式的模型就是您需要準確獲得的項目，僅此而已。

Screenshot showing the Static Apps overview.

當建立 Azure Static Web Apps 資源時，Azure 會在應用程式的原始程式碼存放庫中設定 GitHub Actions 或 Azure DevOps 工作流程。工作流程會監視所選的分支。每次您將認可推送至監看的分支或對其建立提取要求時，該工作流程就會自動建置您的應用程式及其 API 並部署至 Azure。

Azure 可裝載並服務 Web 應用程式。 Azure Functions 提供後端 API 功能，其可根據需求自動擴增及縮減規模。

選擇性 API

Azure Static Web Apps 非常適合用來提供純靜態內容，但其對於需要 API 在背後支持的靜態 Web 應用程式也提供了強大的支援。所以您可裝載包含或不含 API 的靜態 Web 應用程式。

在本課程模組的練習中，您將使用慣用的 Web 架構來部署應用程式。

注意

在本課程模組中，您將在不使用 API 的情況下部署應用程式。如需下一個課程模組的資訊，請參閱最後一個單元中的「後續步驟」一節，您將在其中部署 API 與應用程式。

主要功能

全域散發的 Web 裝載會將靜態內容 (例如，HTML、CSS、JavaScript 和影像) 放在更接近使用者的位置
整合式 API，受 Azure Functions 支援
卓越的 GitHub 與 Azure DevOps 整合，透過存放庫變更觸發組建與部署。
免費的 SSL 憑證，其會自動更新
用於預覽提取要求的唯一預覽 URL

學習目標

在此教學課程中，您將建立和修改 Web 應用程式，並將其部署到 Azure 靜態 Web 應用程式。

選擇您自己的路徑

此課程模組提供四種不同的範例應用程式讓您選擇：Angular、React、Svelte 及 Vue。 Azure 靜態 Web 應用程式的能力在於所有這些類別均「能運作」。

起始程式碼包含所將使用的四個應用程式。

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app