入門 - AWS Amplify

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

入門

Amplify Console 可讓開發人員使用 Amplify 架構來建置應用程式,以在每次遞交程式碼時持續將更新部署至其後端和前端。您可以透過 Amplify Console,使用 Amplify CLI 建立的 GraphQL/REST API、驗證、分析和儲存體來部署無伺服器後端。

重要

此功能僅適用於 Amplify CLI v4.0+

在本教學課程中,我們將建立並部署一個 React 應用程序,其可實作使用者註冊/登入的基本身分驗證流程,亦可使用 Amplify 來路由受保護的用戶端。

步驟 1:部署完整堆疊範例

登入Amplify 主控台,然後選擇入門部署。在下一個畫面中,選擇從完整堆疊範例。或者,通過構建一個後端開始你自己的冒險從零開始安裝 Amplify CLI。

選擇驗證入門部署應用程式。您將被要求連線 GitHub 帳戶。連接 GitHub 帳戶數可讓 Amplify 主控台在您的帳戶中建立儲存庫的分支、部署 AWS 後端服務,以及建置和部署前端。若要將後端資源部署到 AWS,您需要建立服務角色

步驟 2:探索完整堆疊應用程式

應用程式建置會從部署後端開始,接著再部署前端。按一下分支名稱來查看執行中的建置。構建完成後,您將能夠在不同設備上看到應用程序的屏幕截圖。

在構建結束時,您將擁有一個前端環境(主分支部署在'https://main.appid.amplifyapp.com')和一個名為 DevX 的後端環境。若要將使用者新增至您的應用程式,您可以透過部署的前端來註冊使用者,或選擇身分驗證標籤,其可連結至 Amazon Cognito UserPool。創建用戶並嘗試登錄到您的應用程序。

步驟 3:新增 GraphQL 後端

  1. 讓我們添加一個帶有 NoSQL 數據庫的 GraphQL SQL API 後端到您的應用程序。要開始,請克隆在您的帳戶中分叉的存儲庫。

    git clone git@github.com:<username>/create-react-app-auth-amplify.git cd create-react-app-auth-amplify
  2. 後端環境索引標籤上選擇編輯後端。作為必要條件,請遵循指示來安裝及設定 Amplify CLI。「Amplify」命令列工具鏈可讓您編輯剛建立的後端,以新增更多功能,例如 Graphql/rest API、分析和儲存裝置。一旦設定了 Amplify CLI,複製Amplify命令從本地計算機連接到這個後端。

    amplify pull --appId XXXXXXXX --envName devw
  3. 使用預設的待辦事項範例新增 GraphQL SQL API。進一步了解如何使用GraphQL 轉換

    amplify add api ? Please select from one of the below mentioned services GraphQL ? Provide API name: todo ? Choose the default authorization type for the API API key ? Enter a description for the API key: ? After how many days from now the API key should expire (1-365): 7 ? Do you want to configure advanced settings for the GraphQL API No, I am done. ? Do you have an annotated GraphQL schema? No ? Do you want a guided schema creation? (Y/n) Y ? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description) ? Do you want to edit the schema now? No ... GraphQL schema compiled successfully.
  4. 若要將這些變更部署到雲端,請執行下列命令。

    amplify push Current Environment: devw | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Api | todo | Create | awscloudformation | | Auth | cognitocf0c6096 | No Change | awscloudformation | ? Are you sure you want to continue? (Y/n) Y .. ✔ Generated GraphQL operations successfully and saved at src/graphql ✔ All resources are updated in the cloud GraphQL endpoint: https://gumwpbojgraj5b547y5d3shurq.appsync-api.us-west-2.amazonaws.com/graphql GraphQL API KEY: da2-vlthvw5qcffxzl2hibgowv3rdq
  5. 請造訪「Amplify 控制台」以檢視新增的 API 類別。選擇 API 類別可讓您瀏覽至 AppSync 主控台 (以撰寫執行 CRUD 作業的查詢或突變) 或 DynamoDB 主控台 (以檢視您的待辦事項表格)。

  6. 使用AAmplify GraphQL 用戶端編寫列出和更新待辦事項的前端代碼。要將更新部署到您的前端,只需提交您的代碼,並在 Amplify 控制台中觸發新的構建。

後續步驟:設定功能分支部署

按照我們建議的工作流程設定具有多個後端環境的功能分支部署