AWS Amplify
コンソールユーザーガイド

サーバーレスチュートリアル: フロントエンドでバックエンドをデプロイする

Amplify コンソールでは、開発者は、Amplify Framework でアプリケーションを構築して、コードをコミットするたびにバックエンドとフロントエンドに更新を継続的にデプロイできます。Amplify コンソールを使用すると、GraphQL/REST API、認証、分析、および Amplify CLI によって作成されたストレージを使用して、サーバーレスバックエンドをデプロイできます。注: この機能は Amplify CLI v1.0 以降でのみ使用できます

このチュートリアルでは、React アプリを作成してデプロイします。ここでは、AWS Amplify を使用して、保護されたクライアントサイドルーティングだけでなく、ユーザーのサインアップ/サインインのための基本認証フローを実装します。

  • 別のフロントエンドフレームワークまたは Amplify バックエンドカテゴリを使用している場合は、Amplify コンソールを使用してバックエンドとフロントエンドをデプロイするのと同じステップを適用できます。このプロジェクトの最終的なコードは、GitHub のサンプルとして入手できます。

  • 既存の Amplify アプリをすでにお持ちの場合は、ステップ 6 に進みます。

  1. Amplify CLI をインストールして新しい Amplify プロジェクトを初期化します。

    npm install -g @aws-amplify/cli
  2. プロジェクトの root で CLI を初期化して、環境に prodという名前を付けます。Amplify CLI を使用して、バックエンド機能をアプリに追加することができます。バックエンド機能には、認証、分析、API、ストレージといったクラウドカテゴリがすべて含まれます。

    create-react-app myapp cd myapp amplify init Enter a name for the environment: prod
  3. サインイン、サインアップ、多要素認証による認証をアプリに追加します。すべての項目でデフォルト値を使用し、更新されたプロジェクト設定を AWS にプッシュします。ユーザー認証を有効にする Amazon Cognito リソースがデプロイされます。

    amplify add auth <accept defaults> ... amplify push
  4. ここで示されているように、フロントエンドコードを更新して、withAuthenticator HOC コンポーネントを App.js に追加します。アプリをローカルでテストして、サインイン画面が表示されていることを確認します。

    npm start
  5. コードをコミットし、選択した Git プロバイダーにアップロードします (Amplify コンソールは GitHub、BitBucket、GitLab、および AWS CodeCommit をサポートしています)。

  6. Amplify コンソールにログインし、[デプロイ] の [使用開始] を選択します。Git プロバイダー、リポジトリ、およびブランチを接続してから [Next] を選択します。

  7. Amplify コンソールによって、リポジトリに Amplify バックエンドがあることが自動的に検出されます。ドロップダウンから、[prod] (CLI で先ほど作成した環境) を選択します。これにより、リポジトリの変更をコミットする度に、コンソールで、prodバックエンドが自動的に更新されます。

  8. [Next (次へ)]、[Save and deploy (保存してデプロイ)] の順に選択します。アプリをビルドするにはまず、バックエンドとそれに続くフロントエンドをデプロイします。実行中のビルドを表示するにはブランチ名をクリックします。ビルドが成功したら、アプリにアクセスできるようになります。