AWS 入門

建置完整堆疊的 React 應用程式

使用 AWS Amplify 建立簡單的 Web 應用程式

簡介
部署並託管 React 應用程式
初始化本機應用程式
新增身份驗證
新增 API 和資料庫
新增儲存體

簡介：建置完整堆疊 React 應用程式

遵循逐步指示，建立您的第一個 React 應用程式

概觀

在本教學課程中，您將使用 AWS Amplify 建立簡單的完整堆疊 Web 應用程式，這是一個包括 Web 託管服務在內的工具和服務集。在第一個單元中，您將在 AWS 上建置和託管 React 應用程式。在其餘四個單元中，您將使用 CLI 初始化本機應用程式，新增身分驗證，新增 GraphQL API 和資料庫，並更新您的應用程式以儲存影像。

您會完成的目標

本教學課程將帶您逐步建立上述的簡單 Web 應用程式。您將學習：

  • 託管：在 AWS 全球內容交付網路 (CDN) 上建立和託管 React 應用程式
  • 身分驗證：將身分驗證新增至應用程式以實現登入和登出
  • 資料庫和儲存：新增 GraphQL API、資料庫和儲存解決方案

 AWS 經驗

初階

 完成時間

50 分鐘

 完成成本

符合免費方案資格

 要求

  • 有管理員等級存取權限的 AWS 帳戶*
  • Node.js：Node.js v10.x 或更高版本
  • GitHub 帳戶
  • Git**：Windows 使用者將需要安裝 Git

[*]過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。
[**]由於 iOS 預設帶有 Git，因此這不適用於 iOS 使用者。

 使用的服務

AWS Amplify

 上次更新日期

2023 年 4 月 28 日

單元

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

  1. 部署和託管 React App (10 分鐘)：透過 AWS Amplify 建立、部署和託管 React 應用程式。
  2. 初始化本機應用程式 (5 分鐘)：使用 AWS Amplify 初始化本機應用程式。
  3. 新增身份驗證 (10 分鐘)：將身份驗證新增到應用程式。
  4. 新增 GraphQL API 和資料庫 (15 分鐘)：建立 GraphQL API。
  5. 增加儲存影像的能力 (10 分鐘)：將儲存體新增到應用程式。

您將使用命令提示字元/終端、測試編輯器和 AWS 管理主控台建置此 React 應用程式。

本頁對您是否有幫助？

 意見回饋
開始單元一

部署並託管 React 應用程式