使用 Azure Functions 建置 API
現在可以為您的購物清單應用程式建立 API。
Azure Functions
Azure 靜態 Web 應用程式的最大優點之一是，其會一併裝載您的 Web 應用程式和使用 Azure Functions 建置的 API！ Azure 靜態 Web 應用程式會全域散發您 Web 應用程式的靜態資產，並在 Azure Functions 中裝載您的 API。 利用此設定，您可以取得因全域散發 Web 應用程式資產而獲得的可用性和速度。 您未獲得的部分也很重要。
您不需要針對前端或後端設定和維護整個伺服器。 這是 Azure Static Web Apps 最引人注目的功能：您可以輕鬆地利用最少的設定和維護來發佈應用程式和 API。
Azure Functions 可提供您的路由端點、不需設定或維護完整的後端伺服器，並根據需求提供自動相應放大和相應縮小功能。 這些功能讓 Azure Functions 在您使用提供靜態資產的購物清單 Web 應用程式時，成為絕佳的 API 合作夥伴。
Azure 靜態 Web 應用程式會為您的網站產生唯一的 URL，您可以在入口網站的 [概觀] 索引標籤上找到此 URL。 藉由將 /api 附加至 URL，即可透過這個相同的 URL 取得 API。
您的購物清單 API
您的購物清單應用程式可讓使用者從其清單中取得、新增、更新和刪除項目。 這樣一來，您的 API 自然就會擁有符合這些需求的端點。
以下說明四個端點：
| 方法 | 路由端點 | 完整的 API 端點 |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
請注意，您的 HTTP GET 要求會將路由傳送到 api/products。 api 前置詞已保留給應用程式中的 API 端點。 您可以定義任何其他路由以符合您的網站需求，但 api 一律指向 Azure Functions 應用程式。
建立適用於 Web 應用程式的 API
到目前為止，您已使用過前端架構。 您很快就要新增 API，並將其連線到您的前端應用程式。 您的存放庫具有 Api 專案，其中包含不完整的 Azure Functions 專案，以及適用於您產品之 PUT、POST 和 DELETE 的 HTTP 端點。 此 API 缺少了 HTTP GET 函式。 完成 Azure Functions 專案的 API 並新增遺漏的函式，然後將 API 連線至前端 Web 應用程式。
預覽您 Web 應用程式的各項變更
對應用程式進行變更之前，最好先為變更建立新的分支。 您要在完成應用程式的 API 時進行數項變更，因此，您要為這些變更建立分支。
進行變更之後，您想要在決定合併變更之前，先看到這些變更正在執行。 當您從新的分支對 main 分支建立提取要求之後，GitHub 動作將會建置您的應用程式和 API，並將其部署到預覽 URL。 這個預覽 URL 可允許您讓 Web 應用程式和 Azure Static Web Apps 一起執行，同時還能檢視第二個 URL，其中包含來自提取要求的結果。
設定 Web 應用程式和 API 之間的通訊
當您在本機執行 API 時，其預設會在連接埠 7071 上執行。 您的 Web 應用程式會在不同的本機連接埠上執行。 當您的 Web 應用程式嘗試從其連接埠對 API 的連接埠 7071 發出 HTTP 要求時，此動作稱為跨原始來源資源共用 (CORS)。 除非 API 伺服器允許要求繼續執行，否則您的瀏覽器會阻止 HTTP 要求完成。
發佈到 Azure Static Web Apps 時，您不需要擔心 CORS。 Azure 靜態 Web 應用程式會自動設定您的應用程式，使其可在 Azure 上利用反向 Proxy 來與您的 API 進行通訊。 反向 Proxy 讓您的 Web 應用程式和 API 看起來就像來自相同的 Web 網域。 因此，您只需要在本機執行時設定 CORS。
下一步
現在您已準備好建立 API，並為購物清單應用程式設定 HTTP 端點。