目標
- 類別: Game-Based Learning
- 課名: AWS Card Clash – an Architecture Design Game
- 關卡名稱(遊玩主題): CardClash_ServerlessDevelopement_第1關_單頁式網頁應用程式
透過遊玩本關，學習基本的無伺服器服務架構，以及理解SPA (Single-Page Application) 的運作流程，並認識網頁前後端的互動，以掌握AWS服務的運用。
第一關 架構圖雛形
架構場景應用
Single-Page Application，單頁式網頁應用程式
此關架構建立了一個只需要在 Web 瀏覽器中進行一次載入的單頁式網頁應用程式。
應用場景是系統用戶用自己的瀏覽器使用系統查詢特定id的車輛。
卡牌功能說明
Service Cards:
- Amazon API Gateway
- 卡牌介紹：
是一種全受管的服務，負責管控系統中所有用到的API，使用時可以建立 RESTful API 和 WebSocket API 以啟用即時雙向通訊應用程式。 - 本關功能：
接收Amazon CloudFront的HTTP請求並呼叫AWS Lambda執行查找車輛的程式，取得結果後回應給Amazon CloudFront - 服務網址：
https://aws.amazon.com/tw/api-gateway/
- 卡牌介紹：
- Amazon CloudFront
- 卡牌介紹：
是一種內容傳遞網路(CDN)服務，讓不同地區的系統用戶能快速使用系統。 - 本關功能：
從S3服務取得App物件，並將用戶請求送往後續的Amazon API Gateway，同時讓系統用戶能夠透過邊緣伺服器(Edge Server)而更方便使用系統。 - 服務網址：
https://aws.amazon.com/tw/cloudfront/
- 卡牌介紹：
- Amazon Cognito
- 卡牌介紹：
管理系統用戶的服務，提供註冊、登入等存取權限相關的服務。 - 本關功能：
接收系統用戶的token，並回給認證 - 服務網址：
https://aws.amazon.com/tw/cognito/
- 卡牌介紹：
- Amazon DynamoDB
- 卡牌介紹：
是Amazon的無伺服器NoSQL資料庫服務，用來儲存結構化資料 - 本關功能：
作為系統中存放結構化資料的地方，執行用id查找車輛的指令和回傳資料 - 服務網址：
https://aws.amazon.com/tw/dynamodb/
- 卡牌介紹：
- AWS Lambda
- 卡牌介紹：
是一種運算服務，可執行程式碼以回應事件並自動管理運算資源，無須伺服器或叢集 - 本關功能：
負責運行系統中的查找車輛程式，接收API的呼叫並執行程式 - 服務網址：
https://aws.amazon.com/tw/lambda/
- 卡牌介紹：
- Amazon S3
- 卡牌介紹：
全名Amazon Simple Storage Service，是一種雲端物件儲存服務，儲存非結構化資料，以Artifact(物件)為單位 - 本關功能：
提供Amazon CloudFront需要的App Artifacts - 服務網址：
https://aws.amazon.com/tw/s3/
- 卡牌介紹：
Sercurity Cards:
- IAM
- 卡牌介紹：
全名AWS Identity and Access Management，是管理身分和AWS服務存取權的防護服務 - 本關功能：
在關卡中消耗一點體力打出，保護指定的我方服務卡不被對手佔領，本關中服務卡全部皆可使用 - 服務網址：
https://aws.amazon.com/tw/iam/
- 卡牌介紹：
- AWS WAF
- 卡牌介紹：
Web Application Firewall的縮寫，是一種網頁應用程式的防火牆，用來保護Web應用程式的服務，防止遭受網路攻擊 - 本關功能：
在關卡中消耗一點體力打出，保護指定的我方打出的Web應用程式卡不被對手佔領，如本關中的Amazon API Gateway和Amazon CloudFront - 服務網址：
https://aws.amazon.com/tw/waf/
- 卡牌介紹：
其他:
- AWS Management Console
- 卡牌介紹：
AWS管理主控台，是管理AWS服務的網路介面 - 本關功能：
在關卡中打出可增加一點體力 - 服務網址：
https://aws.amazon.com/tw/console/
- 卡牌介紹：
- AWS CLI
- 卡牌介紹：
全名AWS Command Line Interface，即AWS命令列介面，是一種管理AWS服務的統一工具。可以透過指令來與 AWS 各項服務互動，不需透過 AWS 管理主控台。 - 本關功能：
在關卡中打出可以增加兩點體力 - 服務網址：
https://aws.amazon.com/tw/cli/
- 卡牌介紹：
- AWS CloudFormation
- 卡牌介紹：
是一種基礎設施即程式碼(IaC) 服務，可以幫助使用者利用程式建立、管理AWS或第三的服務，以及進行模型化 - 本關功能：
在關卡中打出可增加三點體 - 服務網址：
https://aws.amazon.com/tw/cloudformation/
- 卡牌介紹：
最終架構圖樣貌
總結
- 學習基本的無伺服器架構
- 理解SPA的運作
- 認識網頁前後端互動
- 掌握AWS服務運用：
- Amazon CloudFront 作為 CDN 連接使用者和 SPA 網頁，將 Amazon S3 中存放的前端資料送至使用者瀏覽器
- Amazon API Gateway 連接到網頁後端，利用 AWS Lambda 執行查找存放在 Amazon DynamoDB 中車輛資料的程式
- Amazon Cognito 提供給使用者認證，確保系統運行安全
- IAM 和 AWS WAF提供系統環境的安全保障
- AWS Management Console、AWS CLI、AWS CloudFormation 幫助系統開發和管理
- Amazon S3 和 Amazon DynamoDB 的差別在於存在資料類型的差異 (是否為結構化) 以及在服務中擔任的不同角色
參考資料
- Service Card：
- Sercurity Cards 和其他：
