AWS 入門

建置無伺服器 Web 應用程式

使用 AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB 和 Amazon Cognito

建置無伺服器 Web 應用程式

單元 4 – 部署 RESTful API

您會使用 Amazon API Gateway 將上個單元中建立的 Lambda 函數公開作為 RESTful API。

概觀

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

架構概觀

Serverless_Web_App_LP_assets-03

上圖顯示您將在本單元中建置的 API Gateway 元件如何與您先前建置的元件整合。呈現灰色的項目是您已在先前步驟中實作的項目。

您已在第一個單元中部署的靜態網站已有一個頁面,其設定為與您將在本單元中建置的 API 互動。/ride.html 中的頁面具有簡單的地圖型界面,用於請求乘坐獨角獸。在使用 /signin.html 頁面驗證之後,您的使用者將能夠選取其搭車位置,方法為按一下地圖上的某一點,然後選擇右上角的「Request Unicorn (請求獨角獸)」按鈕來請求乘坐。

本單元將著重於建置 API 之雲端元件所需的步驟,但是,如果您對呼叫此 API 的瀏覽器程式碼如何運作有興趣,則可以檢查網站的 ride.js 檔案。在此情況下,應用程式會使用 jQuery 的 ajax() 方法,來提出遠端請求。

 完成時間

15 分鐘

 使用的服務

實作

  • 建立新的 REST API

    a.在 AWS 管理主控台中,按一下 Services (服務),然後選取 Application Services (應用程式服務) 下的 API Gateway
    b.選擇 Create API (建立 API)。
    c.選取 New API (新增 API),並輸入 WildRydes 作為 API Name (API 名稱)。
    d.在 Endpoint Type (端點類型) 下拉式清單中,持續保持選取 Edge optimized (邊緣最佳化) 的狀態。注意:邊緣最佳化最適合從網際網路存取的公共服務。區域端點通常用於主要從相同 AWS 區域內存取的 API。
    e.選擇 Create API (建立 API)

  • 建立 Cognito 使用者集區授權方

    Amazon API Gateway 可以使用 Cognito 使用者集區所傳回的 JWT 符記,來驗證 API 呼叫。在本步驟中,您將為 API 設定一個授權方,以使用您在單元 2 中所建立的使用者集區。

    在 Amazon API Gateway 主控台中,為您的 API 建立新的 Cognito 使用者集區授權方。使用您在前一個單元中建立之使用者集區的詳細資訊來設定它。您可以在透過目前網站的 /signin.html 頁面登入之後,複製並貼上呈現給您的授權符記,來測試主控台中的組態。

    a.在您新建立的 API 下,選擇 Authorizers (授權方)。

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

    c.輸入 WildRydes 作為授權方名稱。

    d.選取 Cognito 作為類型。

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

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

    g.輸入 Authorization 作為 Token Source (符記來源)。

    h.選擇Create (建立)。


    驗證您的授權方組態

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

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

    l.從 /ride.html 上的通知中複製授權符記。

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

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

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

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

  • 建立新的資源和方法

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

    a.在左導覽中,按一下 WildRydes API 下的 Resources (資源)。

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

    c.輸入 ride 作為 Resource Name (資源名稱)。

    d.確認將 Resource Path (資源路徑) 設為 ride

    e.為資源選取 Enable API Gateway CORS (啟用 API 閘道 CORS)。

    f.按一下 Create Resource (建立資源)。

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

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

    i.選取 Lambda 函式作為整合類型。

    j.勾選 Use Lambda Proxy integration (使用 Lambda 代理整合) 方塊。

    k.為 Lambda Region (Lambda 區域) 選取您要使用的區域。

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

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

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

    o.選擇 Method Request (方法請求) 卡片。

    選擇 Authorization (授權) 旁邊的鉛筆圖示。

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

  • 部署 API

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

    a.在 Actions (動作) 下拉式清單中,選取 Deploy API (部署 API)。
    b.在 Deployment stage (部署階段) 下拉式清單中,選取 [New Stage] ([新階段])。
    c.輸入 prod 作為 Stage Name (階段名稱)。
    d.選擇 Deploy (部署)。
    e.記下 Invoke URL (呼叫 URL)​。您會在下一個區段中用到它。

  • 更新網站組態

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

    a.在文字編輯器中開啟 config.js 檔。
    b.更新 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, 
    
        } 
    
    };

    c.儲存修改的檔案並推送至 Git 儲存庫,使其自動部署至 Amplify 主控台。

    $ git push
    
  • 驗證您的實作

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

    a.造訪網站網域下的 /ride.html
    b.若您重新導向至登入頁面,請使用您在前一個單元中建立的使用者身分登入。
    c.在載入地圖之後,請在按一下地圖上的任意處,以設定搭車位置。
    d.選擇 Request Unicorn (請求獨角獸)。您應該會在側邊欄中看到一個通知,獨角獸正在路上,然後看到獨角獸飛到您的搭車位置。

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

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

終止資源