アプリケーションのバックエンドの構築 - AWS Amplify ホスティング
Gen 2 アプリケーションのバックエンドを作成するGen 1 アプリケーションのバックエンドを作成する

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

アプリケーションのバックエンドの構築

を使用すると、 にデプロイされたデータ、認証、ストレージ、フロントエンドホスティングを使用してフルスタックアプリケーションを構築 AWS Amplify できます AWS。

AWS Amplify Gen 2 では、バックエンドを定義するための TypeScriptベースのコードファーストのデベロッパーエクスペリエンスが導入されています。Amplify Gen 2 を使用してバックエンドを構築してアプリに接続する方法については、Amplify ドキュメントの「バックエンドの構築と接続」を参照してください。

CLI と Amplify Studio を使用して Gen 1 アプリのバックエンドを構築するためのドキュメントをお探しの場合は、Gen 1 Amplify ドキュメントの「バックエンドの構築と接続」を参照してください。

Gen 2 アプリケーションのバックエンドを作成する

TypeScriptベースのバックエンドで Amplify Gen 2 フルスタックアプリケーションを作成する手順を説明するチュートリアルについては、Amplify ドキュメントの「開始方法」を参照してください。

Gen 1 アプリケーションのバックエンドを作成する

このチュートリアルでは、Amplify を使用してフルスタック CI/CD ワークフローを設定します。フロントエンドアプリを Amplify ホスティングにデプロイします。次に、Amplify Studio を使用してバックエンドを作成します。最後に、クラウドバックエンドをフロントエンドアプリに接続します。

前提条件

このチュートリアルを開始する前に、次の前提条件を完了してください。

にサインアップする AWS アカウント

まだ AWS のお客様でない場合は、オンラインの手順に従って を作成 AWS アカウントする必要があります。サインアップすると、Amplify や、アプリケーションで使用できる他の AWS のサービスにアクセスできます。

Git リポジトリを作成する

Amplify は、 GitHub、Bitbucket GitLab、および をサポートしています AWS CodeCommit。アプリケーションを Git リポジトリにプッシュします。

Amplify コマンドラインインターフェイス (CLI) のインストール

手順については、Amplify Framework ドキュメントの「Amplify CLI のインストール」を参照してください。

ステップ 1: フロントエンドをデプロイする

この例で、使用したい既存のフロントエンドアプリが Git リポジトリにある場合は、フロントエンドアプリをデプロイする手順に進むことができます。

この例で使用する新しいフロントエンドアプリケーションを作成する必要がある場合は、「Create React App ドキュメント」の「Create React App」の手順に従います。

フロントエンドアプリをデプロイするには

  1. にサインイン AWS Management Console し、Amplify コンソール を開きます。

  2. 「すべてのアプリ」ページで、[新規アプリ]を選択し、右上隅の[ウェブアプリをホスト]を選択します。

  3. GitHub、Bitbucket、または AWS CodeCommit リポジトリプロバイダーを選択し GitLab、続行 を選択します。

  4. Amplify は git リポジトリへのアクセスを許可します。 GitHub リポジトリの場合、Amplify は GitHub アプリ機能を使用して Amplify アクセスを承認するようになりました。

    GitHub アプリのインストールと承認の詳細については、「」を参照してくださいGitHub リポジトリへの Amplify アクセスの設定。

  5. 「リポジトリブランチを追加」ページで、以下の操作を行います。

    1. 「最近更新されたリポジトリ」リストで、接続するリポジトリの名前を選択します。

    2. ブランチリストで、接続するリポジトリブランチの名前を選択します。

    3. [次へ] をクリックします。

  6. [ビルド設定の構成]ページで、[次へ]を選択します。

  7. [確認]ページ で、[保存してデプロイ]を選択します。デプロイが完了したら、amplifyapp.com デフォルトドメインにアプリを表示できます。

注記

Amplify のアプリケーションのセキュリティを強化するために、amplifyapp.comドメインはパブリックサフィックスリスト（PSL）に登録されています。セキュリティを強化するために、Amplify アプリケーションのデフォルトドメイン名に機密性の高いCookieを設定する必要がある場合は、__Host-プレフィックスの付いたCookieを使用することをお勧めします。このプラクティスは、クロスサイトリクエストフォージェリ (CSRF) 攻撃からドメインを防ぐ際に役立ちます。詳細については、Mozilla 開発者ネットワークの「Set-Cookie」ページを参照してください。

ステップ 2: バックエンドを作成する

Amplify ホスティングにフロントエンドアプリをデプロイしたので、バックエンドを作成できます。次のステップに従って、シンプルなデータベースと GraphQL API エンドポイントを含むバックエンドを作成します。

