AWS 上的專案

建立現代 Web 應用程式

部署 Web 應用程式、連接資料庫,以及分析使用者行為

第 4 單元:設定使用者註冊

在此單元中,您將在網站上設定使用者註冊,以便擷取使用者特定資訊。

概觀

為了向 Mythical Mysfits 網站新增更多的關鍵面向,例如允許使用者對其最愛的 mysfit 進行投票並採用 mysfit,我們需要先讓使用者在該網站上註冊。為了啟用網站使用者的註冊和身份驗證,我們將在 AWS Cognito (一種全受管的使用者身份識別管理服務) 中建立使用者集區

然後,為確保只有已註冊的使用者有權在網站上點讚或採用 mysfits,我們將使用 Amazon API Gateway 部署 REST API,使其位於我們的 NLB 之前。Amazon API Gateway 也是一項受管服務,並且提供了諸多常用的現成 REST API 功能,例如 SSL 終止、請求授權、調節、API 階段和版本控制等等。

您將再次使用 AWS CLI,以向 AWS 部署所需的資源。

架構圖

設定使用者註冊架構圖

實作說明

  • A:建立 Cognito 使用者集區

    要建立可存放所有 Mythical Mysfits 訪客的 Cognito 使用者集區,請執行以下 CLI 命令,建立一個名為 MysfitsUserPool 的使用者集區,並指示在該集區中註冊的所有使用者應自動透過確認電子郵件驗證其電子郵件地址,之後方能成為已確認的使用者。

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    從上述命令複製回應,其中應包含您的使用者集區的唯一 ID,而您在之後步驟中需要使用這一 ID。例如:Id: us-east-1_ab12345YZ)

    B:建立 Cognito 使用者集區用戶端

    接下來,為了整合我們的前端網站和 Cognito,我們必須為此使用者集區建立一個新的使用者集區用戶端。隨後將產生一個唯一的用戶端識別符,該識別符可讓我們的網站獲授權在 cognito 中呼叫未驗證的 API,而網站使用者可根據 Mythical Mysfits 使用者集區登入及註冊。要使用 AWS CLI 為上述使用者集區建立新的用戶端,請執行以下命令 (以您上面複製的值取代 --user-pool-id 值):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • 接下來,我們要在現有的 Flask 服務之前建立一個新的 RESTful API,以便我們可以在 NLB 接收到任何請求之前執行請求授權。如單元概觀中所述,我們將使用 Amazon API Gateway 執行此動作。

    為了使 API Gateway 以私有方式與我們的 NLB 整合,我們將設定一個 API Gateway VPC 連結,使 API Gateway API 能直接與以私有方式託管於 VPC 內部的後端 Web 服務整合。注意:基於本研討會的目的,我們已建立了一個將連結網際網路的 NLB,以便可以在之前的單元中直接呼叫它。因此,即使我們在該單元之後要求在 API 中使用授權字符,我們的 NLB 實際上仍將在 API Gateway API 幕後向公眾開放。

    在現實情況下,您應從一開始就將 NLB 建立為內部 NLB (或建立一個新的內部負載平衡器以取代現有的內部負載平衡器),因為 API Gateway 將是連結網際網路的 API 授權的策略。但是為了節省時間,我們將使用我們已建立的 NLB,並將其保持可公開存取狀態。

    使用以下 CLI 命令為我們即將推出的 REST API 建立 VPC 連結 (您需要使用您在第 2 單元中建立 NLB 時儲存的負載平衡器 ARN 取代指示的值):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    上述命令將建立一個名為 api-gateway-link-output.json 的檔案,其中包含即將建立的 VPC 連結的 ID。其還將顯示為 PENDING 狀態,大致如下所示。

    建立過程大約需要 5-10 分鐘,您可以從該檔案中複製 ID,然後繼續進行下一步。

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    建立好 VPC 連結後,我們可以繼續使用 Amazon API Gateway 建立實際的 REST API。

    B:使用 Swagger 建立 REST API

    您的 MythicalMysfits REST API 是使用 ** Swagger ** 進行定義的,Swagger 是一種熱門的開放原始碼框架,可用於透過 JSON 描述 API。該 API 的 Swagger 定義位於 `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`。開啟此檔案,隨後您將看到 REST API 及其定義內的所有資源、方法和組態。

    此 JSON 檔案中有幾個地方需要更新,以包含特定於您的 Cognito 使用者集區以及 Network Load Balancer 的參數。

    API 定義中的 `securityDefinitions` 物件表示我們已使用 Authorization 標頭設定 apiKey 授權機制。您將會發現,AWS 使用前綴 `x-amazon-api-gateway-` 提供了 Swagger 的自訂延伸,在這些延伸中,可以將 API Gateway 特定功能新增至典型的 swagger 檔案中,進而利用 API Gateway 的特定功能。

    按 CTRL-F 即可在整個檔案中搜尋 `REPLACE_ME` 所在的各個位置,並等待您的特定參數。完成編輯後,儲存檔案並執行以下 AWS CLI 命令:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Copy the response,此命令將傳回並儲存下一步驟的 `id` 值:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C:部署 API

    現在,我們已建立 API,但尚未進行部署。要部署我們的 API,我們必須先建立一個部署並指出該部署位於哪一「階段」之前。階段是部署的命名參考,也就是 API 的快照。

    您可以使用「階段」來管理及最佳化特定的部署。例如,您可以將階段設定設定為啟用快取,自訂請求調節,設定日誌記錄,定義階段變數或附加 Canary 測試版本。我們將我們的階段稱為 `prod`。要建立 prod 階段的部署,請執行以下 CLI 命令:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    這樣一來,便可以在網際網路上部署並提供支援使用者授權的 REST API 了... 但是具體在哪呢?! 您的 API 在以下位置可用:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    複製上述命令,取代適當的值,然後在 URI 的末尾新增 `/mysfits`。 在瀏覽器網址列中輸入,您應能再次看到您的 Mysfits JSON 回應。不過,我們新增了一些功能,例如採用和點讚 Flask 服務後端尚未實作的 mysfits。

    接下來,我們來解決這個問題。

    當這些服務更新透過您的 CI/CD 管道自動推送給您時,請繼續進行下一步。

  • A:更新 Flask 服務後端

    為了適應新功能,以檢視、點讚及採用 Mysfit 設定檔,我們已為您的後端 Flask Web 服務提供了更新的 Python 程式碼。

    讓我們用這些檔案覆寫您現有的程式碼庫,然後將它們推送到資料儲存器:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    當這些服務更新透過您的 CI/CD 管道自動推送給您時,請繼續進行下一步。

    B:在 S3 中更新 Mythical Mysfits 網站

    開啟我們即將推送至 Amazon S3 的 Mythical Mysfits index.html 檔案的最新版本,該檔案位於:~/environment/aws-modern-application-workshop/module-4/app/web/index.html。在這個新的 index.html 檔案中,您將看到將用於新增使用者註冊和登入體驗的其他 HTML 和 JavaScript 程式碼。

    該程式碼正在與 AWS Cognito JavaScript SDK 互動,可幫助管理所有需要它的 API 呼叫的註冊、身份驗證和授權。

    在此檔案中,將單引號內的字串 REPLACE_ME 取代為您從之前複製的 OutputValues,然後儲存檔案:

    before-replace2

    另外,對於使用者註冊程序,您還有兩個 HTML 檔案需要插入這些值:register.html 和 confirm.html。同樣,將複製的值插入到這些檔案的 REPLACE_ME 字串中。

    現在,讓我們將這些 HTML 檔案以及 Cognito JavaScript SDK 複製到 S3 儲存貯體,後者可託管 Mythical Mysfits 網站內容,以便線上發佈新功能。

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    在瀏覽器中重新整理 Mythical Mysfits 網站,以查看新功能的實際效果!

    單元 4 到此結束。

最後,擷取使用者行為