建置基本 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)。

在本教學進行過程中,我們將會詳細討論這些服務,並指出可協助您快速掌握它們的資源。

架構圖顯示,本教學中如何使用 AWS 服務。

單元

本教學分為六個簡短的單元。您必需依序完成每個單元,方能移至下一單元。

  1. 建立 Web 應用程式 (5 分鐘):將使用 AWS Amplify 主控台為 Web 應用程式部署靜態資源。
  2. 建置無伺服器功能 (5 分鐘):使用 AWS Lambda 建置無伺服器功能。
  3. 連結無伺服器功能至 Web 應用程式 (5 分鐘):以 API Gateway 部署您的無伺服器功能。
  4. 建立資料表 (10 分鐘):在 Amazon DynamoDB 資料表中保留資料。
  5. 新增互動性至 Web 應用程式 (5 分鐘):修改您的靜態 Web 應用程式以調用您的 API。
  6. 清除資源 (5 分鐘):清除本教學中使用的資源。

您會使用從瀏覽器內可直接存取的 AWS 管理主控台建立這個 Web 應用程式。

本頁對您是否有幫助?

建立 Web 應用程式