建置基本 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 全球基礎設施,增進對各個地理位置的用戶端所提供服務的資源。

 最短完成時間

5 分鐘

 使用的服務

 上次更新日期

2023 年 4 月 4 日

實作

    1. 登入 API Gateway 主控台
    2. 選擇 API 類型區段中,找到 REST API 卡,然後選擇卡上的建置按鈕。
    3. 選擇協定下,選取 REST
    4. 建立新的 API 下,選取新 API
    5. API 名稱欄位中,輸入 HelloWorldAPI
    6. 端點類型下拉式清單中,選取邊緣最佳化。(注意:邊緣最佳化的端點最適合地理區分散的用戶端。因此,對於從網際網路存取的公共服務來說,其是好選擇。區域端點通常用於主要從相同 AWS 區域內存取的 API。)
    7. 選擇藍色的建立 API 按鈕。您的設定應該像是隨附的螢幕擷取畫面。
    建立 API 頁面,顯示 API 選項和設定。
    1. 在左側導覽窗格中,選取 API: HelloWorldAPI 下的資源
    2. 確定已選取 "/" 資源。
    3. 動作下拉式功能表中,選取建立方法
    4. 從顯示的新下拉式清單中選取 POST,然後選取勾選核取記號。
    5. 選取 Lambda 函數做為整合類型
    6. 製作函數時,選取您使用的 Lambda 區域函數 (否則您將會看到一則警告,顯示「您沒有任何 Lambda 函數...」)。
    7. Lambda 函數欄位中,輸入 HelloWorldFunction
    8. 選擇藍色的儲存按鈕。
    9. 應該會顯示訊息,告知您即將向所要建立的 API 提供呼叫 Lambda 函數的許可。選擇確定按鈕。
    10. 新建立的 POST 方法選取之下,從動作下拉式功能表選取啟用 CORS
    11. 維持選取「POST」核取方塊,選擇藍色的啟用 CORS 及取代現有的 CORS 標頭按鈕。
    啟用 CORS 組態頁面。

    10.應該會顯示訊息,請您確認對於方法所作的變更。選擇藍色的是,取代現有的值按鈕。

    確認方法變更訊息。
    1. 動作下拉式清單中,選取部署 API
    2. 部署階段下拉式清單中,選取[新階段]
    3. 輸入 dev 做為階段名稱
    4. 選擇部署
    5. 調用 URL 旁,複製並儲存 URL (您在第五單元會用到)。
    1. 在左側導覽窗格中,選取資源
    2. 這時在右側會列示適用於 API 的方法。選擇 POST
    3. 選擇藍色小閃電。
    4. 將以下內容貼到請求內文欄位中:
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5.選擇藍色的測試按鈕。

    6.在右側,應會顯示包含 Code 200 的回應。

    7.太棒了! 我們已建立能夠呼叫 Lambda 函數的 API,並測試完成。

應用程式架構

第三單元現已完成。該來複習架構了:

架構圖顯示 AWS 雲端中託管的服務,以及從外部使用者到互連 AWS 服務的連線。

我們新增 API Gateway,連線至現有的 Lambda 函數。現在,我們能使用 API 呼叫觸發該函式。我們尚缺從 Web 用戶端產生此呼叫的能力。我們到了第四單元,首先會新增資料表,並在第五單元將一切串連在一起。

本頁對您是否有幫助?

建立資料表