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

# Gen 1 アプリのバックエンドを作成する
<a name="build-backend-Gen1"></a>

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

## 前提条件
<a name="fullstack-sample-prerequisites"></a>

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

**にサインアップする AWS アカウント**  
まだ AWS のお客様でない場合は、オンラインの手順に従って [を作成 AWS アカウント](https://portal.aws.amazon.com/billing/signup#/start/email)する必要があります。サインアップすると、Amplify やアプリケーションで使用できるその他の AWS サービスにアクセスできます。

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

**Amplify コマンドラインインターフェイス (CLI)のインストール**  
手順については、「*Amplify Framework ドキュメント*」の「[Amplify CLI のインストール](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli)」を参照してください。

## ステップ 1: フロントエンドをデプロイする
<a name="step-1-deploy-frontend"></a>

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

この例に使用するのに新しいフロントエンドアプリケーションを作成する必要がある場合は、「[Create React App ドキュメント](https://create-react-app.dev/docs/getting-started)」の「*Create React App*」の手順に従います。

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

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

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

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

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

   GitHub App のインストールと認証の詳細については、[GitHub リポジトリへの Amplify アクセスの設定](setting-up-GitHub-access.md) をご参照ください。

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

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

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

   1. [**次へ**] を選択します。

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

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

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

## ステップ 2: バックエンドを作成する
<a name="step-2-create-backend"></a>

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

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

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

1. **[すべてのアプリ]** ページで、*ステップ 1* で作成したアプリを選択します。

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

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

Amplify Studio は、バックエンドを作成および管理し、フロントエンド UI 開発を加速するためのビジュアルインターフェイスです。Amplify の詳細については、[Amplify Studio ドキュメント](https://docs.amplify.aws/gen1/react/tools/console/)を参照してください。

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

**データモデルの作成**

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

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

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

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

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

   次のスクリーンショットは、データモデルがデザイナーでどのように表示されるかを示す例です。  
![データモデルを作成するための Amplify Studio UI。](http://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

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

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

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

## ステップ 3: バックエンドをフロントエンドに接続する
<a name="step-3-connect-backend-to-frontend"></a>

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

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

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

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

   ```
   amplify pull --appId {{abcd1234}} --envName {{staging}}
   ```

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

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

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

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

1. **メイン**ブランチを見つけて [**編集**] を選択します。  
![Amplify コンソールのブランチの [編集] リンクの場所。](http://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

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

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

1. 次に、アプリのバックエンドを変更するために必要な権限を Amplify に付与するサービスロールを設定する必要があります。既存のサービスロールを使用するか、新しいロールを作成できます。手順については、「[バックエンドリソースをデプロイするアクセス許可を持つサービスロールの追加](amplify-service-role.md)」を参照してください。

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

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

   次のいずれかを行います。
   + Git リポジトリから、コードをプッシュして Amplify コンソールでビルドを開始します。
   + Amplify コンソールで、アプリのビルド詳細ページに移動し、[**このバージョンを再デプロイ**]を選択します。

## 次の手順
<a name="next-steps-set-up-feature-branch-deployments"></a>

### 機能ブランチのデプロイのセットアップ
<a name="set-up-feature-branch-deployments"></a>

推奨ワークフローに従って、[複数のバックエンド環境でフィーチャーブランチのデプロイを設定します](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments)。

### Amplify Studio でフロントエンド UI を作成する
<a name="create-studio-ui-components"></a>

Studio を使用して、すぐに使用できる一連の UI コンポーネントでフロントエンド UI を構築してから、アプリのバックエンドにその UI を接続します。詳細とチュートリアルについては、「*Amplify Framework ドキュメント*」の [Amplify Studio](https://docs.amplify.aws/gen1/react/tools/console/) 用ユーザーガイドを参照してください。