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だけでは一見分かりにくいことも、手を動かすことでより理解が深まる助けになると思います。
350
