建置基本 Web 應用程式
教學
簡介:建置基本 Web 應用程式
遵循逐步指示,建立您的第一個 Web 應用程式
概觀
在本教學中,您將建立簡單的 Web 應用程式。首先,您會建立呈現 "Hello World" 的靜態 Web 應用程式。 接著您會學習如何對 Web 應用程式新增互動性,成為根據您提供的自訂輸入顯示文字。
您會完成的目標
本教學將帶您逐步建立上述的範例 Web 應用程式。您將會:
- 建立 Web 應用程式
- 將 Web 應用程式連線至無伺服器後端
- 以 API 和資料庫新增互動性至您的 Web 應用程式
先決條件
在開始本教學之前,您需要具備:
- AWS 帳戶:如果您還沒有帳戶,請依照設定您的環境入門指南的步驟來快速建立帳戶。
AWS 經驗
初階
最短完成時間
35 分鐘
完成成本
符合免費方案資格
要求
- 有管理員等級存取權限的 AWS 帳戶*
- 建議使用的瀏覽器:最新版的 Chrome 或 Firefox
*過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。
上次更新日期
2023 年 4 月 4 日
應用程式架構
下圖提供本教學中所使用的服務以及如何連線的視覺呈現。此應用程式使用 AWS Amplify、Amazon API Gateway、AWS Lambda、Amazon DynamoDB 和 AWS Identity and Access Management (IAM)。
在本教學進行過程中,我們將會詳細討論這些服務,並指出可協助您快速掌握它們的資源。
單元
本教學分為六個簡短的單元。您必需依序完成每個單元,方能移至下一單元。
- 建立 Web 應用程式 (5 分鐘):將使用 AWS Amplify 主控台為 Web 應用程式部署靜態資源。
- 建置無伺服器功能 (5 分鐘):使用 AWS Lambda 建置無伺服器功能。
- 連結無伺服器功能至 Web 應用程式 (5 分鐘):以 API Gateway 部署您的無伺服器功能。
- 建立資料表 (10 分鐘):在 Amazon DynamoDB 資料表中保留資料。
- 新增互動性至 Web 應用程式 (5 分鐘):修改您的靜態 Web 應用程式以調用您的 API。
- 清除資源 (5 分鐘):清除本教學中使用的資源。
您會使用從瀏覽器內可直接存取的 AWS 管理主控台建立這個 Web 應用程式。