搭配 AWS 使用 React Native

2018 年 3 月 5 日 ·9 分鐘閱讀時間

AWS Mobile 資深技術產品經理

AWS 在科技產業中以雲端服務供應商而聞名。這些服務包括運算、儲存和資料庫技術，以及完全受管的無伺服器產品。AWS Mobile 團隊一直與客戶及 JavaScript 生態系統成員密切合作，讓雲端連線的行動和 Web 應用程式更安全、可擴展，且更易於開發和部署。我們從完整入門套件開始，但最近有更多發展。

這篇部落格文章討論了一些針對 React 和 React Native 開發人員的有趣事項

AWS Amplify，一個適用於使用雲端服務的 JavaScript 應用程式的宣告式程式庫
AWS AppSync，一個具有離線和即時功能的完全受管 GraphQL 服務

AWS Amplify

使用 Create React Native App 和 Expo 等工具，React Native 應用程式非常容易啟動。然而，當您嘗試將使用案例與基礎架構服務相符時，將它們連線到雲端可能具有挑戰性。例如，您的 React Native 應用程式可能需要上傳相片。這些相片是否應按使用者受到保護？這可能表示您需要某種註冊或登入程序。您想要自己的使用者目錄，還是使用社群媒體供應商？也許您的應用程式也需要在使用者登入後呼叫具有自訂業務邏輯的 API。

為了協助 JavaScript 開發人員解決這些問題，我們發布了一個名為 AWS Amplify 的程式庫。此設計分為「類別」的工作，而不是 AWS 特有的實作。例如，如果您希望使用者註冊、登入，然後上傳私人相片，您只需將 Auth 和 Storage 類別拉入您的應用程式即可

import { Auth } from 'aws-amplify';

Auth.signIn(username, password)
    .then(user => console.log(user))
    .catch(err => console.log(err));

Auth.confirmSignIn(user, code)
    .then(data => console.log(data))
    .catch(err => console.log(err));

在上述程式碼中，您可以看到 Amplify 協助您完成的一些常見工作範例，例如將多因素驗證 (MFA) 程式碼與電子郵件或簡訊搭配使用。今天支援的類別有

Auth：提供憑證自動化。現成實作使用 AWS 憑證進行簽署，以及來自 Amazon Cognito 的 OIDC JWT 權杖。支援常見功能，例如 MFA 功能。
Analytics：只需一行程式碼，即可在 Amazon Pinpoint 中取得已驗證或未驗證使用者的追蹤。您可以依喜好擴展此功能以取得自訂指標或屬性。
API：提供以安全方式與 RESTful API 互動，並利用 AWS Signature Version 4。API 模組非常適合搭配 Amazon API Gateway 的無伺服器基礎架構。
Storage：簡化在 Amazon S3 中上傳、下載和列出內容的命令。您也可以輕鬆地依使用者將資料分組為公開或私人內容。
Caching：跨 Web 應用程式和 React Native 的 LRU 快取介面，使用特定於實作的持久性。
i18n 和 Logging：提供國際化和在地化功能，以及偵錯和記錄功能。

Amplify 的優點之一是它在設計中編碼了「最佳實務」，適用於您的特定程式設計環境。例如，我們與客戶和 React Native 開發人員合作發現，在開發期間為了快速運作而採取的捷徑會通過到生產堆疊。這些可能會損害可擴展性或安全性，並強制基礎架構重新架構和程式碼重構。

我們如何協助開發人員避免這種情況的一個範例是搭配 AWS Lambda 的無伺服器參考架構。這些架構向您展示了在建置後端時，搭配使用 Amazon API Gateway 和 AWS Lambda 的最佳實務。此模式已編碼到 Amplify 的 API 類別中。您可以使用此模式與多個不同的 REST 端點互動，並將標頭一路傳遞到您的 Lambda 函數以取得自訂業務邏輯。我們也發布了 AWS Mobile CLI，用於使用這些功能啟動新的或現有的 React Native 專案。若要開始使用，只需透過 npm 安裝，然後按照組態提示操作即可

npm install --global awsmobile-cli
awsmobile configure

特定於行動生態系統的編碼最佳實務的另一個範例是密碼安全性。預設 Auth 類別實作利用 Amazon Cognito 使用者集區進行使用者註冊和登入。此服務實作安全遠端密碼協定，作為在驗證嘗試期間保護使用者的一種方式。如果您傾向於閱讀協定的數學原理，您會注意到，在透過原始根計算密碼驗證器以產生群組時，您必須使用大型質數。在 React Native 環境中，JIT 已停用。這使得針對此類安全性作業的 BigInteger 計算效能較差。為了解決這個問題，我們在 Android 和 iOS 中發布了原生橋接器，您可以在專案中連結這些橋接器

npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js

我們也很高興看到 Expo 團隊已將此功能包含在他們的最新 SDK 中，以便您可以在不彈出的情況下使用 Amplify。

最後，特定於 React Native (和 React) 開發，Amplify 包含高階組件 (HOC)，用於輕鬆包裝功能，例如用於應用程式的註冊和登入

