AWS 入門

建立基本 Web 應用程式

部署 Web 應用程式,以 API 和資料庫新增互動性

在本單元中,您將使用 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 實作該架構模式。

HTTP 請求方法 HTTP 方法旨在使得用戶端和伺服器之間能夠通訊。方法,例如以 HTTP 協定所定義的 GET 或 PUT,用來指出對資源採取什麼動作。

CORS CORS (跨原始來源資源共用) 機制使用 HTTP 標頭告知瀏覽器允許給定 Web 應用程式在一個原始來源 (網域) 上執行,並有許可,能從位於不同原始來源的伺服器存取選定資源。

邊緣優化使用 AWS 全球基礎設施,增進對全世界用戶端所提供服務的資源。

 完成時間

5 分鐘

 使用的服務

實作

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

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

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

    5.按一下藍色的「測試」按鈕。

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

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


應用程式架構

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

Full Stack tutorial Module Three app arch

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

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

建立資料表