AWS 入門
建置無伺服器 Web 應用程式
使用 AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB 和 Amazon Cognito
簡介:建置無伺服器 Web 應用程式
遵循逐步指示,建立一個簡單的無伺服器 Web 應用程式,讓使用者能夠要求試騎 Wild Rydes 機群的獨角獸
概觀
在本教學課程中,您將建立一個簡單的無伺服器 Web 應用程式,讓使用者能夠要求試騎 Wild Rydes 機群的獨角獸。應用程式將呈現給使用者一個 HTML 型使用者界面,指出他們想要在其中進行挑選,以及將在後端與 RESTful Web 服務互動,以提交請求並分派附近獨角獸的位置。這個應用程式還將提供一些功能,方便使用者註冊該服務,並在要求試騎之前登入。
先決條件
若要完成本教學課程,您需要 AWS 帳戶、安裝 AWS CLI、具有 ArcGIS 帳戶 (以將新增映射至應用程式)、文字編輯器和 Web 瀏覽器。如果您還沒有 AWS 帳戶,您可按照設定您的 AWS 環境快速入門指南進行操作。
應用程式架構
應用程式架構使用 AWS Lambda、Amazon API Gateway、Amazon DynamoDB、Amazon Cognito 和 AWS Amplify 主控台。Amplify 主控台提供持續部署並託管各種靜態 Web 資源,包括 HTML、CSS、JavaScript,以及在使用者瀏覽器中載入的影像檔案。瀏覽器中執行的 JavaScript 會傳送和接收公有後端 API 中使用 Lambda 和 API Gateway 建置的資料。Amazon Cognito 提供使用者管理和身份驗證功能,以保護後端 API。最後,DynamoDB 提供一個持久層,API 的 Lambda 函數可在其中存放資料。
![](https://d1.awsstatic.com/diagrams/Serverless_Architecture.d930970c77b382db6e0395198aacccd8a27fefb7.png)
![](https://d1.awsstatic.com/Test%20Images/Kate%20Test%20Images/Serverless_Web_App_LP_assets-18.25dba6a23c6b2e2cf3183addd3516ec5b0003f8f.png)
靜態 Web 託管
AWS Amplify 託管靜態 Web 資源,包括 HTML、CSS、JavaScript,以及使用者瀏覽器中載入的影像檔。
![](https://d1.awsstatic.com/Test%20Images/Kate%20Test%20Images/Serverless_Web_App_LP_assets-19.0a1c1155ca18cbd0fca29818f6cde6fd04fc7653.png)
使用者管理
Amazon Cognito 提供使用者管理和身份驗證功能,以保護後端 API。
![](https://d1.awsstatic.com/Test%20Images/Kate%20Test%20Images/Serverless_Web_App_LP_assets-20.c55d49f57b1e9d9cf632529bef0ca82aa02bc0cc.png)
無伺服器後端
Amazon DynamoDB 提供一個持久層,API 的 Lambda 函數可在其中存放資料。
![](https://d1.awsstatic.com/Test%20Images/Kate%20Test%20Images/Serverless_Web_App_LP_assets-21.bccd0a0169fcf176cffcc9b5a6c216e68786b1e6.png)
RESTful API
瀏覽器中執行的 JavaScript 會傳送和接收公有後端 API 中使用 Lambda 和 API Gateway 建置的資料。
AWS 經驗
初階
完成時間
2 小時
完成成本
本架構中使用的每一種服務都符合 AWS 免費方案資格。如果超出免費方案的用量限制,則完成本教學課程的費用不到 0.25 USD*。
要求
使用的技術:
- 一個 AWS 帳戶**
- AWS CLI
- ArcGIS 帳戶,可新增映射至應用程式
- 文字編輯器
- 建議的瀏覽器:最新版的 Chrome
- AWS Lambda
- Amazon API Gateway
- AWS Amplify
- Amazon DynamoDB
- Amazon Cognito
*此預估費用假設您在整個教學課程中遵循建議的組態,並在 24 小時內終止所有資源。
**過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的資源。
上次更新日期
2023 年 9 月 5 日
單元
本教學分為五個單元。每個單元將介紹我們將要建置的場景以及逐步指示,以協助您實作架構並驗證工作。
- 託管靜態網站 (15 分鐘):設定 AWS Amplify 以託管內建持續部署功能的 Web 應用程式的靜態資源
- 管理使用者 (30 分鐘):建立 Amazon Cognito 使用者集區,來管理使用者的帳戶
- 建置無伺服器後端 (30 分鐘):建置後端程序,以處理 Web 應用程式的請求
- 部署 RESTful API (15 分鐘):使用 Amazon API Gateway 將上個單元中建立的 Lambda 函數公開作為 RESTful API
- 終止資源 (10 分鐘):終止您在整個教學課程中建立的所有資源