在本單元中,您會使用 Amazon API Gateway 將上個單元中建立的 Lambda 函數公開做為 RESTful API。此 API 將可在公有網際網路上存取。將使用您在前一個單元中建立的 Amazon Cognito 使用者集區來保護它。然後,您會使用此組態,將靜態託管的網站轉換為動態 Web 應用程式,方法為新增用戶端 JavaScript,對公開的 API 進行 AJAX 呼叫。

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 (服務),然後選取應用程式服務下的 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 做為授權方名稱。

    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 代理整合) 方塊。

    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)​。您會在下一個區段中用到它。

  • 步驟 5.更新網站組態

    更新網站部署中的 /js/config.js 檔案,以包括您剛建立之階段的呼叫 URL。您應該直接從 Amazon API Gateway 主控台上階段編輯器頁面的頂部複製呼叫 URL,並將其貼入網站 /js/config.js 檔案的 _config.api.invokeUrl 金鑰中。確定當您更新組態檔案時,它仍然包含您在前一個單元中針對 Cognito 使用者集區所做的更新。


    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. 儲存修改的檔案並推送至 Git 儲存庫,使其自動部署至 Amplify 主控台。

    $ git push
  • 步驟 5.驗證您的實作

    備註:您可能會看到在更新 S3 儲存貯體中的 config.js 檔之後,需要延遲一些時間才能在瀏覽器中看到更新的內容。您也應該確定清除瀏覽器快取,然後再執行下列步驟。


    1. 造訪網站網域下的 /ride.html

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

    3. 在載入地圖之後,請在按一下地圖上的任意處,以設定搭車位置。

    4. 選擇 Request Unicorn (請求獨角獸)。您應該會在側邊欄中看到一個通知,獨角獸正在路上,然後看到獨角獸飛到您的搭車位置。