フルスタック React アプリケーションを構築する

実装

• Amplify ライブラリをインストールする

  プロジェクトには 2 つの Amplify ライブラリが必要です。主な aws-amplify ライブラリには、使用するさまざまな AWS のサービスとインタラクションするためのすべてのクライアント側の API が含まれ、@aws-amplify/ui-react ライブラリにはフレームワーク固有の UI コンポーネントが含まれます。これらのライブラリをプロジェクトのルートにインストールします。
  

  npm install aws-amplify @aws-amplify/ui-react

  Code snippet copied

  コピー
• 認証サービスを作成する

  認証サービスを作成するには、Amplify CLI を使用します。
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  コピー
• 認証サービスをデプロイする

  認証サービスがローカルで設定されたので、Amplify push コマンドを実行して認証サービスをデプロイできます。
  

  amplify push --y

  Code snippet copied

  コピー
• Amplify リソースを使用して React プロジェクトを設定する

  CLI は、プロジェクトの src ディレクトリにある aws-exports.js というファイルを作成し、継続して更新します。このファイルを使用して、Amplify プロジェクトで使用できるさまざまな AWS リソースについて React プロジェクトに伝えます。

  これらのリソースを使用してアプリを設定するには、src/index.js を開き、最後のインポートの下に次のコードを追加します。

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  コピー
• App.js に認証フローを追加する

  次に、src/App.js を開き、次のコードで更新します。

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  コピー

  このコードでは、withAuthenticator コンポーネントを使用しました。このコンポーネントは、ユーザー認証フロー全体をスキャフォールディングして、ユーザーがサインアップ、サインイン、パスワードのリセット、および多要素認証 (MFA) のサインインの確認を行うことができるようにします。また、ユーザーをログアウトするための [Sign Out] (サインアウト) ボタンも追加しました。
  

• アプリをローカルで実行する

  リソースのデプロイが完了するのを待ってからアプリケーションを実行すると、アプリケーションを保護する新しい認証フローが表示されます。
  

  npm start

  Code snippet copied

  コピー

  

  ここでサインアップを試すことができます。これを実行すると、検証コードがユーザーのメールアドレス宛てに送信されます。検証コードを使用してアプリにログインします。サインインすると、サインアウトして認証フローを再開する [Sign Out] (サインアウト) ボタンが表示されます。

  

• フロントエンドとバックエンドの CI/CD を設定する

  次に、Amplify 構築プロセスを設定して、継続的デプロイワークフローの一部としてバックエンドを追加する必要があります。ターミナルウィンドウから次を実行します。
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  コピー

  これにより、Amplify コンソールが開きます。ナビゲーションペインから [App settings] (アプリの設定) > [Build settings] (ビルドの設定) を選択し、それを変更してバックエンドセクション (以下のコードの 2～7 行目) を amplify.yml に追加します。編集を行った後、[Save] (保存) を選択します。
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  コピー

  [Build image settings] (ビルドイメージの設定) まで下方向にスクロールし、[Edit] (編集) を選択します。[Add package version override] (パッケージバージョンのオーバーライドを追加) ドロップダウンを選択し、[Amplify CLI] を選択します。画像で示すように、デフォルトでは最新バージョンに設定されているはずです。

  

  次に、作成したバックエンド環境をポイントするようにフロントエンドブランチを更新します。ブランチ名の下で、[Edit] (編集) を選択し、作成したステージングバックエンドをメインブランチにポイントします。[Save] (保存) を選択します。
  

  

  

  「Please set up a service role...」(サービスロールを設定してください...) というメッセージが表示された場合は、表示される手順に従ってから、サービスロールの設定とアプリへのアタッチを続行してください。

• 変更をライブ環境にデプロイする

  ローカルターミナルウィンドウに戻り、変更を GitHub にデプロイして、Amplify コンソールで新しい構築を開始します。

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  コピー