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

AWS マネジメントコンソール にサインインし Amplify コンソールを開きます。

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

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

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

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

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

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

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

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

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

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

AWS マネジメントコンソール にサインインし Amplify コンソールを開きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

amplify pull --appId abcd1234 --envName staging

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

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

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

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

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

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

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

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

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

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

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