在本單元中,您會使用 Amazon API Gateway 將上個單元中建立的 Lambda 函數公開做為 RESTful API。此 API 將在公用網際網路上提供存取。其會使用您在上個單元中建立的 Amazon Cognito 使用者集區進行加密。接著,您會使用此組態新增用戶端 JavaScript 來針對已公開的 API 執行 AJAX 呼叫,以將靜態託管網站轉變為動態 web 應用程式。

Serverless_Web_App_LP_assets-05

上圖顯示您在本單元中建立的 API Gateway 元件,會如何與先前建立的現有元件彼此整合。灰色的項目為您在先前步驟中已實作的項目。

您在第一個單元中部署的靜態網站,已將頁面設定為與本單元中建立的 API 展開互動。此頁面位於 /ride.html,其具有可請求騎乘獨角獸的簡易映射型界面。使用 /signin.html 頁面完成驗證後,使用者可按一下映射點選取接送位置,然後再選擇右上方的「Request Unicorn (請求獨角獸)」按鈕來請求騎乘。

本單元著重探討有關建立 API 雲端元件的必要步驟,但若您有興趣瞭解瀏覽器程式碼如何運作呼叫此 API,則可偵測網站的 ride.js 檔案。此時,應用程式會使用 jQuery 的 ajax() 方法來發出遠端請求。

單元完成時間:15 分鐘

使用的服務:Amazon API Gateway 和 AWS Lambda


