Amplify Gen2のQuickStartチュートリアルを進めてみた

NTT東日本の中村です。

Amplify Gen2がGAとなり、プレビューで紹介されていたチュートリアルも大きく変わりました。 改めて、正式公開されたチュートリアルを確認してみました。

プレビュー版はこちらの過去の記事でまとめられていますが、GAになり、多少コマンドの変更等がありますので、ご注意下さい。

• amplify → ampxにコマンドが変更
• sandboxのオプションがnameからidentifierに変更

チュートリアルを始める前に

チュートリアルはReact、Vue、Flutter等、言語フレームワークにより分かれていますが、今回はNextJSのApp Routerをベースに確認します。

今回はQuickStartを進めていきます。

Amplify Gen2のチュートリアル（Quick Start）

以前は無かった、QuickStartのチュートリアルで、GitHubにGen2のテンプレートのリポジトリを作成し、DataとAnthを連携させる流れを説明しています。

リポジトリの作成

「Create repository」のボタンから、自分のGitHubのアカウントにリポジトリを作成します。 予め、同じブラウザのタブで、GitHubにログインしておくとスムーズです。

リポジトリ名を指定して、ログイン中のGitHubアカウントでリポジトリを作成します。

リポジトリが完成しました。ここまで10秒くらいです。

アプリのデプロイ

作成したリポジトリを、AWSアカウントのAmplifyアプリケーションと紐づけます。

GitHubを選択します。

GitHubとAmplifyの連携は、GitHub Appsで連携を行います。初回はAppsのインストール画面が表示されます。 既にインストールが済んでいる場合、GitHubのsettingsから、先程作成したリポジトリが選択対象になっているか、確認します。 社内では連携できるリポジトリを制限している為、任意で追加する必要がありました。

 

フレームワークが自動検出されます。特に設定を変更せず、先に進みます。

7分ほどでデプロイが完了します。 このデプロイは、リポジトリに設定されたAmplifyのAuth（Cognito）、Data（AppSync）をAWSアカウント上に反映するバックエンドのデプロイと、Next.JSをAmplify Hostingに反映するフロントエンドのデプロイが含まれます。初回だけ、多めに時間が掛かります。

画面右下の「Download amplify_outpus.json」をダウンロードしておきます。

アプリの表示

デプロイが完了したので、「ドメイン」のリンクを押すと、Webアプリが表示されました。 GitHub Appsの設定が楽に進めば、、10分掛からないのではないでしょうか。非常にスムーズです。

環境変数の適用

ダウンロードしたamplify_output.jsonをローカルに配置することで、Amplifyのサービスを連携させたローカル開発が行えるようになります。

その他、ローカル開発のポイント

チュートリアルを進めることで、ログインUIの実装、開発者毎のサンドボックスの作成、ユーザごとに分離されたデータの保存を体験することができます。

サンドボックスの作成

Amplify Gen2の新しい機能で、指定したAWSアカウント上に、開発者毎の独立したAuth,Dataを簡単に構築することができます。チーム開発で同じ環境を使ってバッティングが起こる・・・のような事が解消できます。 identifierのオプションを設定することで、それぞれの開発環境がCloudformationで構築されます。

npx ampx sandbox --identifier

ユーザごとに分離されたデータの保存

これはAmplify Gen1から存在する機能です。 TodoデータはDynamoDBに保存されていますが、初期の状態では、保存したレコードはログインユーザ全員に共有されてしまいます。 authorizationのオプションを変更することで、作成したレコードにログイン情報に基づいたOwner属性が付与されるので、作成したレコードを他のユーザが閲覧したり、編集したりということを防ぐことができます。

  }).authorization(allow => [allow.owner()]),

まとめ

プレビュー版と比べ、簡単ですぐに使えるクイックスタートが追加され、簡単にAmplifyを試すことができるようになりました。Docだけでは一見分かりにくいことも、手を動かすことでより理解が深まる助けになると思います。