AWS 入門

建立 React 應用程式

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

簡介:建立 React 應用程式

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

概觀

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

您將學到的內容

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

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

 AWS 經驗

初階

 完成時間

50 分鐘

 完成教學的成本

符合免費方案資格

 教學準備

  • 有管理員等級存取權限的 AWS 帳戶*
  • Node.js:Node.js v10.x 或更高版本
  • GitHub 帳戶
  • Git**:Windows 使用者將需要安裝 Git
  • 文字編輯器。以下是我們喜歡使用的一些免費工具 (按字母順序排列):AtomNotepad++SublimeVimVisual Studio Code

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

單元

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

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

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

部署 React 應用程式