依照以下的逐步指示建立 REST API。按一下各個步驟編號以展開區段。

  • 步驟 1. 建立新的 REST API


    1. 在「AWS 管理主控台」中,按一下「Services (服務)」,然後再於「Application Services (應用程式服務)」下方選取 API Gateway

    2. 選擇「Create API (建立 API)」。

    3. 選取「New API (新 API)」,並輸入 WildRydes 做為「API Name (API 名稱)」。

    4. 在「Endpoint Type (端點類型)」下拉式清單,持續保持選取 Edge optimized 的狀態。注意:邊緣優化最適合從網際網路存取的公共服務。區域端點通常用於主要從相同 AWS 區域內存取的 API。

    5. 選擇「Create API (建立 API)

  • 步驟 2. 建立 Cognito 使用者集區授權方

    Amazon API Gateway 可使用「Cognito 使用者集區」傳回的 JWT 權杖來驗證 API 呼叫。在此步驟中,您會設定 API 的授權方,以使用在「第 2 單元」中建立的使用者集區。

    在 Amazon API Gateway 主控台中,建立 API 的新 Cognito 使用者集區授權方。運用您在先前單元中建立的使用者集區詳細資訊,設定該授權方。透過目前網站的 /signin.html 頁面登入後,您可複製並貼上顯示的授權字符,以在主控台中測試組態。


    1. 在新建立的 API 下方,選擇「Authorizers (授權方)」。

    2. 選擇「Create New Authorizer (建立新的授權方)」。

    3. 輸入 WildRydes 做為「Authorizer (授權方)」名稱。

    4. 選擇 Cognito 作為類型。

    5. 在「Cognito User Pool (Cognito 使用者集區)」下的「Region (區域)」下拉式清單中,選擇您在模組 2 中建立 Cognito 使用者集區的區域 (預設情況下會選擇目前的區域)。

    6. 在「Cognito User Pool (Cognito 使用者集區)」輸入中輸入 WildRydes 或您為使用者集區提供的名稱。

    7. 輸入 Authorization 做為「Token Source (字符來源)」。

    8. 選擇「Create (建立)」。

    驗證授權方組態

    1. 開啟新的瀏覽器標籤,然後瀏覽網站網域下的 /ride.html

    2. 若您重新導向至登入頁面,請使用您在上個單元中建立的使用者身分登入。您會重新導向回 /ride.html

    3. /ride.html 通知中複製授權字符,

    4. 回到剛剛完成建立授權方的前一個標籤

    5. 按一下授權方卡片底部的「Test (測試)」。

    6. 將驗證字符貼到彈出式對話方塊的「Authorization Token (授權字符)」欄位中。

    7. 按一下「Test (測試)」按鈕,確認回應代碼為 200,而且您看到顯示的使用者聲明。

  • 步驟 3. 建立新的資源和方法

    在 API 中建立名為 /ride 的新資源。接著再為該資源建立 POST 方法,並將其設定為使用 Lambda Proxy 整合 (由您在本單元第一個步驟中建立的 RequestUnicorn 函數提供支援)。


    1. 在左側導覽區中,按一下 WildRydes API 下方的「Resources (資源)」。

    2. 從「Actions (動作)」下拉式清單中,選取「Create Resource (建立資源)」。

    3. 輸入 ride 做為「Resource Name (資源名稱)」。

    4. 確認將「Resource Path (資源路徑)」設為 ride

    5. 為資源選擇「Enable API Gateway CORS (啟用 API 閘道 CORS)」。

    6. 按一下「Create Resource (建立資源)」。

    7. 選取新建立的 /ride 資源之後,從「Action (動作)」下拉式清單中選取「Create Method (建立方法)」。

    8. 從顯示的新下拉式清單中選取 POST,然後勾選核取記號

    9. 選取「Lambda Function (Lambda 函數)」做為整合類型。

    10. 勾選「Use Lambda Proxy integration (使用 Lambda Proxy 整合)」的方塊。

    11. 選取您要用來做為「Lambda Region (Lambda 區域)」的「區域」。

    12. 在「Lambda Function (Lambda 函數)」,輸入您在上個單元中建立的函數名稱 RequestUnicorn

    13. 選擇「Save (儲存)」。請注意,若顯示錯誤指出函數不存在,請檢查選取的區域與您在上個單元中使用的區域是否相符。

    14. 若出現提示要求授與 Amazon API Gateway 許可來叫用函數,請選擇「OK (確定)」。

    15. 選擇「Method Request (方法請求)」卡片。

    16. 選擇「Authorization (授權)」旁的鉛筆圖示。

    17. 從下拉式清單中選取 WildRydes Cognito 使用者集區授權方,然後按一下核取記號圖示。

  • 步驟 4. 部署 API

    從 Amazon API Gateway 主控台中,選擇「Actions (動作)」、「Deploy API (部署 API)」。系統會提示您建立新的階段。您可使用 prod 做為階段名稱。


    1. 在「Actions (動作)」下拉式清單中,選取「Deploy API (部署 API)」。

    2. 在「Deployment stage (部署階段)」下拉式清單中,選取「[New Stage] (新階段)」。

    3. 輸入 prod 做為「Stage Name (階段名稱)」。

    4. 選擇「Deploy (部署)」。

    5. 記下「Invoke URL (叫用 URL)」。您會在下個區段中使用該 URL。

  • 步驟 5. 更新網站組態

    在網站部署中更新 /js/config.js 檔案,以包含剛建立之階段的叫用 URL。您應直接從 Amazon API Gateway 主控台的階段編輯器頁面頂端複製叫用 URL,然後將其貼至網站 /js/config.js 檔案的 _config.api.invokeUrl 金鑰。更新組態檔案時,確認其仍包含您在上個單元為 Cognito 使用者集區完成的更新。


    若您已手動完成第 2 單元,則可編輯已儲存於本機的 config.js 檔。若您使用 AWS CloudFormation 範本,則必須先從 S3 儲存貯體下載 config.js 檔。若要執行此動作,請瀏覽位於網站基底 URL 下的 /js/config.js,選擇「File (檔案)」,然後再從瀏覽器選擇「Save Page As (將頁面另存為)」。

    1. 在文字編輯器中開啟 config.js 檔案。

    2. 在 config.js 檔案中的 api 金鑰下方,更新 invokeUrl 設定。針對您在先前區段中建立的部署階段,將值設定為「Invoke URL (叫用 URL)」。

      以下是完整 config.js 檔的範例。請注意,檔案的實際值會有所不同。

    window._config = {

        cognito: {

            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

            region: 'us-west-2' // e.g. us-east-2

        },

        api: {

            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod,

        }

    };

    1. 在本機儲存變更。

    2. 在「AWS 管理主控台」中,選擇「Services (服務)」,然後再於「儲存」下方選取 S3

    3. 導覽至網站儲存貯體,然後再瀏覽至 js 金鑰前綴。

    4. 選擇「Upload (上傳)」。

    5. 選擇「Add Files (新增檔案)」、選取 config.js 本機副本,然後按一下「Next (下一步)」。

    6. 選取「Next (下一步)」,不要變更 Set permissionsSet properties 部分的任何預設值。

    7. Review 部分選擇「Upload (上傳)」。

  • 步驟 5. 驗證實作

    注意:您可能會發現在 S3 儲存貯體中更新 config.js 檔案,與瀏覽器中顯示更新內容的時間彼此會有所延遲。您亦應確認在執行下列步驟之前,先清除瀏覽器快取。


    1. 瀏覽網站網域下的 /ride.html

    2. 若您重新導向至登入頁面,請使用您在上個單元中建立的使用者身分登入。

    3. 載入映射後,在映射中按一下任一處以設定接送位置。

    4. 選擇「Request Unicorn (請求獨角獸)」。您應會在右方側邊欄中,看見通知訊息表示獨角獸正在前來,接著會看見獨角獸圖示飛往接送位置。