バックエンドを作成するには

  1. にサインイン AWS Management Console し、Amplify コンソール を開きます。

  2. 「All apps」(すべてのアプリ) ページで、ステップ 1 で作成したアプリを選択します。

  3. アプリのホームページで [バックエンド環境] タブを選択し、[はじめに] を選択します。これにより、デフォルトのステージング環境の設定プロセスが開始されます。

  4. セットアップが完了したら、[Studio を起動する] を選択して Amplify Studio のステージングバックエンド環境にアクセスします。

Amplify Studio は、バックエンドを作成および管理し、フロントエンド UI 開発を加速するためのビジュアルインターフェイスです。Amplify の詳細については、Amplify Studio ドキュメントを参照してください。

次のステップに従って、Amplify Studio ビジュアルバックエンドビルダーインターフェイスを使用して簡単なデータベースを作成します。

データモデルの作成

  1. アプリのステージング環境のホームページで、[データモデルを作成] を選択します。データモデルデザイナーが開きます。

  2. [データモデリング] ページで [モデルの追加] を選択します。

  3. タイトルに、Todo と入力します。

  4. [フィールドを追加]を選択します。

  5. [フィールド名]に Description と入力します。

    次のスクリーンショットは、データモデルがデザイナーでどのように表示されるかを示す例です。

    データモデルを作成するための Amplify Studio UI。

  6. [保存してデプロイ] を選択します。

  7. Amplify ホスティングコンソールに戻ると、ステージング環境のデプロイが進行中です。

デプロイ中、Amplify Studio は、データにアクセスするための AWS AppSync GraphQL API や Todo 項目をホストするための Amazon DynamoDB テーブルなど、バックエンドに必要なすべての AWS リソースを作成します。Amplify は AWS CloudFormation を使用してバックエンドをデプロイします。これにより、バックエンド定義を として保存できます infrastructure-as-code。

ステップ 3: バックエンドをフロントエンドに接続する

フロントエンドをデプロイし、データモデルを含むクラウドバックエンドを作成したので、次はそれらを接続する必要があります。以下の手順に従って、Amplify CLI を使用してバックエンド定義をローカルアプリプロジェクトに取り込みます。

クラウドバックエンドをローカルフロントエンドに接続するには

  1. ターミナルウィンドウを開き、ローカルプロジェクトのルートディレクトリに移動します。

  2. ターミナルウィンドウで次のコマンドを実行し、赤いテキストをプロジェクト固有のアプリ ID とバックエンド環境名に置き換えます。

    amplify pull --appId abcd1234 --envName staging

  3. ターミナルウィンドウの指示に従って、プロジェクトの設定を完了します。

これで、継続的デプロイメントワークフローにバックエンドを追加するようにビルドプロセスを設定できるようになりました。以下の手順に従って、Amplify ホスティングコンソールのフロントエンドブランチとバックエンドを接続します。

フロントエンドアプリブランチとクラウドバックエンドを接続するには

  1. アプリのホームページで [ホスティング環境] タブを選択します。

  2. メインブランチを見つけて [編集] を選択します。

    Amplify コンソールのブランチの [編集] リンクの場所。

  3. 「ターゲットバックエンドの編集」ウィンドウの「環境」で、接続するバックエンドの名前を選択します。この例では、ステップ 2で作成したステージングバックエンドを選択します。

    デフォルトでは、フルスタック CI/CD は有効になっています。このオプションのチェックを外すと、このバックエンドのフルスタック CI/CD がオフになります。フルスタック CI/CD をオフにすると、アプリはプルオンリーモードで実行されます。ビルド時に、Amplify はバックエンド環境を変更せずに aws-exports.js ファイルのみを自動的に生成します。

  4. 次に、アプリのバックエンドを変更するために必要な権限を Amplify に付与するサービスロールを設定する必要があります。既存のサービスロールを使用するか、新しいロールを作成できます。手順については、「サービスロールの追加」を参照してください。

  5. サービスロールを追加したら、「ターゲットバックエンドの編集」ウィンドウに戻り、[保存] を選択します。

  6. ステージングバックエンドをフロントエンドアプリのメインブランチに接続し終えるには、プロジェクトの新規ビルドを実行します。

    次のいずれかを行います。

    • Git リポジトリから、コードをプッシュして Amplify コンソールでビルドを開始します。

    • Amplify コンソールで、アプリのビルド詳細ページに移動し、[このバージョンを再デプロイ]を選択します。

次のステップ

機能ブランチのデプロイのセットアップ

推奨ワークフローに従って、複数のバックエンド環境でフィーチャーブランチのデプロイを設定します。

Amplify Studio でフロントエンド UI を作成する

Studio を使用して、一連の UI コンポーネントを使用してフロントエンド ready-to-use UI を構築し、アプリのバックエンドに接続します。詳細とチュートリアルについては、Amplify Framework ドキュメントの Amplify Studio 用ユーザーガイドを参照してください。