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