Amplify Admin UI超入門｜ミツエーリンクスTSD

社内勉強会用に「Amplify Admin UI」についてまとめました。

Amplify Admin UIはre:Invent 2020でリリースされた管理画面サービスです。データモデリング、コンテンツ管理、アプリケーションのユーザー・グループ管理 など、CLIを使わなければできなかったAmplifyを使ったバックエンドリソースの作成がかんたんにできるようになりました。

／
ミツエーリンクスTSDのエンジニアリングについて発信しています。
エンジニア積極採用中！
TSD公式エンジニアブログ TSD CoLab
＼

株式会社ミツエーリンクスTSD

Transcript

1. Amplify Admin UI超入門 株式会社ミツエーリンクスTSD 株式会社ミツエーリンクスTSD
2. Jamstackアーキテクチャでは、Webサイトの関係者それぞ れに適切なコンテンツの使い方を提供できる https://www.gatsbyjs.com/blog/2018-10-04-journey- to-the-content-mesh
3. 管理画面を用意するのが大変 できれば自前で開発したくない...。
4. つらい と思ったそこのあなた
5. AWS Amplifyでは
6. 管理画面を瞬殺で つくれます！！
7. AWS Amplify Admim UI
8. Amplify Admin UIとは （※以下Admin UI） re:Invent 2020でリリースされた管理画面サービス CLIを使わなければできなかったAmplifyを使ったバック エンドリソースの作成が、かんたんにできるようになっ た
9. Admin UIの基本機能 （2021年10月時点） データモデリング コンテンツ管理 アプリケーションのユーザー・グループ管理
10. データモデリング データモデルを視覚的に定義可能。モデル間のリレーショ ンの設定や、モデルに対して認証ルールを設定できる
11. コンテンツ管理 データを視覚的に追加できる。入力用UIは、定義したデー タ型に適したものが提供される。テキストはMarkdownに 対応。プレビューも可能。
12. ユーザー・グループ管理 コンテンツデータをアプリ上で操作できるユーザーやユー ザーグループを管理できる。
13. Admin UIへのアクセス管理 AWSマネジメントコンソールの「Admin UI management」＞「Access Control」からユーザーを追 加。権限はフルアクセスとデータ管理のみの2種。
14. カスタムドメイン 管理画面のドメインをカスタムドメインに変更できる。バ ックエンド環境単位で設定が可能。
15. オウンドメディアを作ってみる！ おおまかな流れ： 1. セットアップ 2. Admin UIを有効化する 3. データモデリング 4. コンテンツを追加する 5. アプリケーションに組み込む
16. 1. セットアップ 作成したアプリケーションにAmplifyを紐付け、バックエ ンド環境をインストールする。 今回はReactアプリケーションの構築を想定。 # Amplify CLIのインストール npm install -g @aws-amplify/cli # AWSアカウントの紐付け amplify configure # Amplifyバックエンド環境を初期化 amplify init
17. 2. Admin UIを有効化する AWSマネジメントコンソールの「Admin UI management」＞「Enable admin UI (All environments)」からAdmin UIを有効化
18. 3. データモデリング Admin UIの「Data」の「Add model」を選択
19. モデルを登録 追加したら「Save and Deploy」をクリック
20. 4. コンテンツを追加 「Create article」からコンテンツを追加
21. コンテンツを編集 編集が終わったら「Save Article」をクリック
22. 5. アプリケーションに組み込む ローカル環境に、バックエンド環境の更新を同期 # Amplify Pull amplify pull --appId <app-id> --envName feature
23. Amplifyの読み込み // app.tsx import Amplify from '@aws-amplify/core'; import awsConfigure from '../src/aws-exports'; Amplify.configure({ ...awsConfigure, });
24. DataStoreでデータを参照 AmplifyのDataStoreでデータを参照する。 import {syncExpression, Predicates, SortDirection} from '@aws- amplify/datastore'; import {Article} from '../../src/models';
25. フィルタの設定 データを読み込む前に記述する。 // 省略 DataStore.configure({ // データストアの設定。条件でフィルタをしたいときなどに便利 syncExpressions: [ syncExpression(Article, (post) => post?.archived('eq', false)), ] });
26. データの取得 引数にオプションを設定することも可能。 // データ一覧の取得 const posts = await DataStore.query(Article, Predicates.ALL, { page: 0, limit: 5, sort: (s) => s.releaseDate(SortDirection.DESCENDING), });
27. Admin UIのコンソールから参考コードが参照可
28. 認証ルールの設定方法 認証ルールはAdmin UI上の「Data modeling」＞Modelを 選択すると、右側に表示される
29. 記事に誰でもアクセス する権限を設定する 「Authenticated and unauthenticated scopes」では、認 証されていないユーザーへのアクセ スを制限可能 たとえばCRUDのうちReadだけ有効 化することで、閲覧者に対して記事 の作成や削除の権限を与えないよう なルールを設定できる
30. ほかにも 自分の投稿に対して、他のユーザーが操作できないよう に、操作の制限をかける ユーザーグループに対して権限のルールを設定する など、アプリケーションに対して柔軟な認証ルールを Adumin UIから設定可能
31. Admin UIを使うときの注意 「Contents」がずっとローディング状態で止まったまま になる → データベースをデプロイしなおせば治るときが ある 機能ブランチでバックエンドを共有しているときは、 「 amplify pull 」を忘れずに → うっかりバックエンド の設定を上書きしないように！
32. 今後の機能追加に期待… ご清聴ありがとうございました！