import Amplify, { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

class App extends React.Component {
...
}

export default withAuthenticator(App);

基礎組件也以 <Authenticator /> 的形式提供，讓您可以完全控制自訂 UI。它也提供了一些關於管理使用者狀態的屬性，例如他們是否已登入或正在等待 MFA 確認，以及您可以在狀態變更時觸發的回呼。

同樣地，您會找到一般 React 組件，可用於不同的使用案例。您可以根據您的需求自訂這些組件，例如，在 Storage 模組中顯示來自 Amazon S3 的所有私人影像

<S3Album
  level="private"
  path={path}
  filter={(item) => /jpg/i.test(item.path)}/>

您可以透過 props 控制許多組件功能，如先前所示，具有公開或私人儲存選項。甚至還有在使用者與特定 UI 組件互動時自動收集分析的功能

return <S3Album track/>

AWS Amplify 偏好慣例優於組態的開發風格，具有全域初始化常式或類別層級的初始化。最快速的入門方式是使用 aws-exports 檔案。然而，開發人員也可以獨立使用程式庫與現有資源。

如需深入瞭解理念並觀看完整示範，請查看 AWS re:Invent 的影片。

AWS AppSync

在 AWS Amplify 推出後不久，我們也發布了 AWS AppSync。這是一個完全受管的 GraphQL 服務，同時具有離線和即時功能。雖然您可以在不同的用戶端程式設計語言 (包括原生 Android 和 iOS) 中使用 GraphQL，但它在 React Native 開發人員中非常受歡迎。這是因為資料模型非常適合單向資料流和組件階層。

AWS AppSync 可讓您連線到您自己的 AWS 帳戶中的資源，這表示您擁有並控制您的資料。這是透過使用資料來源來完成的，此服務支援 Amazon DynamoDB、Amazon Elasticsearch 和 AWS Lambda。這可讓您在單一 GraphQL API 中結合功能 (例如 NoSQL 和全文檢索搜尋) 作為結構描述。這可讓您混合和比對資料來源。AppSync 服務也可以從結構描述佈建，因此如果您不熟悉 AWS 服務，您可以編寫 GraphQL SDL、按一下按鈕，即可自動啟動並執行。

AWS AppSync 中的即時功能透過具有廣為人知的事件型模式的 GraphQL 訂閱來控制。由於 AWS AppSync 中的訂閱在結構描述上透過 GraphQL 指示詞控制，而且結構描述可以使用任何資料來源，這表示您可以從具有 Amazon DynamoDB 和 Amazon Elasticsearch Service 的資料庫作業，或從具有 AWS Lambda 的基礎架構其他部分觸發通知。

以類似於 AWS Amplify 的方式，您可以在 AWS AppSync 上對您的 GraphQL API 使用企業安全性功能。此服務可讓您快速開始使用 API 金鑰。然而，當您推出到生產環境時，它可以轉換為使用 AWS Identity and Access Management (IAM) 或來自 Amazon Cognito 使用者集區的 OIDC 權杖。您可以使用類型上的政策在解析器層級控制存取。您甚至可以使用邏輯檢查來進行執行階段的精細存取控制檢查，例如偵測使用者是否為特定資料庫資源的擁有者。也有關於檢查群組成員資格以執行解析器或個別資料庫記錄存取的功能。

為了協助 React Native 開發人員瞭解更多關於這些技術的資訊，有一個內建 GraphQL 範例結構描述，您可以在 AWS AppSync 主控台首頁上啟動。此範例會部署 GraphQL 結構描述、佈建資料庫表格，並自動為您連線查詢、變更和訂閱。還有一個功能正常的 AWS AppSync 的 React Native 範例，它利用此內建結構描述 (以及 React 範例)，讓您可以在幾分鐘內讓您的用戶端和雲端組件開始運作。

當您使用 AWSAppSyncClient 時，入門非常簡單，它插入 Apollo Client。AWSAppSyncClient 處理 GraphQL API 的安全性與簽署、離線功能以及訂閱交握和協商程序

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";

const client = new AWSAppSyncClient({
  url: awsconfig.graphqlEndpoint,
  region: awsconfig.region,
  auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey}
});

AppSync 主控台提供組態檔案供下載，其中包含您的 GraphQL 端點、AWS 區域和 API 金鑰。然後，您可以將用戶端與 React Apollo 搭配使用

const WithProvider = () => (
  <ApolloProvider client={client}>
      <Rehydrated>
          <App />
      </Rehydrated>
  </ApolloProvider>
);

此時，您可以使用標準 GraphQL 查詢

query ListEvents {
    listEvents{
      items{
        __typename
        id
        name
        where
        when
        description
        comments{
          __typename
          items{
            __typename
            eventId
            commentId
            content
            createdAt
          }
          nextToken
        }
      }
    }
}

上述範例顯示使用 AppSync 佈建的範例應用程式結構描述的查詢。它不僅展示了與 DynamoDB 的互動，還包括資料分頁 (包括加密權杖) 以及 Events 和 Comments 之間的類型關係。由於應用程式已使用 AWSAppSyncClient 進行組態，因此資料會自動離線保存，並在裝置重新連線時同步。

您可以在此影片中看到此背後的用戶端技術的深入探討和 React Native 示範。

意見反應

這些程式庫背後的團隊渴望聽取這些程式庫和服務如何為您運作。他們也想聽聽我們還可以做些什麼，讓您更輕鬆地使用雲端服務進行 React 和 React Native 開發。請在 GitHub 上聯絡 AWS Mobile 團隊以取得 AWS Amplify 或 AWS AppSync。

AWS Amplify​

AWS AppSync​

意見反應​

AWS Amplify

AWS AppSync

意見反應