建置基本 Web 應用程式
教學
單元 3:連結無伺服器功能至 Web 應用程式
在本單元中,您將使用 Amazon API Gateway 部署無伺服器功能
概觀
在此單元中,我們將使用 Amazon API Gateway 建立 RESTful API,以便從 Web 用戶端 (一般稱為使用者的 Web 瀏覽器) 呼叫 Lambda 函數。API Gateway 會作為我們在第一單元所建立的 HTML 用戶端與在第二單元中所建立無伺服器後端之間的中間層。
您會完成的目標
在本單元中,您將會:
- 使用 API Gateway 建立新的 API
- 在您的 API 上定義 HTTP 方法
- 從 API 觸發 Lambda 函數
- 在 API 上啟用跨來源資源共享 (CORS),以便您可以消耗來自不同來源 (網域) 的資源
- 從 AWS 管理主控台測試以 API Gateway 建立的 API
主要概念
RESTful API – REST 意指「表現層狀態轉換」,是建立 Web 服務用的架構模式。API 代表「應用程式開發介面」。 因此,是由 RESTful API 實作 REST 架構模式。
HTTP 請求方法 – HTTP 方法旨在使得用戶端和伺服器之間能夠通訊。方法,例如以 HTTP 協定所定義的 GET 或 PUT,用來指出對資源採取什麼動作。
CORS – CORS 瀏覽器安全功能使用 HTTP 標頭告知瀏覽器允許給定 Web 應用程式在一個原始來源 (網域) 上執行,能從位於不同原始來源的伺服器存取選定資源。
邊緣最佳化 – 使用 AWS 全球基礎設施,增進對各個地理位置的用戶端所提供服務的資源。
實作
-
建立新的 REST API
- 登入 API Gateway 主控台。
- 在選擇 API 類型區段中,找到 REST API 卡,然後選擇卡上的建置按鈕。
- 在選擇協定下,選取 REST。
- 在建立新的 API 下,選取新 API。
- 在 API 名稱欄位中,輸入 HelloWorldAPI。
- 從端點類型下拉式清單中,選取邊緣最佳化。(注意:邊緣最佳化的端點最適合地理區分散的用戶端。因此,對於從網際網路存取的公共服務來說,其是好選擇。區域端點通常用於主要從相同 AWS 區域內存取的 API。)
- 選擇藍色的建立 API 按鈕。您的設定應該像是隨附的螢幕擷取畫面。
-
建立新的資源和方法
- 在左側導覽窗格中,選取 API: HelloWorldAPI 下的資源。
- 確定已選取 "/" 資源。
- 從動作下拉式功能表中,選取建立方法。
- 從顯示的新下拉式清單中選取 POST,然後選取勾選核取記號。
- 選取 Lambda 函數做為整合類型。
- 製作函數時,選取您使用的 Lambda 區域函數 (否則您將會看到一則警告,顯示「您沒有任何 Lambda 函數...」)。
- 在 Lambda 函數欄位中,輸入 HelloWorldFunction。
- 選擇藍色的儲存按鈕。
- 應該會顯示訊息,告知您即將向所要建立的 API 提供呼叫 Lambda 函數的許可。選擇確定按鈕。
- 新建立的 POST 方法選取之下,從動作下拉式功能表選取啟用 CORS。
- 維持選取「POST」核取方塊,選擇藍色的啟用 CORS 及取代現有的 CORS 標頭按鈕。
10.應該會顯示訊息,請您確認對於方法所作的變更。選擇藍色的是,取代現有的值按鈕。
-
部署 API
- 在動作下拉式清單中,選取部署 API。
- 在部署階段下拉式清單中,選取[新階段]。
- 輸入 dev 做為階段名稱。
- 選擇部署。
- 在調用 URL 旁,複製並儲存 URL (您在第五單元會用到)。
-
驗證 API
- 在左側導覽窗格中,選取資源。
- 這時在右側會列示適用於 API 的方法。選擇 POST。
- 選擇藍色小閃電。
- 將以下內容貼到請求內文欄位中:
{ "firstName":"Grace", "lastName":"Hopper" }
5.選擇藍色的測試按鈕。
6.在右側,應會顯示包含 Code 200 的回應。
7.太棒了! 我們已建立能夠呼叫 Lambda 函數的 API,並測試完成。
應用程式架構
第三單元現已完成。該來複習架構了:
我們新增 API Gateway,連線至現有的 Lambda 函數。現在,我們能使用 API 呼叫觸發該函式。我們尚缺從 Web 用戶端產生此呼叫的能力。我們到了第四單元,首先會新增資料表,並在第五單元將一切串連在一起。